Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Form Submitted via OnKeyPress when Enter Key Pressed

Posted on 2007-11-20
5
Medium Priority
?
13,324 Views
Last Modified: 2013-12-08
I have a form that I want to submit when the user presses Enter. The action URL is determined when the form is submitted based on what the user has selected from a dropdown. In IE, the form is being submitting twice. This is causing a problem on the server side. In Firefox, the form is submitted only once and everything works as expected. How can I code this so IE will only submit the form once? Code below.

<INPUT type="text" name="CONTRACT_ID" onkeypress="javascript:submitOnEnter(event)">

<SCRIPT>
    function submitOnEnter(e) {
            var ENTER_KEY = 13;
            var code = "";
      
            if (window.event) // IE
            {
                code = e.keyCode;
            }
            else if (e.which) // Netscape/Firefox/Opera
            {
                code = e.which;
            }
            
            if (code == ENTER_KEY) {
                doSubmit();
                return false;
            }
      }

  function doSubmit() {
      // omitted logic that sets the action on the form based on the selected option
      document.frmSearch.submit();
  }

</SCRIPT>
0
Comment
Question by:craigdawson
[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
  • 4
5 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20323884
craigdawson,

Are you not using normal form tags or something besides a submit button?  Is there more than one form or submit button?

The behavior you want (pressing Enter submits form) is the default behavior for a form.  The reason it is occurring twice is probably this default behavior.  What happens if you don't use the onkeypress Event?

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20323894
craigdawson,

If you want to continue to use the event for whatever reason then try to fix this with ...

<INPUT type="text" name="CONTRACT_ID" onkeypress="javascript:submitOnEnter(event); return false;">

Adding "return false" to the event should stop any further default behavior by the object.  In theory that should fix the issue. :)

Let me know if you have a question.

b0lsc0tt
0
 

Author Comment

by:craigdawson
ID: 20327716
Without the OnKeyPress event the form is not submitted in <enter> because there is no action defined for the form. The action URL  is determined on submit.

Adding "return false" does prevent the double-post. I had tried that. But the other consequence of this is that keystrokes are ignored in the input box! Can't type in it, can only paste. Obviously that's no good.
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 1000 total points
ID: 20336047
You can get the character to appear and use the return false by changing onkeypress to onkeyup.  That event should be as supported as onkeypress and so it is a valid way to fix this.

Another thing to try (worked in my test) is to add 'onsubmit="return false;"' to the form tag (no single quotes).  That seems to stop the second submit.  You would not need the return false in the onkeypress event.

I still am not clear on why you need the submit() method call in the script but that probably doesn't matter. :)  Either of these options should fix this for you.

If not then please provide the html for the form and any other script that is part of this process.  Let me know if you have a question.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20340914
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question