Creating an input key in the form of an HTML message instead of activating a button

Question

I have an HTML form with a single submit input, but also with various button elements. When the user presses the 'enter' key, I expect it to actually submit the form, but instead (within at least 15) I find that it launches the first button (since this happens earlier in the HTML than the submit input, I think).

I know that in general, you cannot force browsers to support a specific submit input, but I really thought that they would approve submit inputs via button elements. Is there a little tweak I can make for HTML to make this work, or will I have to take some kind of Javascript approach?

Here is a crude HTML layout:

 <form action="form.php" method="POST"> <input type="text" name="field1"/> <button onclick="return myFunc1()">Button 1</button> <input type="submit" name="go" value="Submit"/> </form> 

Answer 1

You can use jQuery:

 $(function() { $("form input").keypress(function (e) { if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { $('button[type=submit] .default').click(); return false; } else { return true; } }); }); 

Answer 2

You do not need JavaScript to select the submit button or the default input. You just need to mark it type="submit" , and the rest of the buttons will mark them with type="button" . In your example:

 <button type="button" onclick="return myFunc1()">Button 1</button> <input type="submit" name="go" value="Submit"/> 

Answer 3

Try this, if you press the enter key, you can write it like this, for example, I developed an answer for another day. Html button indicate the selected one , see if this helps.

Specify the name of the form, for example, yourFormName , after which you can submit the form without focusing on the form.

 document.onkeypress = keyPress; function keyPress(e){ var x = e || window.event; var key = (x.keyCode || x.which); if(key == 13 || key == 3){ // myFunc1(); document.yourFormName.submit(); } } 

Answer 4

I just ran into a problem. Mine was dropped from changing input to button , and I had a poorly written tag terminator /> :

So I had:

 <button name="submit_login" type="submit" class="login" />Login</button> 

And just amended:

 <button name="submit_login" type="submit" class="login">Login</button> 

Now works like a charm, always annoying little things ... HTH

Answer 5

Given that there is only one (or potentially more than one) solution with the submit button, here is a jQuery-based solution that will work for multiple forms on the same page ...

 <script type="text/javascript"> $(document).ready(function () { var makeAllFormSubmitOnEnter = function () { $('form input, form select').live('keypress', function (e) { if (e.which && e.which == 13) { $(this).parents('form').submit(); return false; } else { return true; } }); }; makeAllFormSubmitOnEnter(); }); </script> 

Answer 6

I just gave this twist both in Chrome, and in Firefox and IE10.

As mentioned above - make sure you check the type = "button", "reset", "submit", etc. to make sure that it cascades correctly and selects the correct button.

Perhaps also setting the same form for them (i.e. everything that worked for me)

Answer 7

 $("form#submit input").on('keypress',function(event) { event.preventDefault(); if (event.which === 13) { $('button.submit').trigger('click'); } });