get value of clicked submit button

Question

i try to get the value of one of two submit-buttons from my formular, but i failed in every case i try to do it.

Hope, someone can help me and show me how i can do it.

This is the html form

<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post" > 
   <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i></button>
   <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i></button>
</form>

This is the JS Code, here i need the name or a id of the clicked button

$(document).on('submit', '.save_form', function (event) {
  event.preventDefault();      
//    var submitbutton = !????
  var formID = $(this).attr('id');
  var formDetails = $('#'+formID);   
  var fileurl = $(this).attr('action');
  ...

Answer 1

There are many ways to do this, one would be to add an event handler to the buttons, as the click happens before the submit, and then use a class or something to identify which button was clicked inside the submit handler.
That way you'd still catch and prevent submits that wasn't initiated from the buttons.

If you don't need to catch the submit specifically, you could just use an event handler for the buttons instead of the form submit

 $(document).on('click', '.save_form button', function() { $('.save_form button').removeClass('clicked'); $(this).addClass('clicked'); }); $(document).on('submit', '.save_form', function(event) { event.preventDefault(); var formID = $(this).attr('id'); var formDetails = $('#' + formID); var fileurl = $(this).attr('action'); var id = $(this).find('button.clicked').prop('id'); alert(id) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post"> <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i> </button> <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i> </button> </form> 

Answer 2

Try binding the event to the submit buttons like this:

 $('.save_form').on('click', '[type=submit]', function(event) { event.preventDefault(); var submitbutton = $(this).attr('id'); var formDetails = $(this).closest('form'); var formID = formDetails.attr('id'); var fileurl = formDetails.attr('action'); console.log(submitbutton); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post"> <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i> </button> <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i> </button> </form> 

Answer 3

let say you have the form bellow,

<form id="sForm">
      <input type="text" name="toSearch" id="toSearch" />
      <input type="submit" id="mysubmit"/>
 </form>

and you want to retrieve to value when the form is submitted.In my example the id of the input is named "toSearch". Just do the following.

$('#sForm').on("submit",function(e){
var myvar = $('#toSearch').val();
//Now you can do anything you wish with the variable myvar
//  Put more code here.

  e.preventDefault();

});

The value will be retrieved on submit but you can change it to Onclick or any other kind of action.

Hope it will help