We Keep Coding

Submitting a form on 'Enter' with jQuery only fires ONCE

I've been racking my brain on this for a couple days. I've looked thru many different solutions, but I can't figure this out.
I have a simple form in a PHP page with a text box and search button that once the search is performed, the entered text is highlighted on the document.
PROBLEM: After entering a search term in the text box and CLICKing search, all is well. However, when I PRESS enter to search, it only fires ONCE. Clicking search will continue to work with no issues.
What am I doing wrong here?
$('document').ready(function() {
$('#button').click(function() {
var search = $('#text-search').val();
});
$('#text-search').keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) { //Enter key pressed
$('#button').on(); //Trigger search button click event
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search" class="Column">
<input name="text-search" id="text-search" type="text" size="20" maxlength="30" placeholder="search & highlight">
<input name="searchit" id="button" type="button" value="Search" onClick="highlight()">
</div>
HTML:

You're doing it a bit wrong and you're putting too much overhead to your code. You can achieve the same without all these keypress events. The submit event will suffice and it works flawlessly with Enter as well! However, you need to wrap your inputs with form element and change input type from button to submit:
var searchbox = document.querySelector('#text-search')
var searchForm = document.querySelector('#search')
searchForm.addEventListener('submit', function(e) {
e.preventDefault()
highlight(searchbox.value)
searchForm.reset()
})
function highlight(value) {
// do something with your value
alert(value)
}
<form id="search" class="Column">
<input name="text-search" id="text-search" type="text" size="20" maxlength="30" placeholder="search & highlight" />
<input name="searchit" id="button" type="submit" value="Search" />
</form>
Always try to use form element if you are getting user input. This gives you better control over input fields. Also it's semantically better than lonely inputs here and there.
Try to avoid inline javascript in your HTML. It's just a bad practice.

How to make form submit different button when I press enter on different text input?

For example, I have this form:
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price"/>
<input type="text" name="ZipCode"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping"/>
<input type="text" name="Offercode"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount"/>
<input type="submit" name="CheckOut"/>
</form>
I need that if the user press enter on Productqty1, Productqty2, or Productqty3, then the default action is suppressed, and button RecalculatePrice is clicked instead.
And the same goes with if user press enter on ZipCode, the RecalculateShipping button gets clicked instead. The same with Offercode input and RecalculateOffercode button.
But if the user press on CheckOut button, the whole form must be still submitted. That's why they're on the same form, multiple submit button on the same form.
I also need to suppress the default action of enter key, because IE8 did not sent button submit value along with the form submit, so let's disable it altogether to avoid confusion.
How can I find a unified solution for this? It's okay if it has to be made in multiple javascript function, just as long as I can understand the solution pattern, because form with multiple submit button and user can press enter on any input field is confusing me. JQuery solutions are welcomed. Thanks.
EDIT: sorry for the poor choice of words that lead to confusion. What I mean with suppress default action is that when you press enter, the form get submitted, using any (random?) button submit. That is the default behavior I want to suppress.

I have added classes and id for each submit button(added id) and text box(added class).
Try this
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1" class="class1"/>
<input type="text" name="Productqty2" class="class1"/>
<input type="text" name="Productqty3" class="class1"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price" id="class1"/>
<input type="text" name="ZipCode" class="class2"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping" id="class2"/>
<br><br>
<input type="text" name="Offercode" class="class3"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount" id="class3"/>
<input type="submit" name="CheckOut"/>
</form>
Script
$(document).ready(function () {
$(".class1").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class1').click();
}
});
$(".class2").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class2').click();
}
});
$(".class3").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class3').click();
}
});
});
Fiddle Demo

