提交带有多个提交按钮的表单

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>

Answer 1

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

Answer 2

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.