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

问题

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

回答1:

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/21329562/jquery-prevent-form-submit-from-enter-but-allow-form-submit-by-button-click

标签

jquery

forms

submit

form-submit

keypress