I would argue that CheckOut is your special scenario here. While you could certainly catch the enter key and invoke different actions, there are primarily two reasons why I don't find that to be the optimal solution here:
Your IE8 concern seems to negate the entire prior discussion, and in my mind, this should advise you to look in another direction. Don't do a special solution for IE8, do something that all supported browsers can understand.
There is no field for which CheckOut should be the default action on enter.
I suggest that you make different forms, and use different actions, rather than checking which button was clicked by inspecting the name parameter of the button.
On click of the CheckOut-button, which should never be triggered by an enter key, you should submit all forms. You can serialize their combined values and post them like so:
$('#product-form, #zip-form, #offer-form').serialize();

You can use jquery/javascript function to change the form.action before submitting the page.
Submit type should submit the form to default form action, which has been added on form declaration.
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="button" name="RecalculatePrice" value="Recalculate Price"/ onClick="callDefault();">
<input type="text" name="ZipCode"/>
<input type="button" name="RecalculateShipping" value="Recalculate Shipping"/ onClick="callRecalculateShipping();">
<input type="text" name="Offercode"/>
<input type="button" name="RecalculateDisc" value="Recalculate Discount"/ onClick="callRecalculateDisc();">
<input type="button" name="CheckOut"/ onClick="callCheckout();">
</form>
<javascript>
function callCheckout(){
form.action="<some value>";
form.submit();
}
...so on with other functions...
</javascript>
Change input types to button .

stopping form submit with prototype.js

There seems to be a issue or my lack of knowledge how to stop the form to be submitted with prototypejs. Maybe someone can help me with the issue I'm facing
consider this simple form
<form id="formContact" method="post">
<p>Name:
<br />
<input type="text" id="name" name="yourName" size="20" />
</p>
<p>E-mail:
<br />
<input type="e-mail" name="yourEmail" size="20" />
</p>
<p>Message:
<br />
<textarea cols="20" rows="10" name="yourMessage"></textarea>
</p>
<p>
<input type="submit" value="Submit this form" name="submitButton" />
</p>
</form>
and this little js snippet from protoype manual http://prototypejs.org/doc/latest/dom/Event/stop/
Event.observe('formContact', 'submit', function (event) {
var login = $F('name').strip();
if ('' == login) {
Event.stop(event);
// Display the issue one way or another
}
});
$('formContact').submit();
all this in fiddle : http://jsfiddle.net/C3eFu/2/
now the issue here is it stops the form perfectly if button is clicked but not when form is submitted with javascript.?
is this the 1% where prototype fails to stop the event?

According to a lot of Googleing apparently the onsubmit event is not fired on the form when the .submit() method is called. This is not a lack of PrototypeJS but more a behavior that has not been fixed in Javascript.
You can make your code behave the way you want it to happen by calling the onsubmit handler and then watching if the event is stopped and then decide to fire the submit method()

The easy way is to change type="submit" to type="button" then capture the click event of the button instead, or you can capture the submit event:
function stopDefAction(evt) {
evt = evt || event;
if (evt.preventDefault) {
evt.preventDefault();
}
else {
evt.returnValue = false;
}
}
See: Stop Event in IE 9 (without upgrading to Prototype 1.7)

How can I disable the normal submit on enter behavior on a text input and replace it with a function of my own?

I've tried quite some fixes i found on stackoverflow and elsewhere but I couldn't get any of them to work properly. They either disable the enter key everywhere or just don't work at all (or they're not properly explained).
I need the normal submit on enter key behavior to work on all the other elements except this one text input and for it to be replaced with my own function when the text input is selected.

How to get whether the Enter is pressed?
$('input.the-one-text-input').keydown(function(e) {
if(e.keyCode == 13) { // enter key was pressed
// run own code
return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
}
});
Also note this comment on that page:
** If anyone has reached this from Google (like I did), know that "keyup" instead of "keypress" works in Firefox, IE, and Chrome. "keypress" apparently only works in Firefox.
Which isn't 100% correct anymore, since it also works works in Chrome. However it wouldn't surprise me if it still doesn't work in IE.

