Search code examples
jqueryformssubmitform-submitkeypress

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


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

Solution

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