jquery ajax multiple dynamic forms processing -

i'm doing simple php quiz app uses jquery, rules are:

1. each quiz has many questions (max 100), user clicks add more questions, generates new form, appended @ end of list
2. many answers each question (max 5), user clicks add more answers question, appended @ end of answer list of question
3. questions sorted/weighted submit sequence, ajax post in case
4. answers named "answer[]"
5. the quiz loaded db, user can remove, edit or add new questions/answers within above limits

i've decided organized each question form "class='postable'". script quiz updating looks this

$("#update-change").click(function(e){     e.preventdefault();     showupdate('updating..');         $('form.postable').each(function(){            $.ajax({                  type: "post",                  url: 'update_ask.php',                   data: $(this).serialize()             }).done(function( msg ) {                 feedbackmessage(msg);             });        }); }); 

so, each time "#update-change" hit, there n ajax posted 'update_ask.php' save quiz contents. problem questions won't sorted seeing, 'update_ask.php' fail process ajax request in sequence due lagging.

do have idea/solution case? please advise. thanks.

html 1 question sets looks this:

<form action="update_ask.html" method="post" accept-charset="utf-8" name="aj_edit_ask2430" id="editaskform2430" class="postable">     <input type="hidden" name="idask" value="2430" />     <input type="hidden" name="idquiz" value="240" />     <div class="ask-holder">         <textarea name="ask" class="ask"  tabindex="24300" placeholder="question">cau 5</textarea>         <div class="right answer-image-holder"><img src="no-image.jpg" id="askimg2430" class="answerimg" alt="image" />             <input type="hidden" name="askimg" id="saskimg2430" value="" />         </div>     </div>     <div id="solution2430" class="answer-holder">         <div id="answer30684" class="answer-row">             <textarea name="answer[]" class="answer" tabindex="24301" placeholder="answer or solution">answer 51</textarea>             <div class="right answer-image-holder"> <img src="no-image.jpg" id="img30684" class="answerimg" alt="image" />             <input type="hidden" name="images[]" id="simg30684" value="" />             </div>             <span>             <input type="radio" name="iscorrect" value="1" checked='checked'  />             correct <a href="#row2430" onclick="removeanswer('30684')" title="remove solution" class="removeanswer">delete</a></span>         </div>         <div id="answer30685" class="answer-row">             <textarea name="answer[]" class="answer" tabindex="24302" placeholder="answer or solution">answer 52</textarea>             <div class="right answer-image-holder"> <img src="no-image.jpg" id="img30685" class="answerimg" alt="image" />                 <input type="hidden" name="images[]" id="simg30685" value="" />             </div>             <span>             <input type="radio" name="iscorrect" value="2"   />             correct <a href="#row2430" onclick="removeanswer('30685')" title="remove solution" class="removeanswer">delete</a></span>          </div>         <div id="answer30686" class="answer-row">             <textarea name="answer[]" class="answer" tabindex="24303" placeholder="answer or solution">answer 53</textarea>             <div class="right answer-image-holder"> <img src="no-image.jpg" id="img30686" class="answerimg" alt="image" />                 <input type="hidden" name="images[]" id="simg30686" value="" />             </div>             <span>             <input type="radio" name="iscorrect" value="3"   />             correct <a href="#row2430" onclick="removeanswer('30686')" title="remove solution" class="removeanswer">delete</a></span>          </div>     </div>     <a href="#row2430" onclick="return addsolution('2430')" title="add 1 more solution">add</a> <a href="#row2430" onclick="return removeask('2430','order2430')" title="completely delete question">delete question</a> </form> 

putting each question in own form , making ajax request each question on page seems bad idea. ton of overhead, making 100 server requests every time user hits button. should put questions on 1 form.

as complications make think 1 form necessary each question, i'm betting can still done 1 form questions...but you'll have post code sample shows complication before can there.

---

update:

having stuff associated each question doesn't mean need use 1 form every question. means need revise naming convention elements. based on html provided, change more (notice changes in names of form elements):

