Solved

Wierd bug pressing ENTER on web

Posted on 2004-04-29
24
426 Views
Last Modified: 2013-12-18
I have an order form on the web with ONE editable field for quantity.  The form has one button called ORDER ITEM that validates the quantity (via Javascript) and submits the form.  The problem is users are pressing the ENTER key rather than pressing the button which is bypassing my validation!

I was baffled because I have many other web apps and never seen this problem before.  Now I have discovered if I add an extra editable field it is not a problem but the extra field looks ugly and doesn't belong.  It seems that if there is more than one field then ENTER does nothing however if I have only ONE field then ENTER acts like a SUBMIT button!

Anybody have this problem happen to them, and is there a workaround besides adding another blank editable field?
0
Comment
Question by:snocross
  • 8
  • 5
  • 4
  • +5
24 Comments
 
LVL 24

Expert Comment

by:HemanthaKumar
ID: 10949475
paste this html after Submit button and before any $$Return field

[<form method = "get"><input type = "hidden"></form>]

Hide it from Notes...

~Hemanth
0
 
LVL 46

Expert Comment

by:Sjef Bosman
ID: 10949527
There is another workaround: catch the Enter-key in JavaScript. I forgot how to do this, but I'll be back (if someone else isn't here before me...)
0
 
LVL 5

Author Comment

by:snocross
ID: 10949599
Heman that worked but unfortunately it worked too well!!  Enter does not submit the form however clicking the actual ORDER ITEM button now just pushes it down and it gets stuck down without doing anything!
0
 
LVL 5

Author Comment

by:snocross
ID: 10949610
... maybe I should tell you my ORDER ITEM button is not a notes button but rather a field with the following code;

"Type = hidden><input type=\"Button\" value = \"Order Item\" onClick=\"saveSubmit()\""
0
 
LVL 14

Expert Comment

by:p_partha
ID: 10949626
Put this on the keypress event of the form:

if(window.event.keyCode==13)
{
window.event.returnValue = false
}

Partha
0
 
LVL 46

Expert Comment

by:Sjef Bosman
ID: 10949636
Put this in the onKeyPress event of the form:
    return noEnter();

and in the JS Header:
    function noEnter() {
        if(event.keyCode) {
            if(event.keyCode=="13")
                return false;
        } else if(event.which) {
            if(event.which=="13")
                return false;
        }
    }
0
 
LVL 46

Expert Comment

by:Sjef Bosman
ID: 10949648
Partha, bro, welcome back, but your solution isn't entirely browser-proof...
0
 
LVL 5

Author Comment

by:snocross
ID: 10949706
I tried both methods and can't get either to work... :(
0
 
LVL 31

Expert Comment

by:qwaletee
ID: 10950362
Restructure slightly.

Take the saveSubmit code, and remove the submit() call.  Instead, have it return false if validation fails, and return true if validation succeeds.

Set the form onsubmit even to point to saveSubmit

Change the Order Item button.  instead of calling saveSubmit, it should just issue a submit call.  Now, when the user clicks the button, all it does is submit, which is the same thing the enter key does.  Your validation runs because it is assigned to the onsubmit event, and the return false prevents the final submit from occuring if it should not.

Everything else is a kludge, including the other suggestions here (trapping the enter key or putting in extra design elements that cause the browser to not allow enter to be used as submit).
0
 
LVL 14

Expert Comment

by:p_partha
ID: 10950558
SNO,
Where did u put that code, You have to put it in form "Onkey press event", Also as qwal pointed out, u can even call the validate function , i.e


       if(event.keyCode) {
           if(event.keyCode=="13")
"  <call your function here>"

       } else if(event.which) {
           if(event.which=="13")
"  <call your function here>"
       }

SJef, yeah long time.. will ping u sometime today ;-)

partha
 
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10993417
Hello Sno,

here my proposal.

Put this into JSHeader section:
function checkKey(e){
  keyCode = (e.which)? e.which: e.keyCode;
  if(keyCode==13) return false;
}


