Develop Reference

Submit form only when submit button clicked and prevent "Enter" submitting form

I want to stop a user submitting a form upon clicking enter.
This works for that
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
However I have other buttons on the page that when I tab to and click enter to avail of their functionality, this is blocked via this function.
The button sits as so:
<input type='button' tabindex="29" value='Add Additional Drug' id='addButton'>
And I only want to submit the form when enter pressed while my submit button is selected.
<input type="submit" name="submit" value="Submit" tabindex="40" class="submit"/>
How would I do this?
EDIT
I see the answer in the attached Stackoverflow but he allow people to press Enter if they have completed all the fields:
I don't want a user to press Enter unless they have a button selected(i.e. Can't press Enter, tab to button, can press enter, which will trigger the button to do its functionality and not submit the form.
The form works on a Tabbing basis, so a user will tab over all the fields.

Binding the keydown event to the whole document will affect all inputs and forms on the page, you may have several ones in your page so it will mess up the whole page logic.
You can bind it to a specific form instead:
$("#myForm input").not("#addButton").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
Demo:
$("#myForm input").not("#addButton").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
form input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="myForm">
<input type="text" name="input1" />
<input type="text" name="input2" />
<input type="text" name="input3" />
<input type="submit" name="submit" value="Submit" tabindex="3" class="submit" />
</form>
Note:
I used #myForm as test id here to target a specific form in the
page, you just need to use your form id.
Using jQuery .not() method in .not("#addButton") won't affect the button with id="addButton".

First, keep in mind that what you are attempting breaks UI accessibility standards.
Bearing this in mind, you'll need to stop using a true "submit" button and use a regular button that impersonates the submit button.
Next, you'll need to manually trigger the click events for all non-submit button buttons via code.
Here's a working example. See the comments for details:
$(document).ready(function() {
$(window).on("keydown", function(event){
// Check to see if ENTER was pressed and the submit button was active or not
if(event.keyCode === 13 && event.target === document.getElementById("btnSubmit")) {
// It was, so submit the form
document.querySelector("form").submit();
} else if(event.keyCode === 13 && event.target !== document.getElementById("btnSubmit") ){
// ENTER was pressed, but not while the submit button was active
alert("Enter pressed on something other than submit button.");
// Cancel form's submit event
event.preventDefault();
// Invoke click event of target so that non-form submit behaviors will work
event.target.click();
// Tell JQuery to cancel the event
return false;
}
});
// Non-submit button event handling
$("#btnOther").on("click", function(){
alert("Other button clicked!");
});
// Set up your "regular" button to act as a "submit" button when it is clicked
$("#btnSubmit").on("click", function(){
// Submit the form
document.querySelector("form").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=# method=post>
<input name=test>
<input type=button id="btnOther" value="Other Button">
<input type=button id="btnSubmit" value=Submit>
</form>

jQuery toggle text change and hide elements

Trying to create a simple function where a user clicks a button, it shows a form and changes the text on the button. When they click it again, the form hides and button text changes back to what it was.
Here is what I have so far:
$('a.subscribe').click(function() {
var link = $(this);
$('.intro_cta form').toggle(function(){
if ($(this).is(':visible')) {
$('a.enter').css('display','none');
link.text('CLOSE');
} else {
link.text('SUBSCRIBE');
$('a.enter').css('display','block');
}
});
});
And the HTML markup:
SUBSCRIBE
<form class="subscribe_form">
<input type="text" placeholder="EMAIL"/>
<input type="submit" value="JOIN" />
</form>
ENTER
When the user clicks the SUBSCRIBE button, it should show the form and hide the ENTER BUTTON and change the text on the subscribe button to "CLOSE". The opposite should happen when the button is pressed again.
This does kind of work, however the toggle makes the form slide in - I just want it to show or hide.

you could use
.fadeToggle()
for show/hide without that slide effect.
See here for documentation

Check this simple code without toggle.
var check=false;
$("form").hide();
$("a.enter").hide();
$('a.subscribe').click(function() {
if(check==false){
check=true;
$(this).text('CLOSE');
$("form").show();
$("a.enter").show();
}else{
check=false;
$(this).text('SUBSCRIBE');
$("form").hide();
$("a.enter").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
SUBSCRIBE
<form class="subscribe_form">
<input type="text" placeholder="EMAIL"/>
<input type="submit" value="JOIN" />
</form>
ENTER

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>

"Enter" key calls a javascript function when textbox is active

I have a text box and a button
<div class="TextField Large">
<input type="text" name="q" id="SearchBox" />
</div>
<div style="height: 40px; text-align: right; position: absolute; top: 0px; right: 0px;">
<input type="button" value="Search" class="Button" onclick="Search()" />
</div>
Basically you enter a text in the textbox and when you click on the Search button a JavaScript function Search() is called.
How can I add the possibility that when the user enters a text and press "Enter" on the keyboard the Search is executed?

First: Add a form (this should have a server side fallback for whatever the JavaScript does).
Second: Change the button to a submit button.
Third: Move the JavaScript to the form's submit event instead of the button's client event.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function Search(){
alert("search!");
//search logic
return false;
}
</script>
</head>
<body>
<form onsubmit="return Search()">
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</body>
</html>
That's all

When your inputs are in a form enter should automatically submit the form,
otherwise:
$('your form').keyup(function(e) {
if(e.which == 13) $(this).submit();
});
I recommend you change your button to type="submit" though for that enter functionality to automatically work, then do your Search() code in a submit event handler
$('your form').submit(function() {
// your search code
}

$('#textbox').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert('You pressed a "enter" key in textbox');
}
});
Hopefully this will help you..

Associating input elements with certain buttons in a form?

http://jsfiddle.net/EGjc9/
I have several <button> elements on a page, and I need to associate the <input> elements nearest them to those buttons. Right now, when you hit ENTER on any input field, it fires the first <button> in the form. How do I change this?
DOM:
<form action="irrelevant">
<div>
<select><option>1</option><option>2</option><option>3</option></select>
<input type='text'/>
<button>Hello</button>
</div>
<div>
<select><option>1</option><option>2</option><option>3</option></select>
<input type='text'/>
<button>Hello</button>
</div>
<div>
<select><option>1</option><option>2</option><option>3</option></select>
<input type='text'/>
<button>Hello</button>
</div>
<div>
<select><option>1</option><option>2</option><option>3</option></select>
<input type='text'/>
<button>Hello</button>
</div>
</form>
DOM Ready:
$('button').click( function(){
$(this).siblings().filter('select').val('3');
return false;
});

You need to use KeyPress event to catch "Enter" key pressed and then push the button you want using javascript.
For example:
//some key is pressed
$('input').keypress( function(event){
//is this "Enter"?
if (event.keyCode == '13') {
//finding the button inside the same <div> and clicking on it
$(this).parent().find('button').click();
//we don't need a default action
event.preventDefault();
}
});

something like this:
$('input').bind('keypress', function(e){
if(e.which == 13) { //Enter keycode
$(this).next().click()
}
return false;
});
fiddle