having a problem with the number one browser for downloading another browser...IE
IE8 fails to submit when you hit enter in a form. here is what i use:
function submitOnEnter() {
if (browserName=="Microsoft Internet Explorer")
{
var key;
if (window.event){
key = window.event.keyCode; //IE
}
if(key == 13){
document.forms['myform'].submit();
}
}
}
and this is located on the text input :
onkeyup="submitOnEnter()"
The form seems to submit when i press enter twice?? but not once.
Can you help?
Okay guys, i fixed it using....
<!-- Fix for IE bug (One text input and submit, disables submit on pressing "Enter") -->
<div style="display:none">
<input type="text" name="hiddenText"/>
</div>
Weird eh? Maybe this will work for some of you and not others. some solutions didnt work for me, this one did.
Submit works when pressing ENTER when there is a submit button present in the form <input type="submit">. You can hide the button if you want. No need to intercept keystrokes.
My problem was that i checked for the submit button. But IE seems not to send the submits in the $_POST array. Adding a hidden field solved my problem.
Related
I have the following code on my page:
$('form.enter-doesnt-submit').submit(function () {
console.log($(document.activeElement));
if($(document.activeElement).attr('type') == 'submit') {
console.log
return true;
} else {
console.log("Prevented enter from submitting the form.");
return false;
}
});
Which I'm fairly certain I got from stackoverflow a long time ago. It works fine, just not in Safari. The reason being that when I log out document.activeElement it gives me the entire page, so of course the attribute type is not submit and therefore the form doesnt submit even when you are clicking the submit button.
I need to be able to prevent enter submitting on my form because they are online tests, and if the user is writing an answer and accidentally presses enter before the form is complete then they are marked incorrectly as they didn't actually finish the test.
Can anyone help me with some way of preventing enter from being pressed on Safari?
Okay I solved this by coming at it in another way, by targeting the inputs in the form instead:
$('form.enter-doesnt-submit input[type=text]').keypress(function (e) {
if(e.keyCode == 13) {
e.preventDefault()
}
});
Pressing enter in a textarea doesnt submit a form by default, so its just the inputs that need preventing. Now my submit button works in safari and in chrome.
I have a html form with no submit button. I want to submit that form upon hitting ENTER button. I used a simple jquery code to submit the form upon hitting ENTER.
$("form :input").keypress(function(e)
{
if(e.keyCode == 13)
{
$(this).parents('form').submit();
}
});
But there is a problem with this code. When i type in text field and want to select a suggestion (these are the suggestions, suggested by browser based on the history for that field) for that field using "ENTER" key it trigger the submit of the current form. I want to skip this as well.
Is there something like in jquery or javascript
$("form :input").keypress(function(e)
{
if(e.keyCode == 13)
{
if(! $(this).is('suggestOpened')) // i want something like this
{
// submit the form
}
}
});
Thanks in advance.
No, there's no such event. You could play with onchange and onblur events to intercept whether the user is filling a particular field, but anyway without a submit button:
There's no way for the user to figure-out how to submit the form
The same action (enter key press) could lead to two different actions, which breaks UI consistency
IMHO you should definitely place a submit button.
I am handling ajax suggestions using keyboard and mouse, it is capturing every keyevent except enter key(13). What I want is to get the "selected suggestion value" into the text box. For this I am handling keyevent = 13. Now the problem is when I am pressing enter key, my form get submitted instead of going into the "if block" where I am checking (keyevent = 13).
I am using struts <html:submit> tag to submit my form. I guess, the browser automatically set the focus into first <html:submit> tag that comes in its place. How to defocus this? I tried setting focus at other fields but trick doesn't work.
The other way is, I can use simple <html:button> and can get the things working, but the system already using <html:submit>. So, getting approval and modification is quite hectic.
Code for submit button:
<html:submit styleClass="btn" property="method.saveVisaRequestForRMG" onclick="bCancel=false" styleId="submitBtn">
and code for event handling:
// Handle ENTER key
case 13: handleSelectedItem(obj, container, cur);
ev.cancelBubble = true;
break;
How to come out of this problem? Please suggest me.
If you use jquery there is a simple way to handle enter press events:
$(window).keypress(function(e) {
if(e.keyCode == 13) {
e.preventDefault();
alert('Enter!');
}
});
After you prevented the default event you can do whatever you want for example posting the data into the server, saying hello or whatever :)
Try to return false; to cancel the event handling of the submit?
Do you have something like:
onsubmit="return formValidator()"
I have a search textbox in the web page. When the user presses enter key after entering text in that textbox then the search function should get executed. How to do this?
Check the onkeypress event of this and look for the keycode 13. Once keycode 13 is hit fire a click of a hidden button and do programming on the back end of the event of that hidden button.
If there's only one input field in a form, then the form will submit when you press enter even if there's no 'Submit' button.
eg
<form action="/search">
<input type="text" value="search text">
</form>
will submit when enter is pressed.
If that is the only textfield in your form, then pressing enter causes the onsubmit handler to run. But that will submit the entire page. If you want to perform an ajax command onsubmit and not refresh the whole page, then make sure your onsubmit handler returns false.
To do a regular full page form submit when enter is pressed:
<form action="/doit">
<input type="text" value=""/>
</form>
To do an ajax form submit when enter is pressed, something like this jquery code could be used:
$("form").submit(function() {
$.ajax(...);
return false;
});
basically u can do it like this:
i like to use jquery for most javascript stuff for cross browsers compatibility.
$("#btnID").keypress(function(event){
//filter enter key only
if(event.keyCode == 13){
//do something here
}
return true;
});
I have implemented this functionality very easily! I have a search textbox and a button with style ="display:none". These controls are surrounded by an ASP panel, I have set DefaultButton property of the panel as the button's ID. Now on entering text and pressing enter key the search functionality present in the button click event gets executed and also the button is also not visible to the user's!!!
I have a form in a jQuery enabled site. The form does not feature an <input type="submit"> button. For that reason, it's not submitted when you hit enter. What's the recommended way to emulate such behaviour?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
$(function(){
$("form input:first").focus();
});
//--></script>
</head>
<body>
<form action="" method="post">
<input type="text" name="user">
<input type="password" name="pass">
</form>
</body>
</html>
Update
I'm just trying to add a quick simple improvement to an existing form. I fully understand all the concerns about accessibility but the app itself needs JavaScript and will not run at all without it. A fallback to submit the form would be of little use.
Put a submit button in the form, and make it invisible using JavaScript. This fulfils 2 purposes:
The enter button will work because there is a submit button present
Non-javascript users will be able to use your form
I would capture the keypress event of the input elements, watch for a keycode of 13 (enter) and call submit. Like so:
$("form input").keypress(function(ev){
if (ev.keyCode == 13) {
$("form")[0].submit();
}
});
This code is untested.
Why not just feature a button that is hidden using CSS, or even better JS: in that case the form will remain accessible to people that have JS disabled, and you should get your enter automatically
Use the jquery form plugin.
http://malsup.com/jquery/form/
Recommended? I'm not sure it's recommended to emulate this behaviour at all!
Whilst you can mess around with trying to detect keypress for Enter, there are some subtle browser differences about how Enter presses are supposed to work which won't be quite the same as what you produce. And your form will fail to work at all without JavaScript, which isn't ideal.
So put a submit button in. If you're really adamant that the button shouldn't appear on-page (and I'm not sure that's a good idea), you can always absolute-position it off the left-hand side of the page where no-one can see it.
Note that WebKit will submit the form anyway despite the lack of button. If you must patch this up with messy script, make sure you cancel the default action for the keypress or you may get double-submission.
Safari, Firefox, Opera, and IE8 all do submit the form when you hit enter in text input field. Neither is submit button nor javascript needed. Try yourself.
(Didn't test IE6/7 but I'm 95% sure they do too.)
I agree with other that capturing the enter is not good idea.
Update: the above is true, except that Firefox does not submit a form containing password field and having no submit button. No idea why, can anyone see a reason behind that?
Update 2: ... and except for IE, if there's only one input field.
I used following thing for the same purpose but not for jquery try this may help you.
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.onsubmit();
return false;
}
else
return true;
}