<form action="update_ask.html" method="post" accept-charset="utf-8">     <input type="hidden" name="questions[0][idquiz]" value="240" />     <div id="question-2430">         <input type="hidden" name="questions[0][idask]" value="2430" />         <div class="ask-holder">             <textarea name="questions[0][ask]" class="ask"  tabindex="24300" placeholder="question">cau 5</textarea>             <div class="right answer-image-holder"><img src="no-image.jpg" id="askimg2430" class="answerimg" alt="image" />                 <input type="hidden" name="questions[0][askimg]" id="saskimg2430" value="" />             </div>         </div>         <div id="solution2430" class="answer-holder">             <div id="answer30684" class="answer-row">                 <textarea name="questions[0][answers][]" class="answer" tabindex="24301" placeholder="answer or solution">answer 51</textarea>                 <div class="right answer-image-holder">                     <img src="no-image.jpg" id="img30684" class="answerimg" alt="image" />                     <input type="hidden" name="questions[0][images][]" id="simg30684" value="" />                 </div>                 <span>                     <input type="radio" name="questions[0][iscorrect]" value="1" checked='checked'  /> correct                     <a href="#row2430" onclick="removeanswer('30684')" title="remove solution" class="removeanswer">delete</a>                 </span>             </div>             <div id="answer30685" class="answer-row">                 <textarea name="questions[0][answers][]" class="answer" tabindex="24302" placeholder="answer or solution">answer 52</textarea>                 <div class="right answer-image-holder">                     <img src="no-image.jpg" id="img30685" class="answerimg" alt="image" />                     <input type="hidden" name="questions[0][images][]" id="simg30685" value="" />                 </div>                 <span>                     <input type="radio" name="questions[0][iscorrect]" value="2"   /> correct                     <a href="#row2430" onclick="removeanswer('30685')" title="remove solution" class="removeanswer">delete</a>                 </span>              </div>             <div id="answer30686" class="answer-row">                 <textarea name="questions[0][answers][]" class="answer" tabindex="24303" placeholder="answer or solution">answer 53</textarea>                 <div class="right answer-image-holder">                     <img src="no-image.jpg" id="img30686" class="answerimg" alt="image" />                     <input type="hidden" name="questions[0][images][]" id="simg30686" value="" />                 </div>                 <span>                     <input type="radio" name="questions[0][iscorrect]" value="3"   /> correct                     <a href="#row2430" onclick="removeanswer('30686')" title="remove solution" class="removeanswer">delete</a>                 </span>              </div>         </div>         <a href="#row2430" onclick="return addsolution('2430')" title="add 1 more solution">add</a>         <a href="#row2430" onclick="return removeask('2430','order2430')" title="completely delete question">delete question</a>     </div>     <div id="question-2431">         <input type="hidden" name="questions[1][idask]" value="2431" />         <div class="ask-holder">             <textarea name="questions[1][ask]" class="ask"  tabindex="24310" placeholder="question">cau 5</textarea>             <div class="right answer-image-holder"><img src="no-image.jpg" id="askimg2431" class="answerimg" alt="image" />                 <input type="hidden" name="questions[1][askimg]" id="saskimg2431" value="" />             </div>         </div>         <div id="solution2431" class="answer-holder">             <div id="answer30684" class="answer-row">                 <textarea name="questions[1][answers][]" class="answer" tabindex="24311" placeholder="answer or solution">answer 51</textarea>                 <div class="right answer-image-holder">                     <img src="no-image.jpg" id="img30684" class="answerimg" alt="image" />                     <input type="hidden" name="questions[1][images][]" id="simg30684" value="" />                 </div>                 <span>                     <input type="radio" name="questions[1][iscorrect]" value="1" checked='checked'  /> correct                     <a href="#row2431" onclick="removeanswer('30684')" title="remove solution" class="removeanswer">delete</a>                 </span>             </div>             <div id="answer30685" class="answer-row">                 <textarea name="questions[1][answers][]" class="answer" tabindex="24312" placeholder="answer or solution">answer 52</textarea>                 <div class="right answer-image-holder">                     <img src="no-image.jpg" id="img30685" class="answerimg" alt="image" />                     <input type="hidden" name="questions[1][images][]" id="simg30685" value="" />                 </div>                 <span>                     <input type="radio" name="questions[1][iscorrect]" value="2"   /> correct                     <a href="#row2431" onclick="removeanswer('30685')" title="remove solution" class="removeanswer">delete</a>                 </span>              </div>             <div id="answer30686" class="answer-row">                 <textarea name="questions[1][answers][]" class="answer" tabindex="24313" placeholder="answer or solution">answer 53</textarea>                 <div class="right answer-image-holder">                     <img src="no-image.jpg" id="img30686" class="answerimg" alt="image" />                     <input type="hidden" name="questions[1][images][]" id="simg30686" value="" />                 </div>                 <span>                     <input type="radio" name="questions[1][iscorrect]" value="3"   /> correct                     <a href="#row2431" onclick="removeanswer('30686')" title="remove solution" class="removeanswer">delete</a>                 </span>              </div>         </div>         <a href="#row2431" onclick="return addsolution('2431')" title="add 1 more solution">add</a>         <a href="#row2431" onclick="return removeask('2431','order2431')" title="completely delete question">delete question</a>     </div>     <input type="submit" value="update" /> </form>  <script>     $('form').submit(function(e) {         e.preventdefault();         showupdate('updating...');          $.ajax({             type: 'post',             url: 'update_ask.php',             data: $(this).serialize(),             success: function(msg) {                 feedbackmessage(msg);             }         });     }); </script> 

and php might this:

$quizid = $_post['idquiz'];  $questions = $_post['questions']; var_dump($questions);  /* like: array(     [0] => array(         'answers' => array('answer 51', 'answer 52', 'answer 53'),         'ask' => 'cau 5',         'askimg' => '',         'idask' => '2430',         'images' => array('', '', ''),         'iscorrect' => '1'     ),     [1] => array(         'answers' => array('answer 51', 'answer 52', 'answer 53'),         'ask' => 'cau 5',         'askimg' => '',         'idask' => '2431',         'images' => array('', '', ''),         'iscorrect' => '1'     ) ) */