Submit multiple forms with jQuery php mysql

Question

I have any page for answer/question. i retrieve list of question for admin. admin see this. now i need to send answer to each question. so i for each question put textarea and form with post action. now i need to when send answer of question message, if send message to external php files = true; of message(ID) remove(jquery slideup effect). for this i have jquery submit form code ( without refresh page ) but I have big problem. this worked ONLY with one form. and not worked for all list form ( question + answer form )? how to worked my code for multiple form? I chose the right way?

html code:

<form action="insert.php?id=42" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>
<form action="insert.php?id=45" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>
<form action="insert.php?id=48" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>
<form action="insert.php?id=50" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>

Thanks

Answer 1

Your major issue is probably that you are trying to reuse ids. All the forms have the id of "forms" and you are also sharing the id "box" .

All ids should uniquely identify an element. Use a class when you need to classify an element. I'd recommend you change id="forms" on all the forms to class="reply_form" and then also change id="box" on all the divs to class="reply_box" . Then change styles set for #forms and #box to those set for.reply_form and.reply instead.

EDIT - tweaks made in jsfiddle after some discussion with the OP.

http://jsfiddle.net/gvnfg/5/

Answer 2

just change the selector. id attribute must be unique in html

$("[name='form']").submit(function() {
    $this = $(this);    
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        cache: false,       
        beforeSend: function() {
            $('#loading').show();
            $('#result').hide();
        },
        success: function(data) {
            if(data==1){
              $('#loading').hide();
              $('#result').fadeIn('slow').html("ok");
              $('#result').addClass('true');
              $this.slideUp(1000);
            }
        else {
            $('#loading').hide();
            $('#result').fadeIn('slow').html(data);
            $('#result').addClass('errors');
        }}
    });
     e.preventDefault();
    return false;
});

Answer 3

use Jquery .each() method:

$(document).ready(function() {
    $('#forms').each(function() {

       this.submit(function() {
           $.ajax({ ... });
       });
    });

})