Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form not submitting when pressing enter

I have the following HTML/JS/jQuery Code. This code represents a login form that is presented modally to the user to allow them to login. The problem is, when I hit enter, the form does not seem to execute the "onsubmit" event. When I click the button as the bottom of the form (which has virtually the same code as the onsubmit event), it works perfectly. I am wondering if anyone can tell me why this form isn't submitting..? Any assistance would be appreciated.

jQuery Code to Show Login Modal:

showDivAndFocus('loginModal','loginaccount');   function showDivAndFocus(v,t){      if (api)         if (api.isOpened)             api.close();      api = $('#'+v).overlay({         mask: {color: '#000000'},          top:'0px',         api: true,         autoScrollToActive: false,         autoScrollOffset: 0      }).load();      document.getElementById(t).focus(); } 

HTML Code

<div class="modal" id="loginModal">     <h2>User Login</h2>     <br />      <form action="javascript:void(0);" onsubmit="return(doLogin());"  name="loginForm" id="loginForm">         <table width="95%" cellpadding="4" cellspacing="4">         <tr>         <td class="regw" align="left"><b>Account Number:</b></td>         <td class="regw" align="left"><input type="text" maxlength="10" size="10" name="loginaccount" id="loginaccount" /></td>         </tr>          <tr>         <td class="regw" align="left"><b>Username:</b></td>         <td class="regw" align="left"><input type="text" maxlength="20" size="20" name="loginusername" id="loginusername" /></td>         </tr>          <tr>         <td class="regw" align="left"><b>Password:</b></td>         <td class="regw" align="left"><input type="password" maxlength="20" size="20" name="loginpassword" id="loginpassword" /></td>         </tr>            <tr>         <td class="regw" align="left"><b>Remember Me:</b></td>         <td class="regw" align="left"><input type="checkbox" name="loginremember" id="loginremember" /></td>         </tr>            <tr><td colspan="2">             <div>                   <center>                     <table><tr><td width="50" valign="middle">                         <div id="loginLoading" style="height:24px;width:24px;"></div>                        </td><td>                         <button onclick="doLogin();" type="button" class="ok">Submit</button>                     </td><td>                         <button onclick="api.close();" type="button" class="cancel">Cancel</button>                     </td><td width="50">&nbsp;</td></tr></table>                 </center>             </div>         </td></tr>          </table>     </form> </div> 

AJAX Call

function doLogin(){     var ajax = getXmlObject();     var f = getFormVariables();     var url= '/login.php?f=' + encodeURIComponent(f);     if (ajax.readyState == 4 || ajax.readyState == 0) {         ajax.open("POST", url, true);         ajax.onreadystatechange = function () {             if (ajax.readyState == 4) {                 var a = ajax.responseText;                 if (a=="OK"){...} else {...}             }         };         ajax.send(null);       }       return false;  } 
like image 447
Dutchie432 Avatar asked Nov 16 '10 16:11

Dutchie432


People also ask

How do you submit a form when Enter is pressed?

Given an HTML form and the task is to submit the form after clicking the 'Enter' button using jQuery. To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value.

Why submit button is not working?

Sometimes the problem is caused by old versions of the Javascript files, cached by your browser and can be fixed by clearing the browser cache. You can use the browser console of your browser for debugging. After the Javascript error is fixed, the submit button will automatically be enabled.

How do I stop form submission on enter key?

To prevent form submission when the Enter key is pressed in React, use the preventDefault() method on the event object, e.g. event. preventDefault() . The preventDefault method prevents the browser from refreshing the page when the form is submitted.


2 Answers

I was struggling with this same issue; one of my forms was submitting when pressing "enter" in the text fields with no problem; another, similar, form on the same page wouldn't submit at all, for the life of me.

Neither field had a submit button, and neither was using javascript to do any submission.

What I found, is that when there is only a single text field in a form, pressing 'enter' in the text field will automatically submit; but if there is more than one (regular (i.e. single-line) text input) field, it does nothing, unless there is also some kind of 'submit' button.

Apparently this is part of the HTML 2.0 specification:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

An old, but apparently still valid, and interesting, further discussion here.

... evidently meant as a convenient way to submit simple queries, but reducing the risk, on a complex form, of prematurely submitting it while trying to fill it in. Numerous browser implementers (e.g Netscape, Opera, various versions of Lynx,...) followed this advice, though it seems with slightly different interpretations.

I made a JSFiddle to demonstrate. As far as I can tell (lazily just testing with Chrome), the form will submit on "Enter" if there's only one text field, or if there's a submit button, even if it's hidden.

(EDIT: I later found that it also does seem work if there are other input fields which are not a regular, single-line text input ... e.g., textareas, selects, etc. -- thanks to @user3292788 for that information. Updated the JSFiddle to reflect this).

<h2>Form with one text field only, no submit button</h2> <p>Seems to submit automatically when pressing 'enter' in the first text field</p> <form action="" method="post">   <div>     <label for="pt-search-input">Search</label>     <div>       <input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>   </div> </form>  <h2>Form with two text fields, no submit button</h2> <p>Won't submit when pressing 'enter' in the forms ...</p> <form action="" method="post">   <div>     <label for="pt-search-input">Search</label>     <div>       <input name="term" type="text" placeholder="Example: budapest amsterdam" />       <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>   </div> </form>    <h2>Form with two text fields and a submit button ...</h2> <p>Now it submits with 'enter' key</p> <form action="" method="post">   <div>     <label for="pt-search-input">Search</label>     <div>       <input name="term" type="text" placeholder="Example: budapest amsterdam" />       <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>       <input type="submit" />     </div>   </div> </form>  <h2>Form with two text fields and a HIDDEN submit button ...</h2> <p>Seems to work, even with submit hidden ...</p> <form action="" method="post">   <div>     <label for="pt-search-input">Search</label>     <div>       <input name="term" type="text" placeholder="Example: budapest amsterdam" />       <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>       <input type="submit" />     </div>   </div> </form>   <h2>Form with no action or method attribute, HIDDEN submit button ...</h2> <p>Even this seems to work.</p> <form>   <div>     <label for="search-input">Search</label>     <div>       <input name="term" type="text" placeholder="Example: budapest amsterdam" />       <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>       <input type="submit" />     </div>   </div> </form>  <h2>Form with multiple fields, but only one text input, no submit button.</h2> <p>This seems to work as well.</p> <form action="" method="post">    <p><input type="text" ></p>    <textarea name="" id="" cols="30" rows="10"></textarea>    <p>     <select name="" id="">       <option value="">Value</option>     </select>    </p> </form> 
like image 116
Aaron Wallentine Avatar answered Sep 19 '22 15:09

Aaron Wallentine


You have two choices:

  1. Create an event handler for the enter button and add it to your bindings.
  2. Use an <input type=submit> in the form somewhere, which is what gets the automatic Enter Key behavior you're after.
like image 45
g.d.d.c Avatar answered Sep 21 '22 15:09

g.d.d.c