http://jsfiddle.net/yzfm9/9/
Basically check which input is focused and do custom stuff depending on it
HTML
<form id="nya">
username <input type="text" id="input_username" /><br/>
email <input type="text" id="input_email" /><br/>
hobby <input type="text" id="input_hobby" /><br/>
<input type="submit" />
</form>
JS
$('#nya').submit(function() {
var focusedId = ($("*:focus").attr("id"));
if(focusedId == 'input_email') {
// do your custom stuff here
return false;
}
});

Returning false when enter is pressed on "onkeydown" will disable the default behaviour. Then you can just call your function on the "onkeyup" event.
<input type="text"
onkeyup="myFunction()"
onkeydown="return event.keyCode != 13;"/>

Just had a play with jQuery's .keypress() method and it looks like it does the job.
HTML
<form method="post" action="">
<input type="text" name="submit1" id="submit1" />
<input type="text" name="noSubmit1" id="noSubmit1" />
<input type="text" name="submit2" id="submit2" />
<input type="submit" />
</form>​
JQuery
​$('#noSubmit1​​​​​​​​​​​​​​​').keypress(function(event) {
if (event.which == 13 ) {
event.preventDefault();
}
});​​
It basically adds a keypress event to the correct input field, then checks for which key was pressed. If it was the enter button (13), it then prevents the default action (form submission) from happening. See it in action here: http://jsfiddle.net/cchana/UrHz7/2/

IE8 - Enter key won't submit my search field

Hey guys, I have a search field that is not submitting when the enter key is hit, this issue is only happening on IE8, every other browser is working just fine (even IE6). Please guys I need a hand with his, find below the code I have for it.
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</div>
Ok I forgot to mention this form is in a ASP coded page, that's why it is not wrapped inside the form element.

You need to put some <form></form> tags around the textbox and button. Like so
<form method='POST' onsubmit='javascript:goSearch();return false;'>
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="button" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</form>
Another way would be to use the keydown event on the textbox and check whether it was the enter key.
Hope this helps.

I have found there to be a bug in IE8 and sometimes a form won't submit on enter key.
The best way would be to set an event to handle enter being pressed.
In jQuery you would do:
$("input_box_id").keydown(function(e){
if (e.keyCode == 13) //enter
{
$("btn-submit").click();
}
});
In JavaScript it would be:
document.getElementById("input_box_id").onclick = function(e){
var keycode =(window.event) ? event.keyCode : e.keyCode;
if (keycode == 13) //enter
{
document.getElementById("input_box_id").click();
}
};
And change Html to:
<form action="url_here" method="post">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" id="btn-submit" name="btn-submit" class="btn-go" />
</div>
</form>
Ignore the form tags if you've already got a Asp.net form.

Another way, instead of the onclick on the submit button, would be to do this.
<form action="script.php" method="post" onsubmit="goSearch();return false">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" />
</div>
</form>
Edit: Added action and method attributes. The action attribute is required for validation.

Would it be anything to do with the fact you have an onclick event with a function call to GoSearch and a return false attached to a 'submit' input type?
Can you past the contents of the goSearch() function?

What happens if you remove the "return false;" from the event handler for the submit?
When a user hits ENTER in a text input field, IE behaves as if the submit button had been used but the "false" prevents the event bubbling.
EDIT: with new ASP information.
See this: http://mikepope.com/blog/AddComment.aspx?blogid=309 He has an explanation of how it works so no details here, except to say that all you need to do is add the following to your page_load event:
Page.RegisterHiddenField("__EVENTTARGET", "MyDefaultButton");

Old ticket, but I'd like to chime in: IE8 does the following peculiar thing: the Enter key will submit the form, but any
<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />
won't be sent in the POST.
IE9 changes the behavior and sends the value. Chrome has always sent the value, as far as my tests have shown.
There are a ton of "Enter not submitting in IE8" complaints out there, and I feel lots of them can be contributed to this behavior. I hope this helps some of them.