CODEWITHSUNDEEP
htmlforms
Leslie
Leslie

Reputation: 610

How to make HTML form submit when Enter key pressed?

I've got the following HTML code (from a much larger page) that lets me enter a username and password, and also select which server I want to log in to:

<form>
<b>Multi-server Login</b><p>
<table>
<tr><td colspan=2 align=left>
Enter your username and password:<br>
</td></tr><tr><td valign=top>
Username:&nbsp;
</td><td>
<input id='userid' size=20 class='fixed'>
</td></tr><tr><td valign=top>
Password:&nbsp;
</td><td>
<input type='password' id='passwd' size=20 class='fixed'><p>
</td></tr><tr><td valign=top>
Remote Host:&nbsp;&nbsp;
</td><td valign=top>
<select id='server'><br>
<option value='server1' selected>server1<br>
<option value='server2'>server2<br>
<option value='server3'>server3<br>
</select>
</td></tr>
</table>
<p>
<input type='button' value='Submit' id='but0' onclick=\"submitted.value='DONE';\">
<input type='hidden' id='submitted' value=''>
</form>

This works, with my information being submitted when I click the "Submit" button. My question is, how can I change it so that I can also submit my information by pressing the "Enter" key? I tried changing the input line for the Submit button from

<input type='button' value='Submit' id='but0' onclick=\"submitted.value='DONE';\">

to

<input type='submit' value='Submit' id='but0' onclick=\"submitted.value='DONE';\">

but that didn't work; it just caused the page to generate errors when I pressed the "Enter" key. Thanks in advance to all who respond.

Upvotes: 0

Views: 1167

Answers (2)

kodeally
kodeally

Reputation: 15

I would suggest using jQuery and use the keypress event to trap the enter key. In this handler you can post the form.

Upvotes: 0

Tony Gustafsson
Tony Gustafsson

Reputation: 888

You have to have an action attribute for the form. Try to use HTML standard as much as youc an. So specify the page that should recieve the POST in the action, and ENTER will work just fine.

If you want to do something before it goes to the new page, you have to prevent it with javascript. In jQuery you do something like:

$('form').on('submit', function(e) {
  e.preventDefault();
  
  //Your actions goes here... like AJAX?
  
});

Upvotes: 1

Related Questions