Jquery Submit Ajax Form With 2 Submit Buttons

im trying to achieve the following, in php i have a form like this:

<

Solution 1:

You could put the event handler on the buttons instead of on the form. Get the parameters from the form, and then add a parameter for the button, and post the form. Make sure the handler returns "false".

$(function() {
  $('input[name=sub]').click(function(){
    var _data= $('#form_1').serialize() + '&sub=' + $(this).val();
    $.ajax({
      type: 'POST',
      url: "php.php?",
      data:_data,
      success: function(html){
         $('div#1').html(html);
      }
    });
    returnfalse;
  });
});

You have to explicitly add the "sub" parameter because jQuery doesn't include those when you call "serialize()".

Solution 2:

In this case you need to manually add the submit button to the posted data, like this:

$(function(){
  $('form#form_1 :submit').submit(function(){
    var _data = $(this).closest('form').serializeArray(); //serialize form
    _data.push({ name : this.name, value: this.value });  //add this name/value
    _data = $.param(_data);                               //convert to string
    $.ajax({
      type: 'POST',
      url: "php.php?",
      data: _data,
      success: function(html){
        $('div#1').html(html);
      }
    });
    returnfalse; //prevent default submit
  });
});

We're using .serializeArray() to get a serialized version of the form (which is what .serialize() uses internally), adding our name/value pair to that array before it gets serialized to a string via $.param().

The last addition is a return false to prevent the default submit behavior which would leave the page.

Solution 3:

Lots of semicolon missing, see below

 $(function(){
      $('form#form_1').submit(function(){
         var _data= $(this).serialize();
         $.ajax({
            type: 'POST',
            url: "php.php?",
            data:_data,
            success: function(html){
               $('div#1').html(html);    
            }
         });
      });
  });

Solution 4:

jQuery Form plugin provide some advance functionalities and it has automated some tasks which we have to do manually, please have a look at it. Also it provides better way of handling form elements, serialization and you can plug pre processing functions before submitting the form.