Develop Reference

onclick event submits when button clicked but not when enter is pressed on keyboard?

I'm only using HTML and JavaScript.
I have one form
<form id="form1">
<input name="name" type="text" size="20">
</form>
And one button
<button onclick="outputname()" type="submit">Search</button>
So the idea is the user types a number on the form and clicks the search button and an action is performed (this works great).
However, if the user enters a number and hits the Enter button on keyboard the page is refreshed. The same happens on iPad. ("Return" button is displayed instead of "Go").
So I want the Enter button to work on keyboard and Go to work on iOS.
The idea is that the user enters a customer number and the relevant details are displayed.

Give an ID to both your input field and button, to be sure you trap the correct one:
HTML:
<form action="destination.html" method="post">
<input id="foo" name="name" type="text" size="20">
<button id="mybutt" onclick="outputname()" type="submit">Search</button>
</form>
Note that destination.html is where you want the data posted to. If you want it posted to the same file, just use: action="" or leave it out.
Javascript:
document.getElementById('foo').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
var btn = document.getElementById('mybutt');
mybutt.click();
return false;
}
}
Sources:
How to detect when the user presses Enter in an input field
Capturing the Enter key to cause a button click with javascript

Insert this:
action="post"
Inside your form tag. I.e., your form tag will have to be this way
<form id="form1" action="post">

In this case, you could manage the submit event, instead of key/click events.
<form id="form1" onsubmit="outputname()">
Submission events triggered by either a click or pressing enter will call outputname.

Avoid auto submit form after scanning thru barcode scanner

HTML
<form action="die_issue_process.php" id="form" method="post" autocomplete="off">
<input type="text" name="item_name[]" />
<input type="button" name="add_item" value="Add More" onClick="addMore();" />
<input type="submit" id="Search" name="Search" value="Search" />
Javascript code:
function addMore() {
$("<DIV>").load("input.php", function() {
$("#product").append($(this).html());
});
}
Friends in this form I have single text box and add button to add text box according to the need. Here in this form I'm giving input thru a BAR CODE reader so once the bar-code is scanned the form gets automatically submitted but my requirement is it should be submitted only after giving the submit button
Note: my form gets auto submitted on first scan of input box itself.

Well, a barcode scanner, reads the barcode and submits automatically!
So I think you better change your input with the type "submit" to a button
<input type="button" id="Search" name="Search" value="Search" />

You can consider a barcode scanner as a very specialised keyboard. If you test your barcode scanner whilst in a text editor. You will see they just very quickly enter the string that the barcode represents, followed by a carriage return.
These are indistinguishable from the keystrokes required to manually perform the same operation, using the keyboard.
If you are focused on a text field in a form, pressing enter will often submit the form.
To prevent the enter key from submitting a form on a text field, you can kill that keystroke with an event handler, for example:
(function() {
var textField = document.getElementById('textFieldId');
if(textField) {
textField.addEventListener('keydown', function(mozEvent) {
var event = window.event || mozEvent;
if(event.keyCode === 13) {
event.preventDefault();
}
});
}
})();

If the scanner is feeding to a textbox, start your form with your submit button hidden. Only visiable it once the textbox has data input. this can be done by javascript..

Prevent form submission on hitting Enter key for Text

I know this question has been asked before but I could not find a satisfactory answer for my situation. So I am asking again.
I have a simple form with 2 text boxes and a submit button. After the user enters text in either text box they should not be able to submit through the Enter key, only the submit button should allow them to submit. I thought trapping the enter keypress and returning false from the onChange event handler would do the trick but apparently not, this still causes a form submission...
function doNotSubmit(element) {
alert("I told you not to, why did you do it?");
return false;
}
</script>
<form id="myForm" action="MyBackEnd.aspx" method="post">
<table>
<tbody>
<tr>
<td>
Joe: <input id="JoeText" type="text" onChange="doNotSubmit(this)">
</td>
<td>
Schmoe: <input id="SchmoeText" type="text" onChange="doNotSubmit(this)" >
</td>
</tr>
</tbody>
</table>
<input type=submit>
I tested on both Chrome and FF (latest versions).
Can you please show me how to prevent the form submission?
Thanks.

