AJAX Multiple Forms With Same Submit/Click Function

Question

I've got multiple forms (that are similar) that are passed using Ajax to appended a PHP page using this code below. However, when I click the first or second form, it only sends the data from the first form. Can I use just the one function on all forms, or is there a better way to go?

    $('.col_1').click(function(){   // $('#col_1').on("click", function(){
            var parent_id = $('input[name=parent_id]').val(); 
            var child_id = $('input[name=child_id]').val(); ////  
         $.ajax({
              type:"POST",
              url: "array-2.php",
              data:{parent_id: parent_id, child_id: child_id},                          
              success: function(){
        //do stuff after the AJAX calls successfully completes
             }

         }).done(function(data) {
       $('body').append(data);
         });
    });

Here is the HTML I'm using.

    <form  name="col_1" id="columnA1"  class="col_1"><div>Entrepreneur</div>
    <input name="parent_id" type="hidden" id="parent_id" value="1234" />
    <input name="child_id" type="hidden" id="child_id" value="abcd" />
    </form>

    <form  name="col_1" id="columnA2" class="col_1"><div>Musician</div>
    <input name="parent_id" type="hidden" id="parent_id" value="5678" />
    <input name="child_id" type="hidden" id="child_id" value="efgh" />
    </form>

I've seen similar threads using the submit functions but none with the click event. Thanks

it looks like you are going to submit the form if it is clicked anywhere, not sure that is intended behavior, but probably not what you want — kkemple, Dec 05 '13 at 20:32

score 1 · Accepted Answer · edited May 23 '17 at 12:04

You need to make your selector specific, what you have is too generic that it will select all the input[name=parent_id] and val() on the collection will return the value of the first item in the collection.

So change it to:

var $this = $(this),
     parent_id = $this.find('input[name=parent_id]').val(),
     child_id = $this.find('input[name=child_id]').val();

Also note that you may want to use submit event instead of click event. What you have is an event registered for the click event on the form which will keep invoking the event when you click anywhere inside the form(unless you really want to do so).

You can also use serializeObject. It will take care of all form fields:-

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

and you can do:

   $.ajax({
          type:"POST",
          url: "array-2.php",
          data: $(this).serializeObject(),  //This will give you the map                        
          success: function(){
          ...
         }
         ...

Demo

That did the trick! Thanks a ton, spent so much time looking for an answer. Thanks again! — user3065173, Dec 05 '13 at 20:37

score 1 · Answer 2 · answered Dec 05 '13 at 20:37

you should really be using the submit method and not click, your current code will fire every time the whole form is clicked on, it should look something like this:

$('.col_1').on('submit', function(e){   // fire on submit
    var form = $(this);
    var parent_id = form.find('input[name=parent_id]').val(); 
    var child_id = form.find('input[name=child_id]').val();
    $.ajax({
       type:"POST",
       url: "array-2.php",
       data:{parent_id: parent_id, child_id: child_id}
    }).done(function(data) {
       $('body').append(data);
    });
    e.preventDefault();
});

Best solution I have found so far to solve this issue. Thank you so much.. It rocks even after almost 2 years. — Rehmat, Oct 05 '15 at 13:16

score 0 · Answer 3 · answered Dec 05 '13 at 20:38

Don't use the click on a form. It does not make any sense.

Just do this

<div class="col_1" data-parent_id="1234" data-child_id="abcd">Entrepeneur</div>
<div class="col_1" data-parent_id="5678" data-child_id="efgh">Musician</div>

using

$(function() {
   $('.col_1').click(function(){  
     var parent_id = $(this).data("parent_id"); 
     var child_id = $(this).data("child_id]");  
     $.post("array-2.php",{parent_id: parent_id, child_id: child_id},
       function(data){
         //do stuff after the AJAX calls successfully completes
         $('body').append(data);
     });
  });
});

AJAX Multiple Forms With Same Submit/Click Function

3 Answers3