如何将Enter键限制为只有两个提交按钮的表单中的一个按钮

Question

I have an HTML form having two submit type input buttons with different actions attached. The form should get submitted on click of any of these buttons. But on enter key press , button-B should trigger the submit. Now as i have button-A on top of button-B in the order, button-A is getting triggered on enter press.

Please note that changing the order of buttons is not possible in my case.

My code goes like this,

<form method="POST" action="someAction">
  <input type="text" name="fName"/>
  <input type="text" name="lName"/>
  <input type="submit" value="Action-A" name="button-A"/>
  <input type="submit" value="Action-B" name="button-B"/>
</form>

Answer 1

You can add listeners to all inputs and when the user hit enter you can prevent the default action by using e.preventDefault() . Then select the second submit button and click it.

<script>
window.onload = function() {
    //Select all of input in #form1 of type text
    var inputs = document.querySelectorAll("#form1 > input[type=text]");
    for(var i = 0; i < inputs.length; i++) {
        //Add listeners
        inputs[i].addEventListener("keypress", function(e) {
            var key = e.which || e.keyCode;
            //Check if enter is pressed
            if(key == 13) {
                //Prevent from submitting with A
                e.preventDefault();
                //Click B
                document.getElementById('b').click();
            }
        }, false);
    }
}
</script>

<form id="form1" method="POST" action="someAction">
<input type="text" name="fName"/>
<input type="text" name="lName"/>
<input type="submit" value="Action-A" name="button-A"/>
<input type="submit" value="Action-B" id="b" name="button-B"/>
</form>