62

The title speaks for itself... I have a couple of forms, one of them is just a single text input form and the other one is composed by two text inputs. I do not want any submit button in any of them, I want each form to submit whenever the user presses the ENTER button at any text input:

  1. The form composed by just one input submits everytime the user presses the ENTER button - Perfect!
  2. The second form composed by two text inputs does not behave this way, it does not submit when the user presses the ENTER button at any of both inputs.

Is there a way to make a form with more than one text input behave this way and avoid having a submit button in it?

user193130
  • 8,009
  • 4
  • 36
  • 64
charliebrownie
  • 5,777
  • 10
  • 35
  • 55

5 Answers5

80

Try adding this between the <form></form> tags

<input type="submit" style="display: none" />

Tested it and it works on Firefox and Chrome. If you have a submit input type in the form, enter should automatically submit it, regardless of whether it's visible or not.

I am actually using this myself in a login form, though in the username field, it makes more sense to move to the next field than to submit. Just in case you have a similar use case, here's the code I used (requires jQuery)

$('#username').keypress(function(event) {
    if (event.keyCode == 13 || event.which == 13) {
        $('#password').focus();
        event.preventDefault();
    }
});

Note that there is a slight bug though -- if the user selects a browser autocomplete username and presses enter, it still moves to the next field instead of selecting it. Didn't have time to debug this, but if someone can figure out how to fix it, that would be cool.

user193130
  • 8,009
  • 4
  • 36
  • 64
  • Neat, are you doing something similar with the '#password' input? Just curiosity! Hiding the submit input worked fine, I just needed something simple to get on with! – charliebrownie Jan 06 '15 at 22:20
  • I have a visible submit button on the form and the `#password` field doesn't require any JS code as pressing enter automatically submits the form as expected. Glad that it helped :) – user193130 Jan 06 '15 at 22:22
  • And I guess that if your `#username` field is empty but your `#password` isn't and the form is submitted, you will handle that, right? :) Thank you, indeed it did help! – charliebrownie Jan 06 '15 at 22:27
8

I was looking for a solution to this problem and want to share my solution, based on many posts over here. (Tested on modern Chrome/Firefox/IE)

So, using only Javascript the follow code submits the form if ENTER key is pressed on any field or if the button Submit is pressed. After that it clear/reset the form, which is a nice thing to do.

Hope it helps.

<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>

<div onKeyPress="return myFunction(event)">
  <form id="form01" action="demo_form.asp" onsubmit="return false;" >
    Enter name: <input type="text" name="fname">
    <input type="button" value="Submit" onclick="myFunction(0)">
  </form>
</div>

<script>
function myFunction(e) {
   if((e && e.keyCode == 13) || e == 0) {
     alert("The form was submitted");
     document.forms.form01.submit();
     document.forms.form01.fname.value = ""; // could be form01.reset as well
   }
}
</script>

</body>
</html>
Damian Kozlak
  • 7,065
  • 10
  • 45
  • 51
user3058813
  • 81
  • 1
  • 1
5

Be sure that your inputs are inside "form" element and give the "form" element an "action" attribute.

Ahmadbaba46
  • 221
  • 2
  • 7
  • I'm capturing the form submitting using jQuery, using `$( formId ).on('submit', function (e) { ... });` which works perfectly for the 1st case (one text input form). – charliebrownie Jan 06 '15 at 22:06
3

You will have to look for the Enter key press. This post here shows how to do that. Enter key press event in JavaScript

Community
  • 1
  • 1
Jeremiah Jessel
  • 430
  • 3
  • 13
2

You can use the code below to submit a form after pressing Enter.

<input id="videoid" placeholder="Enter the video ID">
<button id="mybutton" type="button" onclick="myFunction()">Submit</button>

<script>
var input = document.getElementById("videoid");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("mybutton").click();
  }
});
</script>
Herold
  • 21
  • 1