Can anyone explain this behavior? Pressing the Enter key in an HTML form's text box submits the form when the form contains a single text box, but not when the form contains two or more text boxes.
jsFiddle (one input): http://jsfiddle.net/gpPTa/
jsFiddle (two inputs): http://jsfiddle.net/fDbJt/
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.
HTML form submit on Enter Key | Example code You don't need to use JavaScript to do submit button or input on entering key pressed. Just need to mark it up with type="submit" , and the other buttons mark them with type="button" .
Let's learn the steps of performing multiple actions with multiple buttons in a single HTML form: Create a form with method 'post' and set the value of the action attribute to a default URL where you want to send the form data. Create the input fields inside the as per your concern. Create a button with type submit.
$(document). on('keyup keypress', 'form input[type="text"]', function(e) { if(e. keyCode == 13) { e. preventDefault(); return false; } });
Unfortunately it's a default for the form to submit on enter with only one input.
You can either give each of them an javascript command that submits the form, or place a submit button with width: 0 and/or visibility: none. For example:
<form>
<input style='width:0; visibility:hidden' type='submit'>
<input>
<input>
</form>
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