ansaurus

Question

jQuery submit ajax form with 2 submit buttons

Answer 1

+1 A:

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

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

Pointy 2010-07-18 13:27:47

Answer 2

A:

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

Starx 2010-07-18 13:28:06

god i wanted to put -1 for your answer. Now it's ok back to 0.

tada 2010-07-18 14:10:19

It might not be ur answer, but its a good standard to follow , why dont u put -1 on that

Starx 2010-07-18 15:32:50

Answer 3

+1 A:

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);
      }
    });
    return false; //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.

Nick Craver 2010-07-18 13:32:09

Answer 4

A:

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.

Milinda Pathirage 2010-07-18 14:08:45

ansaurus

tags:

views:

answers:

jQuery submit ajax form with 2 submit buttons

related questions