to piggy back on #Dasein's anwser you want to prevent the default behavior instead of stopping propagation ( i.e. returning false):
document.getElementById("myForm").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
alert("I told you not to, why did you do it?");
e.preventDefault();
}
}
<form id="myForm" action="MyBackEnd.aspx" method="post">
<table>
<tbody>
<tr>
<td>
Joe: <input id="JoeText" type="text">
</td>
<td>
Schmoe: <input id="SchmoeText" type="text" >
</td>
</tr>
</tbody>
</table>
<input type=submit>

I think this should do:
document.getElementById("myInput").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
alert("I told you not to, why did you do it?");
return false;
}
}

If you include a submit button then the default form behavior is to submit on enter key. To prevent accidental submissions you could add a confirm dialog to the onsubmit event (form A). Another alternative is to replace the submit button with your own (form B). However, the user would then need to click the button to submit.
Run snippet to test
(Tested in Chrome, Firefox, and IE 5-11)
<html>
<body>
Form A: This form submits on enter key
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')">
<input type="text" >
<input type="text" >
<input type="submit">
</form>
<p>
Form B: This form submits only on button click<br>
<form action="hanlder.aspx" method="post" >
<input type="text" >
<input type="text" >
<input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()">
</form>
</body>
</html>

I am surprised no one has given a solution that achieves the desired effect of preventing accidental submission by hitting enter on a text field without also preventing intentional submission by hitting enter while the submit button has the focus.
To this end, I recommend:
function submitFunction(e)
{
if(document.activeElement!=document.getElementById('submit')) e.preventDefault();
}
The lazy solution, which works but often results in code that is less extensible or more work to maintain, is to put this in the onsubmit attribute of the <form> element. Often a better solution is to use addEventListener to add the function as a listener to the form element:
document.getElementById('myForm').addEventListener('submit', submitFunction);
Regardless of which method you choose to invoke the function, in your HTML make sure to give an ID to the submit button:
<input type="submit" id="submit" />
I prefer this solution because it allows the expected behavior of allowing the user to submit the form by tabbing through the form and then pressing enter when the submit button is highlighted, and it also allows clicking on the submit button, because that element will have the focus in both these cases, but it prevents accidental submission because the submit element will not have the focus in these cases.
This is an improvement for accessibility which can be important for disabled users, users using a text-only console browser, users without a mouse, and can still be marked improvement for users with a mouse that is unreliable or inconvenient. It happens more than you might realize. Plus, some users just like being able to navigate this way, so not breaking this behavior is an improvement in user experience.

How about below code snippet
<form method="POST">
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
</form>

For those using react:
<form
onSubmit={handleSubmit(onSubmit)}
onKeyDown={e => {
if (e.key === 'Enter') {
// Keeps form from submiting on hitting enter
e.preventDefault();
}
}}
>

How to disable form submit in my case

I am trying to disable the submit action when a user presses the Enter key.
Here is my HTML:
<form name="form1" class="form-horizontal"
onkeypress="return event.keyCode != 13;"
ng-submit="submitForm()">
<div class="form-group">
<div>Test here</div>
<textarea ng-model="message" rows="3"></textarea>
</div>
</div>
The onkeypress attribute will make the form NOT get submitted when user presses Enter; however, the user won't be able to have breakline in the textarea element. In other words, the user can only keep typing without break even if they hit Enter. Is there a way to fix this?
Thanks a lot!

Remove this: ng-submit="submitForm()" Add a button to the form to do the submission through ng-click="submitForm(). All forms should have a button to submit with, so that should take care of your issue. Use type="button".

$("form").submit(function(e) {
e.preventDefault();
});
Since you're using Angular:
$(document).on("submit", "form", function(e) {
e.preventDefault();
});

Submit not triggered on enter the text box after filling the value. in IE

I have a form, In this form there is only one text field. after the field is filled user pressing enter key. but the form is not submit in ie8 how to fix this.
But it works fine with chrome and firefox.
example code :
<form>
<label><input type="text" /></label>
<input value="Enter after adding value" type="submit">
</form>
how to make ie to work on enter key pressed.
thanks in advance!

Some browsers by default allow the enter key to submit a form, others do not.
You can work around this by adding an event handler that will submit the form on enter key. Try something like
$("input").keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$("form").submit();
}
});
If you have multiple forms on the page, then ensure you add an id attribute and update the above code accordingly.

There you go
<form id="myForm">
<label><input type="text" /></label>
<input value="Enter after adding value" type="submit" id="name">
</form>
<script type="text/javascript">
$(document).ready(function()
{
$("#name").keypress(function(e)
{
if(e.which==13){
document.getElementById("myForm").submit();
}
});
});
I hope that I could help