Input Button as SUBMIT

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 BU开发者_Python百科TTON 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:

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

with Javascript enabled

<input type="button" onclick="this.form.submit()" ... /> 

should work

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.

as other said, you have to use Javascript. I recommend JQuery framework.

But i don't understand the refresh thing?

Normal way is you hit submit and your form will be sent over a request to the server. Server process the data and return a response (HTML/JSon..etc) this response will normally be redirect to a result page (to avoid the famous warning about re-post on refresh).

Now if your form is only a little piece of a bigger page, you might want to use ajax to post the little form and then take the result and update your DOM.

All this said, nothing prevent you to use submit type for the button, it is actually the best way to make your enter key defaut to this action. All you have to do is to use Jquery and intercept the submit of your form and make an ajax call instead of going the normal way.

you will find plenty of example to use JQuery since its probably the most used javascript framework.

Hope it help