Puthis in your Field onKeyPress event:
return checkKey(event)


That should do.
Tested in IE6.0 and Mozilla1.5


0
 
LVL 63

Accepted Solution

by:
Zvonko earned 50 total points
ID: 10993452
Ok, I just saw partha's comment.
It can be all done in Field's onKeyPress event.
This is all you need to put into Field's onKeyPress event handler:

keyCode = (event.which)? event.which: event.keyCode;
return (keyCode!=13)

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 13

Expert Comment

by:CRAK
ID: 10995430
Hey... I saw this one last thursday. I just solved the thing two weeks earlier at work and thought "Bummer.... an easy score and I can't reach the code for another 3 days"....
So the quest is still on?!
;-))

I trimmed my code a bit. The remainder must look familiar to you (i.e. all participants here):

JS Header:

function capEnter(fld,evnt)
{
      key = document.layers ?evnt.which :document.all ?evnt.keyCode :envt.keyCode;
      if (key != 13)
      {
            // no enter -> accept input / continue processing pressed key
            return(true);
      }
      else
      {
            // enter -> do not continue processing pressed key
            return(false);
      }
}


Field:
<INPUT Type=\"Text\" Name=\"NavJump\" onKeyDown=\"return(capEnter(this,event))\">

It's the onKeyDown event that you need....


(Somehow I feel like a parrot!)
0
 
LVL 5

Author Comment

by:snocross
ID: 10999572
Ok I will try this tomorrow!!  Thanks guys.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 11005576
Guess I got to late to get the points for this one, but CRAK is right, you have to check for the enter key in onkeydown or onkeyup event rather than onkeypress to get it to work.
You can actually use the same event on form level to force a submit from anywhere on the form when pressing enter.
0
 
LVL 46

Expert Comment

by:Sjef Bosman
ID: 11012551
This starts to look like a petshop... ;)
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
ID: 11012865
Woof ,-)
0
 
LVL 46

Expert Comment

by:Sjef Bosman
ID: 11014122
Mimicking the cat, eh? Sprinkled with petrol and lit? ;)
0
 
LVL 5

Author Comment

by:snocross
ID: 11099205
Crak, I just tried your most recent example here but not clear on the FIELD part.  I tried pasting that into an editable field and there were problems with the quotes.  I played with the quotes and just got a blank editable field on my form.  Of course everything works at this point because then I have TWO editable fields.  My problem only occurs when there is only one editable field on the form.  Can you be extra specific on where I should put the following text;

<INPUT Type=\"Text\" Name=\"NavJump\" onKeyDown=\"return(capEnter(this,event))\">

0
 
LVL 5

Author Comment

by:snocross
ID: 11099295
STOP!  Got it to work!  I used Zvo's short and simple solution!  BEAUTIFUL!  Thanks everyone!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11099722
Thanks Sno :)
0
 
LVL 5

Author Comment

by:snocross
ID: 11099741
No, thank you!  What a headache that was!  Users were bypassing my validation and bringing inventory levels below ZERO!  Granted we had an approval process where we caught the problems but this will make it so easy to prevent.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11099827
Such stories make me laughing.
Normally you would assume those form users are no gambler.
But from my real life I heard from one bank account girl that they know all in the office which button on the console to press, all girls in the office at the same time, to get a break because the computer went down :)

0
 
LVL 5

Author Comment

by:snocross
ID: 11100984
Ha, that's a good one!  Wish I could do that here to get a break!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Problem "Can you help me recover my changes?  I double-clicked the attachment, made changes, and then hit Save before closing it.  But when I try to re-open it, my changes are missing!"    Solution This solution opens the Outlook Secure Temp Fold…
Lack of Storage capacity is a common problem that exists in every field of life. Here we are taking the case of Lotus Notes Emails, as we all know that we are totally depend on e-communication i.e. Emails. This article is fully dedicated to resolvin…
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.

911 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now