CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
user3065173
user3065173

Reputation: 13

AJAX Multiple Forms With Same Submit/Click Function

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

Upvotes: 1

Views: 2464

Answers (3)

PSL
PSL

Reputation: 123739

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

Upvotes: 1

mplungjan
mplungjan

Reputation: 178403

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

Upvotes: 0

kkemple
kkemple

Reputation: 992

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

Upvotes: 1

Related Questions