Mouse Click VS Enter Key causing duplicate inserts

[sdidomenico]

We have an application in which the Users will use the Keyboard rather than the Mouse. It is for data entry type stuff.

I'm having trouble with writing code to keep a form "Save" button (type="submit") in focus, so our Users can hit the Enter Key at any time during data entry, yet blur the "Save" button after they have hit Enter so they can't hit the Enter Key multiple times causing the form to be submitted more than once.

The pages have a set focus to the first input box. Since the "Save" button is not in focus, I cannot blur the button.

I have had some success with some of the pages, but there is one page where I cannot create a solution. It's a Name and Address input page.
I can't seem to come up with an event that determines that they are finished entering data on the form, therefore I can't trigger a function to set focus to the button and then blur it.

I have learned that a button type="submit" has some sort of focus, but not really a complete focus if you know what I mean.

Has anyone had to solve a problem such as this?

Is the onunload event safe to use for this?

Thanks in advance for your time,

Steve DiDomenico
Nashua, NH

 

[adam0101]

It doesn't matter if the button has focus or not. If it's the default button, hitting enter while focused on any element in the form will submit the form. Try stopping the submission at the form level instead. This should cause the form to submit only once.

<form action="page.asp" onsubmit="return window.submitted ? false : window.submitted=1">

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

 

[sdidomenico]

Thanks Adam.
I'll give it a try.
Steve

 

[sdidomenico]

Hi Adam,

This worked great, thanks.

Can you explain the code to me? I have tried but I cannot figure it out.

Thanks,

Steve

 

[adam0101]

Sure.
If the variable "submitted" exists, then return false to the event since the variable would only exist if the form has already been submitted. If the variable doesn't exist the form hasn't been submitted yet so create the variable and return true.

window.submitted=1 returns "true" because any variable assignment that doesn't result in null returns true.

Hope that helps.

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

 

[adam0101]

Actually, that last part is wrong. The return value of any variable assignment is the new variable value. So window.submitted=1 returns "1" which, when converted to a boolean value, equals "true".

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

 

[sdidomenico]

Hi Adam,

After I first reviewed the code, I wrote this in my notes:

"Return false and set window.submitted to true." So I was pretty close.

I understand conceptually what it does; I'm now looking to understand the syntax. The JavaScript book we have here does not cover the ? or the :. The ? looks conditional and the : looks like a command separator.

Thanks again,

Steve

 

[chessbot]

var variable = (condition)? value1 : value2;

is shorthand for

if (condition)
{
  var variable = value1;
} else {
  var variable = value2;
}

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[adam0101]

Here's a website I like to use as a reference:

http://www.devguru.com/Technologies/ecmascript/quickref/special_operators.html

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

 

[sdidomenico]

So this will:
1. return "false" when true (after the first time)
2. return "true" when false (one time only).
3. only submit the form to the server when "true"

Now a question for the variable "submitted." Is this a User Defined variable name? I cannot find a reference to this as a property under the window object. Just so I understand how the variable submitted is used, could I change it to sent, as window.sent?

Thanks again for the help.

 

[adam0101]

Yes, it's a user-defined variable. You can change it to any value that is not a reserved keyword. I added it to the window object so it would be a global variable. Another way to do it would've been to define the variable in the <HEAD>. It needs to be global so it remembers its state the next time the button is clicked. If it's not defined as a global variable, it's considered a local variable of the "anonymous" function. You can see this by putting the following code in your address bar and hitting enter (assuming there's only one form on your page):

javascript:alert(document.forms[0].onsubmit)

You should see the following:

function anonymous()
{
return window.submitted ? false : window.submitted=1
}

Hope that helps...

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

 

[sdidomenico]

After much time invested, I now understand more about JavaScript and I have a working solution installed in production.

Thanks a million Adam.

 

[ch4r7ie]

nooby question... i found this site a couple of days ago, got a great tip, ty, have another question, and when i googled for an answer, it lead me back to this thread ,,,


it's a take on the triggering the f11 key on a browser when it enters my website (

http://www.lotusimages.com),

the galleries look better in full screen mode


i wouldnt want to trigger f11 when someone enters, because if they are in full screen mode, it will take them out, what i want to do is simply make a button that when pushed makes an f11 call, any idea if thats possible?

thanks in advance

 

[adam0101]

ch4r7ie,
JavaScript can't "push" function keys, but Internet Explorer supports "fullscreen" or "kiosk" mode by using this:

window.open(location.href,'_blank','fullscreen=1')

You'll have to provide the user with a way to close the window since this completely hides the toolbar, address bar, etc. In XP SP2 I believe they changed this feature to only maximize the window.

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};