How to submit form when tab or enter key are pressed to change data in a text input box

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
Bonnie_KAsked:
Who is Participating?
Advertise Here
 
dakydConnect With a Mentor Commented:
Have you tried something like this?

<html>
<body>
<form onsubmit="yourStuffGoesHere(); return false;">
  <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.
0
 
aprestoCommented:
you could use the Onchange event of the textbox

OnChange="form.submit();"
0
 
aprestoConnect With a Mentor Commented:
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
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Now
 
Bonnie_KAuthor Commented:
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.
0
 
aprestoCommented:
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
0
 
Bonnie_KAuthor Commented:
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.
0
 
Bonnie_KAuthor Commented:
I haven't gotten a chance to get back to this project, but when I do, I will try dakyd's solution.

Thanks for the responses,
Bonnie
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.