Question 235276 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – 2 Form Submit buttons – Can I have a Javascript run when only one submit button is pressed

I have a form which has a ‘submit’ button called Finish and a Javascript that runs when the Finish button is pressed which checks to make sure all mandatory fields have been completed which has been working well. We would like to add a 2nd ‘submit’ button to give users a choice of saving a draft or finalising the form and submitting that.

My problem is that when users click either the Save Draft or Finish button the Javascript runs. I haven’t been able to find out if it’s possible to only have this run when the Finish button is clicked and not when the Save Draft button is clicked.

Here’s the basics of my form and buttons/script:

$(window).load(function() {
  $('#editRecord').on('submit', validate);
  // code to check form valiation
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form action="submit.php" method="post" class="" id="editRecord">

  <div class="rate-buttons left py2">
    <input type="submit" name="buttonType" value="Save Draft" class="mr1">
    <input type="reset" name="buttonType" value="Reset" class="mx1">
    <input type="submit" name="buttonType" value="Finish" class="ml1">
  </div>

</form>

Is it possible to just have the Javascript run for a single submit button?

Tags:

3

Answers


  1. 0

    How can I get the button that caused the submit from the form submit event?

    The above link has a solution that uses JQuery, and also one that uses simple vanilla JS in the click handler to determine which button was submitted.

    Login or Signup to reply.
  2. 0

    Make it input type=button" and then do the work separately.

    Here is an example:

    function validate() {
  alert('form submitted!');
}

$(document).ready(function() {
  $('#editRecord').on('submit', validate);
  // code to check form valiation

  $('.mr1').on('click', function() {
    //do waht ever you want to do
    alert('Now do the save draft work here');
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form action="submit.php" method="post" class="" id="editRecord">

  <div class="rate-buttons left py2">
    <input type="button" name="buttonType" value="Save Draft" class="mr1">
    <input type="reset" name="buttonType" value="Reset" class="mx1">
    <input type="submit" name="buttonType" value="Finish" class="ml1">
  </div>

</form>
    Login or Signup to reply.
  3. 0

    I give you an example for your reference:

    function go(form,e){
    e.preventDefault(); //<-Prevent the form submission. 
  for (let i=0; i<form.elements.length;i++){
    console.log("Name:"+form.elements[i].name+",value:"+form.elements[i].value);
  }  
}
    <form action="submit.php" method="post" class="" id="editRecord" onsubmit="go(this,event)">

  <div class="rate-buttons left py2">
    <input type="submit" name="buttonType" value="Save Draft" class="mr1">
    <input type="reset" name="buttonType" value="Reset" class="mx1">
    <input type="submit" name="buttonType" value="Finish" class="ml1">
  </div>

</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search