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

Question

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

score 6 · Answer 1 · edited May 23 '17 at 12:01

6

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 :(

edited May 23 '17 at 12:01

Community

1
1

answered Nov 06 '14 at 15:17

neokrisys

61
1
3

Have another 10 rep to get your comment skillz up. – MrMarlow May 24 '16 at 10:02

score 2 · Answer 2 · answered Jan 24 '14 at 09:59

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

answered Jan 24 '14 at 09:59

Adil Shaikh

44,509
17
89
111

Thanks for your reply. I changed the input type of button to submit and for both input types they still don't submit the form. I have added an alert within the #submit click event and as soon as you enter a value and press ENTER, the alert opens without the button click – AdRock Jan 24 '14 at 10:09

score 0 · Accepted Answer · answered Jan 24 '14 at 10:20

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

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

3 Answers3

Linked