Menu
I'm using PHP to pass a login form when required, and here is the code:
$htmlForm = '<form id="frmlogin">'.'<label>';
switch(LOGIN_METHOD)
{
case 'both':
$htmlForm .= $ACL_LANG['USERNAME'].'/'.$ACL_LANG['EMAIL'];
break;
case 'email':
$htmlForm .= $ACL_LANG['EMAIL'];
break;
default:
$htmlForm .= $ACL_LANG['USERNAME'];
break;
}
$htmlForm .= ':</label>'.
'<input type="text" name="u" id="u" class="textfield" />'.
'<label>'.$ACL_LANG['PASSWORD'].'</label>'.
'<input type="password" name="p" id="p" class="textfield" />'.
'<center><input type="submit" name="btn" id="btn" class="buttonfield" value="Sign in to extranet" /></center>'.
'</form>';
return $htmlForm;
The problem is, is that when the user hits enter in IE8, the form does not submit, and the user is forced to hit the submit button.
How do I rectify this?
833
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. Explanation: We use the jQuery event.
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.
addEventListener("submit",function(e){e. preventDefault(); return false;}); This solution will now prevent the user from submit using the enter Key and will not reload the page, or take you to the top of the page, if your form is somewhere below.
Also watch out for this fun fun bug:
I've learned the hard way that if your form is display:none at page load, even if you show it later with Javascript, IE8 still won't submit on enter.
However, if it's not hidden at page load, and you set it to display:none after, like onDOMReady, then it works! WTF
More details and workaround here: http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
