Develop Reference

Javascript how to make enter key submit a form [duplicate]

I'm not sure what I am doing wrong here. I want the enter key to work as well as clicking the button.
<form action="" method="get" class="priceOptionForm" name="priceOptionForm">
<input name="paypal_email" type="text" value="whatever" id="email"></label>
Save all
</form>

Try this:
document.getElementById('email').onkeydown = function(e){
if(e.keyCode == 13){
// submit
}
};

Please use below code snippet...It should be added into script block
<script>
document.onkeydown=function(evt){
var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
if(keyCode == 13)
{
//your function call here
}
}
</script>

All below codes should be added into script block or file.
define submit function:
function submitForm(){
document.priceOptionForm.submit();
document.priceOptionForm.method='post';
}
For the enter key to submit form:
document.onkeydown=function(){
if(window.event.keyCode=='13'){
submitForm();
}
}
For the link to work:
document.getElementById("profile_price").onclick=submitForm;
You can refer to http://jsfiddle.net/honglonglong/YMX2q/ for some trying.

Use an <input type="submit"> instead of a link. Then the enter key will work automatically.

simply make a hidden button like this
HTML
<input type="submit" id="submitbtn" />
CSS
#submitbtn{display:none;}
when the user will hit the enter button the form will be submitted
Don't forget to put the type="submit"

// Process form if use enter key. put script in head.
document.onkeyup = enter;
function enter(e) {if (e.which == 13) submitForm();}
// uses keyup not down as better practice imo
// submitForm() is user function that posts the form

You Can Put a Default Button ID in form tag is automatically trigger
<form id="form1" runat="server" defaultbutton="Button1">
<asp:Button ID="Button1" runat="server" Text="Button"
OnClick = "Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button"
OnClick = "Button2_Click" />
<asp:Button ID="Button3" runat="server" Text="Button"
OnClick = "Button3_Click" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>

Oh that is because the HTML form element does not recognize the link as a button, to click..
you need to replace it with a button...
<input type="submit" value="this will display on your button" onClick="javascript:void(0)">
but if you want it to look like a link you should do this in the css
<style type="text/css">
input{background-color:white;border:0 none;}
</style>

The submit event fires when the user clicks a submit button ( or ) or presses Enter while editing a field (e.g. ) in a form. The event is not sent to the form when calling the form.submit() method directly.
check documentation

Javascript is not submitting on enter key pressed, it just clears the textbox

I have the following code:
<form style="position: absolute; bottom: 5px; padding-bottom: 10px;height: 10%;" id="newmessageForm">
<textarea name="message" placeholder="Type your message here" rows="9" cols="225" id="newmessage" resize="none" style="float: left; opacity: 0.7;"></textarea>
<input class="btn-login" type="Submit" name="send" style="float: left">
</form>
<script>
var chatInput = document.getElementById('newmessage');
var chatForm = document.getElementById('newmessageForm');
chatInput.onkeypress = function(e) {
if (e.charCode == 13) {
e.preventDefault();
chatForm.submit();
}
};
</script>
and instead of sending the message on enter key pressed, it just clears the textbox, can someone please help?

Where is this submitting to? There is no action attribute in the form element. You will need both the method and action attributes in order for the submit to work.

Your form doesn't do anything, it is submitting but the form does not do anything, add an action="" and method="" for it to show the submit.

You don't need to listen for the enter keypress, instead listen for the form submit event and prevent the default action.
var chatForm = document.getElementById('newmessageForm');
chatForm.addEventListener('submit', function(e) {
e.preventDefault();
});

Enter key doesn't activate button

I have a form with one field that the user needs to type into, and a button underneath that when clicked, does some jQuery and hides the login-form. But when I hit enter after typing something in, the page refreshes...
There's part of me that thinks it doesn't need to be an <input> or a <form>
I don't actually need to post anything. I have tried changing the input to a <button> which completely ruins my styling and still doesn't work. What's the best way of getting round this?
<div class="login-page">
<div class="form">
<form class="login-form" method="POST">
<!-- user inputs -->
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<!-- your submit button -->
<input class="login" type="button" id="submit" value="login">
</div>

True, Adam. If the form does not contain the type submit button, a keypress event has to be added manually. Otherwise Enter will act as the Accept Button on the form.

You need to attach keypress event to the form or at least the field. For convenience, you also need to combine the callback functions into one.
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
// submit the form.
}
});
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
console.log('Submitting form');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="login-form" method="POST">
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<input class="login" type="button" id="submit" value="login">
</form>

If the enter key is pressed when focused to an input field inside a form that has a submit button, the default browser behaviour is to fire a submit event on that form. You can prevent this happening by either:
return false;
or
e.preventDefault();
Full code:
$('.login-form').on('submit', function() {
return false;
});
Fiddle: https://jsfiddle.net/nc1e2gm6/
Bear in mind that if you go down the route of using e.preventDefault(); instead or return false;, you need to pass the e variable from the function call, like:
$('.login-form').on('submit', function(e) { ...

Don't think i explained it very well but i have fixed it, the enter key now activates the submit button rather than refresh the page.
$("form").submit(function() { return false; });
$(document).ready(function(){
$('#username').keypress(function(e){
if(e.keyCode==13)
$('#submit').click();
});
});

Controlling ENTER key

How can we make a form in a page doesn't submit on pressing Enter — rather. it does the same work as pressing a particular button or icon or image?
Here are the contents of my form:
<input type="text" id="txt" /><input type="button" value="search"
onclick="searchresult()" />
The problem is that if I press Enter, the form submits and text field clears itself but the function searchresult() doesn't show its effect. When only pressing the button, it works well.

HTML
<input type="text" id="txt"/>
<input type="button" value="search"/>
jQuery
$('input[type=text]').on('keyup', function(e) {
if(e.which == 13) { // 13 is keycode for enter
e.preventDefault();
}
})
You can also bind to submit() like following
$('form').submit(function(e) { // instead of only `form`,
// use with `id` or `class` combination
if(e.which == 13) {
e.preventDefault();
}
});
Remainder
Don't forget to place you code within
$(document).ready(function() {
// your code
});
in short
$(function() {
// your code
});

Alternatively, instead of disabling the enter key, you might be able to bind to the onsubmit event to perform any processing prior to submitting the form. From the MDN documentation:
The submit event is raised when the user clicks a submit button in a form ().

Try:
$('form').submit(function(event){
if(!$(':focus',this).is(':button'))
event.preventDefault();
});
This attaches to the form itself. If it was submitted any way other that clicking the submit button it halts the submission process. For better performance narrow down the 'form' selector.

Try this:
form
<form id="myForm">
<input type="text" id="txt" />
<input type="submit" value="search" />
</form>
js
<script>
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
searchresult();
});
});
</script>

How to capture the keyboard "Return" event on iPhone browser?

Is there a way to capture the event in jquery/javascript when a user hits the "Return" key in the iphone browser keyboard? I'm trying to either hide the keyboard on the press or activate some function.

You could try this:
<script type="text/javascript">
document.onkeyup=function(e) {
if(e.which == 13){
$('inputID').blur();
//rest of function
return false;
}
}
</script>
Are you using a library?
Update
Depending on the application, an input submit would hide the keyboard and trigger a function:
<form id="searchForm" OnSubmit="doSearch(this.searchTerm.value); return false;">
<input type="search" name="searchTerm" autocorrect = "off" />
<input type="submit" value="Search" class="hidden" />
</form>
You could even hide the input button with CSS: .hidden {display: none;}

This is what hides the keyboard:
$('#inputID').blur();