There are 100 questions, all 100 in one form, and they are sent to the controller via POST, is it possible to make questions through jquery so that questions come out by 1? that is, temporarily hide the remaining questions

example:

<FORM action="" method="post"> <select name="question1" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select name="question2" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form>

  • Do you output them using PHP? And they are all on the page at once? - Walfter
  • All questions from the database go through php, yes - Shked Asket

1 answer 1

You can like this:

 $('.select').change(function() { var next = $(this).next(); if (next.length != 0) { next.show(); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post"> <div class="select"> <select class="select" name="question1"> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> <div class="select" style="display:none;"> <select class="select" name="question2"> <option value="">4</option> <option value="">5</option> <option value="">6</option> </select> </div> <div class="select" style="display:none;"> <select class="select" name="question2"> <option value="">7</option> <option value="">8</option> <option value="">9</option> </select> </div> </form>

You can hide the current and show the following:

 $('.select').change(function() { var next = $(this).next(); if (next.length != 0) { $(this).hide(); next.show(); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post"> <div class="select"> <select class="select" name="question1"> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> <div class="select" style="display:none;"> <select class="select" name="question2"> <option value="">4</option> <option value="">5</option> <option value="">6</option> </select> </div> <div class="select" style="display:none;"> <select class="select" name="question2"> <option value="">7</option> <option value="">8</option> <option value="">9</option> </select> </div> </form>

  • Add else $(this).parent().submit(); and it will automatically submit when choosing the last answer - Walfter
  • dude, help me pliz, and if I have a select inside a div, how can I use the button to assign an opening diva trace - Shked Asket
  • I updated the answer to the div - NTP