I have a simple text box and button type input on my page.
<input id="sText" type="text" />
<input id="sButton" type="button" value="button" />
I capture a button click using jQuery.
$("[id$=sButton]").click(function () {
...do Stuff
});
The above code works just fine as long as I manually click the button. I started running into problems when I wanted to use the "enter" key to click the button. No matter what I do, I cannot prevent the enter key from performing it's default submit function.
The first thing I did was change the input type from "submit" to "button".
I tried setting the form's onsubmit to onsubmit="return false;"
I tried using jQuery to capture the enter key event:
$("#sText").keyup(function (event) {
if (event.keyCode == 13) {
alert("Enter!");
// $("#sButton").click();
}
});
Every time I press the enter key, it's like I'm submitting the form, the whole page refreshes. The above jQuery code does capture the "enter" keystroke, but the form still submits and refreshes the page.
I'm not sure whats going on.
You need to cancel the action.
event.preventDefault();
BUT I believe you can only kill the form submission with keydown, not keyup.
Epascarello is right, you need to cancel the for submit with the code he gave you. But you should also change the button back to a submit type so that the ENTER key and Clicking the button do the same thing. That way you only have to handle the cancellation of the submit in one area.
<input id="sButton" type="submit" value="Submit" />
JQuery:
$("#YourFormId").submit(function(event){
event.preventDefault();
...do Stuff
});
This way one function handles the ENTER key and the button click.
EDIT: Put the event.preventDefault() as the first statement.
Related
I try to make a confirm popup that going to jump when user click on a button of form.
If the user click on ok in the popup, the form goting to submit.
Its must to be dynamic becuse i have a lot of forms in one page and all form must to get the confirm popup.
I replaced the submit button with a normal button and when the user click on the button the confirm jumping.
<input type='button' name='submitButton' onclick="openPopup(this);">
Its work amazing but when the user into a text input and press on eneter its not submit the form.
What can i do?
Use following JS:
<input type='submit' name='submitButton' onclick="openPopup(this);">
If you can't use a submit button in your form you just need to handle this in the keydown event in your form inputs to check if Enter key is pressed and click your button dynamically:
$("#formID").find('input[type=text]').on('keydown', function (e) {
if (e.keyCode == 13) {
$('[name="submitButton"]').click();
}
});
Note:
I used formID as id of your form you just need to replace it with your form id.
$(document).ready(function() {
$('input').keypress(function(data) {
if (data.keyCode == 13)
data.target.form.submitButton.click();
});
});
When you accept confirmation then fire this event
$('[name="submitButton"]').click();
I am trying to trigger the submit button when a user presses enter. Works great for all browsers except Internet Explorer 9. Strange thing is that IE insists on also triggering the click for another button I never told it to. Am I doing something wrong or how to fix this?
Below is my code. Pressing enter in IE triggers the submit click as expected, but for some reason also triggers the "some button" click (even without my keypress listener):
$('input[type=submit]').click(function () {
alert('Submit click');
});
//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
var keycode = event.keyCode || event.which;
if (keycode == 13) $('input[type=submit]').click();
});
//ROUTE CLEAR HANDLER
$('button').click(function () {
alert('Button click');
});
You can see the bug in action here: http://jsfiddle.net/h64xD/
Here are a couple of things to consider:
IE9 counts the <button/> element as type="submit" by default. So to make it non-submit, you have to be explicit:
<button type="button">Some button</button>
If you do that, you will notice that the emulated click event now doesn't trigger the <button/> but still fires 2 events. The reason is that, because you haven't explicitly defined a <form/> element, IE9 assumes the controls as being in a form, and thus pressing enter in the textbox triggers 2 events:
the one that you are emulating
the default form submit button behaviour
So again to get around this issue, you have to be explicit:
<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />
Now, these are the reasons that you are seeing the behaviour in IE. #MrSlayer's answer caters to the second issue of stopping the keypress event after you have satisfactorily handled it, using preventDefault()
The Enter key has a default behavior to submit, so you need to prevent the default behavior from executing. Because the button tag is, by default, type="submit" it is executing that button when the Enter key is pressed.
//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
var keycode = event.keyCode || event.which;
if (keycode == 13)
{
event.preventDefault();
$('input[type=submit]').click();
}
});
How about triggering the form's submit instead of a button click?
$('input[type=text]').keypress(function(e) {
var keycode = event.keyCode || event.which,
frm = $(this).closest('form');
if (keycode == 13) {
e.stopPropagation();
frm.submit();
return false;
}
return true;
});
--EDIT--
Updated Slightly to stop the event propagation.
First off, you don't need to manually attach an event to submit a form when the user presses enter - the browser already handles that.
Oddly enough, this was to do with the order of the elements, implicit form-associations, as well as the fact that IE handles buttons as submit elements.
Try swapping the order of these buttons to see what I mean:
<input type="text" />
<input type="submit" value="Submit" />
<button>Some button</button>
Naturally, the browser is already instructed to listen to respond to the Enter on a text-input. This results in the browser clicking the associated submit button. Further, since you haven't explicitly provided a form, or associated elements with one another via their form attribute, the browser is attempting to make that relationship for you.
In your code, the <button> element was assumed to be the submit button of the text-input (because it was the first submit button in the implicit form). As such, anytime you press Enter on the text-input, the browser naturally raises the click event of the associated button.
If you re-order the elements, as I have above, we see the opposite take place. IE associates the other <input> element with the text-box. And pressing Enter on the text-box implicitly raises the click event on the submit input.
You can confirm this behavior by comparing the .form attributes of various elements. For instance, adding some id values will give us easier access to these:
<button id="fiz">Some Button</button>
<input id="foo" type="text" />
<input id="bar" type="submit" value="Submit" />
Then run some quick comparisons:
var button = document.getElementById("fiz");
var text = document.getElementById("foo");
var submit = document.getElementById("bar");
button.form === text.form; // true
submit.form === text.form; // true
button.form === submit.form; // true
So in the end, it's up to you to remove the ambiguity between the two buttons, by declaring the <button> element to be type='button', or by placing it after the intended submit button.
basically I have this:
<asp:TextBox runat='server' />
<button id='b2'>hi</button>
<script>
$('#b2').click(function(e){
e.preventDefault();
alert('you clicked the button');
});
</script>
the problem is that when hitting enter inside the textbox the click event on the b2 occurs so I get the js function executed, anybody knows how to stop this?
Pressing the return/enter key while focusing a text box is treated the same way as clicking on the submit button. What you can do is attach a keypress event handler to all text boxes in your form, and simply ignore the return key press.
Code looks like this:
$('input[type="text"]').keypress(function(event) {
if(event.keyCode == 13) {
event.preventDefault();
alert("enter!");
}
});
Note that I don't use ASP, so I tested this with a standard HTML text box and submit button.
adding the attribute type="button" to the button tag stopped this behavior o_O
I have a form with a simple text field and multiple submit buttons. When the user presses enter, I want to submit the form with a specific submit button, but it looks like the form just chooses the first button instead. Is there any way to tell the browser which submit button to choose when user presses enter? Preferrably without javascript, but I'll take it if that's the only solution.
Edit: I have no other choice than having multiple submit buttons. This is a legacy app.
There's no way. The simplest solution is just to ensure that the first submit button in the form is the one you want triggered by the Enter button.
Note that this submit button can be a duplicate of a button elsewhere in the form, and it doesn't have to be visible.
You can use simple JS to catch the onkeypress event:
onkeypress="if ((event.keyCode | event.which) == 13) { document.getElementById('MySubmitButton').click(); return false; }"
Just add this to the textbox tag and replace "MySubmitButton" with the ID of the desired submit button.
Note: use ID, not name.
If you had the following HTML
<form id="form_one">
<input type="submit" value="Submit 1" />
</form>
<form id="form_two">
<input type="submit" value="Submit 2" />
</form>
Then you could have a bit of jQuery as follows
$(document).ready(function() {
$(this).keydown(function(e) {
if (e.keyCode == '13') {
$("#form_one").submit();
}
});
});
Obviously you'd have to put in the logic to decide which form to submit.
Also as far as I know if a control in "form_one" had focus and you hit enter it would automatically submit that form the control is contained within.
you can just define a javascript method on the "onclick" or "onkeypress" event of the button, from which u wanted to get the form submitted. But u have to define the process to occur in the javascript function
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!!!