Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Solved
How to submit form when tab or enter key are pressed to change data in a text input box
Posted on 2006-07-14
Hi,
I have a form with a text field. I want the form to be submitted when the value is updated. Originally I had the form submit onChange, but if the enter key is pressed instead of tab, the form does not get sumitted. It is the only text field on the form, so it's very likely someone would enter the new quantity and press enter.
I added the onKeyDown event with this code (found here http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/ASP_DOT_NET/Q_21362644.html), but it doesn't work....
function HitEnter()
{
if(event.KeyCode == 13)
{
document.form1.action ="change_qty.cfm";
document.form1.submit();
nextCtrl.focus(); // simulate tab key
event.bubleCancel = true;
event.returnValue = false; // no more processing..
}
}
Thanks a lot for any help,
Bonnie
I have a form with a text field. I want the form to be submitted when the value is updated. Originally I had the form submit onChange, but if the enter key is pressed instead of tab, the form does not get sumitted. It is the only text field on the form, so it's very likely someone would enter the new quantity and press enter.
I added the onKeyDown event with this code (found here http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/ASP_DOT_NET/Q_21362644.html), but it doesn't work....
function HitEnter()
{
if(event.KeyCode == 13)
{
document.form1.action ="change_qty.cfm";
document.form1.submit();
nextCtrl.focus(); // simulate tab key
event.bubleCancel = true;
event.returnValue = false; // no more processing..
}
}
Thanks a lot for any help,
Bonnie
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3-
3
7 Comments
so your textbox might look like this:
<input type="text" name="txt" value="" onchange="form1.submit();"
then, when the value is changed in the textbox the form is submitted
<input type="text" name="txt" value="" onchange="form1.submit();"
then, when the value is changed in the textbox the form is submitted
onChange doesn't work if you change the value and then hit enter.
That's because by default I think the form wants to be submitted on enter, but I am not using an action element in my form tag because all submissions are done based on javascript. So when I change the value and hit enter, the form submits to itself instead of the HitEnter() code being run.
That's because by default I think the form wants to be submitted on enter, but I am not using an action element in my form tag because all submissions are done based on javascript. So when I change the value and hit enter, the form submits to itself instead of the HitEnter() code being run.
you could use the ONBlur event, this fires when the textbox will loose focus and you move to something else, i dont think its entirely necessary to wrute your own function, try iy and we'll go from there
Hi apresto,
Thanks for your answers.
That didn't work either... I think when I hit enter the form just submits, it doesn't leave the field or check to see if the value changed.
I think this is the way that forms are supposed to work, so I am thinking of giving up and just training the users to always use the tab key after changing the quantity, which does work.
Thanks for your answers.
That didn't work either... I think when I hit enter the form just submits, it doesn't leave the field or check to see if the value changed.
I think this is the way that forms are supposed to work, so I am thinking of giving up and just training the users to always use the tab key after changing the quantity, which does work.
Have you tried something like this?
<html>
<body>
<form onsubmit="yourStuffGoesHer
<input type="text" name="key" value="value">
</form>
</body>
</html>
Forms have an onsubmit event, and you can trap it to do what you want instead. Since hitting enter tries to submit the form, that's the same as having an event handler that traps a press of the Enter key. Theoretically, the "return false" shouldn't be necessary since you're submitting the form somewhere, but that line will actually stop the form submission from the Enter key. However, in case the stuff you're doing doesn't cause a redirect or the script keeps going, the "return false" will keep the form form submitting to itself.
Hope that helps.
<html>
<body>
<form onsubmit="yourStuffGoesHer
<input type="text" name="key" value="value">
</form>
</body>
</html>
Forms have an onsubmit event, and you can trap it to do what you want instead. Since hitting enter tries to submit the form, that's the same as having an event handler that traps a press of the Enter key. Theoretically, the "return false" shouldn't be necessary since you're submitting the form somewhere, but that line will actually stop the form submission from the Enter key. However, in case the stuff you're doing doesn't cause a redirect or the script keeps going, the "return false" will keep the form form submitting to itself.
Hope that helps.
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Introduction
HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many. But the PHP code for processing the checkboxes can be confusing at first. What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month8 days, 18 hours left to enroll
734 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.