jQuery, Ajax & PHP submit multiple forms dilemma

Question

This is a very simple form that I have found on the web (as I am a jQuery beginner).

<!-- this is my jquery -->

<script>
    $(document).ready(function(){
$("form#submit_wall").submit(function() {

var message_wall = $('#message_wall').attr('value');
var id = $('#id').attr('value');
$.ajax({
type: "POST",
url: "index.php?leht=pildid",
data:"message_wall="+ message_wall + "&id="+ id,
cache: false,

success: function(){
$("ul#wall").prepend(""+message_wall+"", ""+id+"");
$("ul#wall li:first").fadeIn();

alert("Thank you for your comment!");
}
});
return false;
});
});
</script>

<!-- this is my HTML+PHP -->
some PHP ...
      while($row_pilt = mysql_fetch_assoc($select_pilt)){

       print 

<form id="submit_wall">
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<input type="hidden" id="id" value="'.(int)$row_pilt['id'].'">
<button type="submit">Post to wall</button>
</form>

and down below is my PHP script that writes to mySQL.

It is a pretty straight forward script. However, it is getting little complicated when I submit it. Since I have more than one form on my page (per WHILE PHP LOOP), thus when I submit - only the FIRST form gets submitted. Furthermore, any other subsequent forms that I submit - data is being copied from the first form. Is there any jQuery functions that clear the data? - or is there a better solution.

Thanks, Nick

Answer 1

Because we can't see all of your forms, I'm not entirely sure, but given your question I'm going to assume that the other forms all share the same id (form#submit_wall), which is invalid an id must be unique within the document.

Given that you're going to change the id of the other forms (I'd suggest using a class name of, probably, 'submit_wall', but the specifics are up to you), the jQuery needs to be changed, too. From:

$("form#submit_wall").submit(function() {

To:

$("form.submit_wall").submit(function() { // using the class-name instead of the id.

Now, of course, you run into the same problems of duplicate ids.

So I'd suggest, again, changing the id to a class and changing:

var message_wall = $('#message_wall').attr('value');
var id = $('#id').attr('value');

to:

var message_wall = $(this).find('.#message_wall').attr('value');
var id = $(this).find('.id').attr('value');

Given the mess that you've posted, above, I find it hard to believe that this is all you need. It would definitely be worth posting the full page (or a demo at JS Fiddle or JS Bin) that fully reproduces your code.

Answer 2

It's because you're giving each form the same id, and thus it is submitting the first element it finds with that id, i.e. the first form. What you should do is assign a unique id to each form, and then give each form an AJAX submit function that submits the form-specific data. You can use jQuery's $.each() function to loop through all the forms and $(this).attr('id') within the submit function to retrieve the form-specific id.

UPDATE: As revealed by the comment on this answer, you actually don't need the each() function because jQuery applies it to every form element anyway.

Here would be an example script:

$(document).ready(function(){
    $("form").submit(function() {
        var message_wall = $(this).children('input[type="text"]').attr('value');
        var id = $(this).children('input[type="hidden"]').attr('value');
        $.ajax({
            type: "POST",
            url: "index.php?leht=pildid",
            data:"message_wall="+ message_wall + "&id="+ id,
            cache: false,
            success: function(){
                $("ul#wall").prepend(""+message_wall+"", ""+id+"");
                $("ul#wall li:first").fadeIn();
                alert("Thank you for your comment!");
            }
        });
       return false;
   });
});