Form submits when pressing ENTER

Question

I'm on Home/Index. I have the following HTML:

<form id="frmCode" style="display: inline-block">
    <input type="text" name="ConfirmationCode"/>
    <input type="button"/>
    <img src="~/Images/loading.gif" id="notificationLoading"/>
</form>

For some reason, if I have the cursor in the ConfirmationCode input and I press the Enter key, the form submits, and redirects to http://localhost:62500/?ConfirmationCode= . The thing is, I've read about this behaviour and I understood it might be somewhat intended behaviour depending on browser and whatnot. But I have this other form,

<form id="frmLogin" class="form-horizontal" role="form">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="col-sm-8">
        <input type="text" name="MailOrUsername" title="Te poți loga introducând mail-ul sau numele de utilizator"  data-val="true" data-val-required="De ce apeși aiurea? Bagă ID." class="form-control" placeholder="Mail sau ID" />
    </div>
    <div class="col-sm-8">
        <input type="password" name="Password" title="Introdu parola asociată contului tău"  data-val="true" data-val-required="Bagă parola." class="form-control" placeholder="Parola" />
    </div>
    <input type="checkbox" name="RememberMe" />
    <span title="Bifând căsuța asta rămâi autentificat și după ce închizi browserul">Ține-mă minte</span>
    <input type="button" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />
    <input type="button" onclick="login_hide()" />
    <img src="~/Images/loading.gif" id="loginLoading" />
</form>

which doesn't have this behaviour, and nothing happens when I press the Enter key.

change your button type to submit – Ubiquitous Developers Dec 24 '15 at 13:20 — Ubiquitous Developers, Dec 24 '15 at 13:20

score 1 · Accepted Answer · answered Dec 24 '15 at 13:47

The form submits because you hace only 1 input in your form (no additional data needs to be entered).

Change you first form to :

<form id="frmCode" style="display: inline-block">
    <input type="text" name="ConfirmationCode"/>
    <input type="text" name="ConfirmationCode2"/>
    <input type="button"/>
    <img src="~/Images/loading.gif" id="notificationLoading"/>
</form>

and the form will not submit when you press Enter

If you want to disable the submition functionality of the form you can add the onsubmit event handler like this:

<form id="frmCode" style="display: inline-block" onsubmit="return false;">
    <input type="text" name="ConfirmationCode"/>
    <input type="button"/>
    <img src="~/Images/loading.gif" id="notificationLoading"/>
</form>

tcollart · Answer 2 · 2015-12-24T13:32:41.680

You need to set the type of the button you want to use to submit your form to submit.

<input type="submit" ...>

<form id="frmLogin" class="form-horizontal" role="form">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="col-sm-8">
        <input type="text" name="MailOrUsername" title="Te poți loga introducând mail-ul sau numele de utilizator"  data-val="true" data-val-required="De ce apeși aiurea? Bagă ID." class="form-control" placeholder="Mail sau ID" />
    </div>
    <div class="col-sm-8">
        <input type="password" name="Password" title="Introdu parola asociată contului tău"  data-val="true" data-val-required="Bagă parola." class="form-control" placeholder="Parola" />
    </div>
    <input type="checkbox" name="RememberMe" />
    <span title="Bifând căsuța asta rămâi autentificat și după ce închizi browserul">Ține-mă minte</span>
    <input type="submit" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />
    <input type="button" onclick="login_hide()" />
    <img src="~/Images/loading.gif" id="loginLoading" />
</form>

More infos on the input element and on control types.

If I change it to `submit` it will submit the form, which is bad, because I want to do that via AJAX using the `onclick="login()"` — iuliu.net, Dec 24 '15 at 14:38
Then please post you login function in your original post. This might help too if you use jQuery: https://api.jquery.com/submit/ — tcollart, Dec 24 '15 at 14:40

score 0 · Answer 3 · edited May 23 '17 at 11:44

That is the usual browser behaviour, when a user presses enter when using a form.

The form will submit and as there is no action attribute in your form tag, it will go back to the current URL (with any of the form fields/values attached) ?ConfirmationCode=

As mentioned in 'Ubiquitous Developers' comment; your are using html buttons <input type="button"/> and not the html submit button <input type="submit" />. This will not have the default behaviours of the submit button.

Its probable that the writer of the script you had, didn't want to use the default behaviours of html forms. Instead using javascript to decide how the form will behave.

I think that they use some javascript to prevent the submission of the form like this;

How to prevent ENTER keypress to submit a web form?

score 0 · Answer 4 · answered Dec 24 '15 at 13:43

The first form is a simple form which follows the default browser rules. The rule is pressing enter means clicking the submit button.

<input type="button"/>

above is not a valid submit button, so the browser submits the form.
In the second case the scenario is diffrerent.

 <input type="submit" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />

here this is a valid submit button and so in pressing enter key, the browser clicks the button and this button instantly calls the JavaScript function "login()". Now it must be in the code that it does something that prevents the form from submission. may be something like "return false;". So the form doe snot submit.

score 0 · Answer 5 · answered Sep 24 '20 at 16:18

You can try this. it works

<form method="post" action="yourpage.html">
<input type="text" name="name" class="inputbox" />
<button type="submit" id="btn1">Submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script>
$(".inputbox").on('keyup', function (e) {
 if (e.keyCode === 13) {
    $("#btn1").click();
 }
});
</script>

Form submits when pressing ENTER

5 Answers5