Question

I need to have a form submitted using the enter key, however, I have to use a BUTTON instead of SUBMIT as the type in order for the page to not refresh. How can I get my BUTTON to act as a SUBMIT and be executed whenever someone pushes their enter key?

<form>
<input type=text ...>
<input type=button ...>
</form>

A lot of the information I found about this mentions Netscape/IE/lots of outdated material.

This is my HTML output, I’m looking to hide the submit button and use ENTER:

https://i.stack.imgur.com/Ohepe.png

Answer 1

I have to use a BUTTON instead of SUBMIT as the type in order for the page to not refresh

Nah. Use a normal submit button that refreshes the page. (And ideally, for accessibility, make it work!) Then add progressive enhancement to replace the submission action of the form with something smoother when JS is available. Use return false (or event.preventDefault() in the DOM 2 Events model) to stop the form submitting in this case.

<form id="foo" method="POST" action="dosomething.script">
    ...
    <input type="submit" value="Do something"/>
</form>

document.getElement('foo').onsubmit= function() {
    beginAJAXSubmission();
    return false;
};

Catching the submit event of a form is generally better than trying to pick up click on buttons, because it will always fire when the form would normally be submitted, including on Enter keypresses. click on the first submit button in a form will usually be fired on an Enter keypress, but there are cases (depending on number of controls in the form and what browser it is) where it doesn’t happen and so you can end up falling through to actually submitting the form.