CODEWITHSUNDEEP
jqueryajaxforms
Gary Holiday
Gary Holiday

Reputation: 3562

Determing what button submitted a form via ajax

I have a form that can be submitted by two buttons. I want one button to simply save the content of the form and another to save the content and then clear it. I am using ajax to submit the form. I currently have the two buttons named the same name and they each contain a different value. Here are my html buttons,

 //Saves the form
 <button type="submit" name="action" value="save_form" 
         class="btn btn-success">Save</button>
 //Saves the form and clears it
 <button type="submit" name="action"  value="new_form"
         class="btn btn-warning">New Form</button>

I am using ajax to submit the form and this is the code I use to get the value of the action button that submitted the form,

'action' : $('button[name=action]').val()

The entire thing works but the problem is that when I submit the form using the new_form button the above jQuery code still sets the value of the submit button as save_card instead of new card.

I have switched the order of how the buttons appear on the form and the above jQuery code takes the value of whatever button appear first that is named action.

Why is it doing this? How can I detect what button submitted the form?

jQuery that submits the form via Ajax

$(document).on('submit', '#edit_form', function(event) {
    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();

    // get the form data
    var formData = {
        'did'    : $('input[name=did]').val(),
        'front'  : $('textarea[name=front]').val(),
        'back'   : $('textarea[name=back]').val(),
        'cid'    : $('input[name=cid]').val(),
        'action' : $('button[name=action]').val()
     };
     // process the form
     $.ajax({
         type        : 'POST',
         url         : '../API/api.php',
         data        : formData, 
         success: function(data) {
                      //do something
                  }
     });

 });

Upvotes: 1

Views: 80

Answers (1)

Ravi Sharma
Ravi Sharma

Reputation: 31

If you are calling 'action' : $('button[name=action]').val() inside the click event of the button then use

'action' : $(this).val().

$(this) will refer to the element that was clicked. and $('button[name=action]') would return all the button having name = action and you are having two button named action so whatever first encountered is returned.

Update

Try something like below:

$('button[name=action]').click(function(event) {
    // stop the form from submitting the normal way and refreshing the page

    // get the form data
    var formData = {
        'did'    : $('input[name=did]').val(),
        'front'  : $('textarea[name=front]').val(),
        'back'   : $('textarea[name=back]').val(),
        'cid'    : $('input[name=cid]').val(),
        'action' : $(this).val()
     };
     // process the form
     $.ajax({
         type        : 'POST',
         url         : '../API/api.php',
         data        : formData, 
         success: function(data) {
                      //do something
                  }
     });

 });

Upvotes: 2

Related Questions