Submit form with multiple submit buttons

Question

How to use jQuery to submit the form when you press enter, but to be sent by clicking on the second submit button. So that first submit ignored.

<form method="post" action="">
    <input type="text" name="inp">
    <input type="submit" name="first" value="first">
    <input type="submit" name="second" value="second">
</form>

I am not sure why you would have the first submit button if it isnt going to submit the form. — Steve0, Nov 28 '16 at 17:09
As i understand your question, this is already the case. Pressing enter, first button is used. Clicking on second one, then the second one is used/submited — A. Wolff, Nov 28 '16 at 17:11
I think you don't need that first submit button and just google trigger event key when pressing and u'll get a bunch of stuff to read http://stackoverflow.com/questions/18160342/jquery-how-to-trigger-click-event-on-pressing-enter-key . — rockStar, Nov 28 '16 at 17:12
I need to submit the form when you press to enter, but to ignore the first button. — Honza Synek, Nov 28 '16 at 17:16
Do you mean when pressing enter, the second button should be used? Imho, still unclear what you are asking — A. Wolff, Nov 28 '16 at 17:18
Yes exactly when the INPUT text i want to press Enter to submit the form, as if I clicked the second button. — Honza Synek, Nov 28 '16 at 17:22
Maybe you will find it helpfull: http://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined — A. Wolff, Nov 28 '16 at 17:33

score 1 · Answer 1 · answered Nov 28 '16 at 17:46

You could catch the enter key press, and instead of the default action to execute the first submit button action, force it to execute the second.

Handle a keypress action within the text input:

<input type="text" name="inp" onkeypress="return runScript(event)"/>

Then define your function runScript:

func runScript(e) {
    if(e.keyCode == 13) {
        //Submit action goes here
        document.getElementsByName("second")[0].click()
    }
}

pulekies · Answer 2 · 2016-11-28T18:40:20.073

My understanding is that you want clicking on either button to submit the form, but hitting enter to submit using the second button.

Here are a couple options:

1) Change how buttons are displayed

You can move the first button to actually be second in the markup, but change how it is displayed by positioning it differently. Note that you should also update the tabIndex if you do this.

.firstButton {
  position: absolute;
  width: 80px;
}

.secondButton {
  position: absolute;
  left: 90px;
  width: 80px;
}

<form name="theForm" method="post" action="">
  <input type="text" tabIndex='1' name="inp">
  <div>
    <input type="submit" tabIndex='2' class='secondButton' name="second" value="second">
    <input type="submit" tabIndex='1' class='firstButton' name="first" value="first">     
  </div>
</form>

2) Change the first button not be a submit button and manually handle click

function submitForm() {
  document.theForm.submit();
}

<form name="theForm" method="post" action="">
  <input type="text" name="inp">
  <input type="button" name="first" value="first" onclick="submitForm()">
  <input type="submit" name="second" value="second">
</form>

Hope that helps.

Submit form with multiple submit buttons

2 Answers2