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.
Related
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 .
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)
I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?
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/
I have a form on an HTML page with multiple submit buttons that perform different actions. However, when the user is typing a value into a text input and hit enters, the browsers generally act as though the next submit button sequentially was activated. I want a particular action to occur, so one solution I found was to put in invisible submit buttons into the HTML directly after the text inputs in question, like this:
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
This works like a charm in most browsers, except that it doesn't in webkit browsers like Safari and Chrome. For some reason they skip over the invisible submit button. I've been trying to figure out how to intercept the enter key press and activate the proper submission using Javascript, but I haven't been able to get it to work. Intercepting the keydown and setting focus on the proper submit does not work.
Is there any way using Javascript or otherwise to select which submit button will be used when the user hits the enter key in a text input on an HTML form?
Edit: To clarify, the form can't require Javascript to "work" fundamentally. I don't care if the enter key submission is undesireable without Javascript on webkit browsers, but I can't remove or change the order of the submit buttons.
This is what I tried, it doesn't change the submission behavior in webkit browsers.
What worked is to change the focus() in the following code to click().
document.onkeypress = processKey;
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click(); // previously: focus()
}
}
EDIT: FINAL SOLUTION:
Works with every browser and only intercepts the enter key when needed:
HTML:
<input type="text" name="something" value="blah"
onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
Javascript:
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click();
return false;
}
}
One way would be to remove all of the submit buttons and use input buttons to submit the form programatically. This would remove the ability to submit the form by hitting the enter key in a textbox. You could also leave one submit button as the default submit functionality, and use regular button inputs for the others and submit the form programatically.
The obvious short-fall of this is that the users would require JavaScript to be enabled. If this isn't a problem this is a consideration for you.
EDIT:
Here, I tried to make an example for you using jQuery (the same functionality can easily be created without jQuery)... let me know if this helps...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#f input").filter(":text").keydown( function(event) {
if (event.keyCode==13) {
$(this).nextAll().eq(0).click();
}
});
});
//--></script>
</head>
<body>
<form name="f" id="f">
<input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
<input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
<input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
</form>
</body>
</html>
The invisible default submit action is a reasonable approach and doesn't drag JavaScript into the equation. However form elements with 'display: none' aren't generally reliable. I tend to use an absolutely-positioned submit button before the others on the page, positioned off the left-hand-side of the page. It's still pretty ugly, but gets the job done.
How about using CSS? You can just set the first button, your default button outside of the visible area of the screen with a "position: absolute; left: -200px; top: -200px;". As far as I remeber, it will not be ignored by any browser, because it is not invisible. This works just fine:
<form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>
And the earth gets saved ...
Just control the key press event. put onKeyPress in the body tag
onkeypress=CheckKeyPress()
Then handle the enter key
function CheckKeyPress(){
var code;
if(!e) var e = window.event;
if(e.keyCode){
code = e.keyCode;
}else if(e.which){
code = e.which;
}
if(code == 13){
//Do Something
}
}
Don't intercept the keydown event, intercept the submit event.
so:
form.onsubmit = function(e){
// Do stuff. Change the form's action or method maybe.
return true;
}
What about using separate forms? Maybe I'm missing something which makes this impossible :P