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

Did you make sure each form has a unique ID? Are you checking for each form submission individually? what is $row_pilt? I thought I was having a brain fart by not knowing, but there's nothing even on google except for an example from an estonian dating site...is that just the variable you use to get rows? — rownage
– rownage, Commented Dec 29, 2010 at 20:41

parent5446 · Accepted Answer · 2010-12-29 21:07:18Z

1

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;
   });
});

edited Dec 29, 2010 at 21:07

answered Dec 29, 2010 at 20:40

parent5446

8988 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ken Over a year ago

You usually don't need the each() (such as here); $("form").submit(function(){}); will apply the function to each element.

David Thomas · Accepted Answer · 2010-12-29 20:44:06Z

0

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.

answered Dec 29, 2010 at 20:44

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

ken Over a year ago

Adding onto these suggestions, you should really try to avoid using ID's when possible. By using form elements, you can grab the data using jQuery('your_form').serialize(), which will create a querystring based on the form data. But, as David states, it's almost impossible to help you much further given the incomplete (and messy) example.

Collectives™ on Stack Overflow

jQuery, Ajax & PHP submit multiple forms dilemma

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related