jQuery, prevent form submit from enter but allow form submit by button click [duplicate]

Question

This question already has answers here:

Prevent users from submitting a form by hitting Enter (36 answers)

Closed 6 years ago.

I have a form where in an input text box I enter a number and press ENTER and I use jQuery to append the value to a textarea. This all works fine.

The problem I'm having is that if i add a submit button to submit the form, as soon as i press ENTER, it submits the form.

What I want it to do is not submit the form on pressing enter but submit the form ONLY when the submit button is clicked.

I've tried using preventDefault() and return false which will stop the form submitting on pressing ENTER but if i add a click event on the submit button to submit the form, it does nothing. I've put an alert in the click function before the submit and that fires but form doesn't submit

<form id="toteform" method="post" action="blah.php">
    <input type="text" name="bin" id="bin" maxlength="4" autocomplete="off" />

    <input type="text" name="totes" id="tote" maxlength="4" autocomplete="off" />

    <input type="button" name="submit" class="submit" id="submit" value="Submit" />
</form>

jQuery

$("#submit").click(function() {
    $('#toteform').submit();
});

$('#bin').focus();

$('#bin').keypress(function(e) {
    if(e.which == 13) {
        $('#tote').focus();
    }
});

$('#tote').keypress(function(e) {
    if(e.which == 13) {

    // more code here to do other things

Answer 1

I found the solution

$("#toteform").submit(function(e) {
    if (e.originalEvent.explicitOriginalTarget.id == "submit") {
        // let the form submit
        return true;
    }
    else {
        //Prevent the submit event and remain on the screen
        e.preventDefault();
        return false;
    }
});

Answer 2

Be careful with the e.originalEvent.explicitOriginalTarget.id approach. It only works on Gecko based browsers.

Related answer.

Would have used a comment but I don't have enough reputation :(

Answer 3

You can prevent form submit

$("#toteform").on('submit',function(e) {
    e.preventDefault();
});

and on click of submit button you can manually submit the form.

$("#submit").click(function() {
    $('#toteform').submit();
});