Preventing second click

Oleg Konovalov

Hi,

I have a web application which is (among other things) doing large SQL
Insert's,
so sometimes it takes a while, user becomes impatient and clicks again (or
just does double-click),
so the same data is getting inserted again.

I was thinking of some simple solution in Javascript.

something like:
<input name=myBtn onclick="this.disable=true;" />
and
<body onload="if (document.myBtn.disabled) document.myBtn.disabled=false;"
/>
....
</body>

Do you think that might work ?
(that input is not a Submit button, the page actually reloads when any DB
transaction is done)

The complication is that the <bodyand <inputare in different files,
i.e. if the button is in the "grandchild" of the <bodyform (child includes
the parent which includes a grandparent).
Do they really share a "document" ?

Or is there a nicer solution ?

Please advise.
Thank you in advance,
Oleg.

Sep 28 '06 #1

Follow Post Reply

2888

Oleg Konovalov

I have made some progress and found a few interesting things:
1) I should use just onload="if (btn_id.disabled)", not
onload="if(document.formname.btnname.disabled);" on grandparent form; That
works in FireFox, but not IE6 [which I target],
where I had to use: if(document.getElementById('btn_Id').disabled)

2) for some reason that always returns false, even if I just set
<input name="name1" id="btn_id" onclick="disabled=true"(or
this.disabled=true )
I have never heard that reloading a page resets any of its attributes and
there are no other buttons with the same id or name.

3) the other strange thing is that I can't use any curly braces in any
onload or onclick, doing:
onload="if (btn_id.disabled) { alert.window('some text'); }" gives error:
Fatal: File SystemId Unknown; Line 16; Column -1; Could not find function:
window.alert
but runs just fine without curly braces
That looks like a problem to me. Any workarounds ?

TIA,
Oleg.
"Oleg Konovalov" <ok******@verizon.netwrote in message
news:mpHSg.12807$2G1.1696@trnddc07...

Hi,

I have a web application which is (among other things) doing large SQL
Insert's,
so sometimes it takes a while, user becomes impatient and clicks again (or
just does double-click),
so the same data is getting inserted again.

I was thinking of some simple solution in Javascript.

something like:
<input name=myBtn onclick="this.disable=true;" />
and
<body onload="if (document.myBtn.disabled) document.myBtn.disabled=false;"
/>
...
</body>

Do you think that might work ?
(that input is not a Submit button, the page actually reloads when any DB
transaction is done)

The complication is that the <bodyand <inputare in different files,
i.e. if the button is in the "grandchild" of the <bodyform (child
includes the parent which includes a grandparent).
Do they really share a "document" ?

Or is there a nicer solution ?

Please advise.
Thank you in advance,
Oleg.

Sep 28 '06 #2

Bruce Wisentaner

"Oleg Konovalov" <ok******@verizon.netwrote in message
news:mpHSg.12807$2G1.1696@trnddc07...

Hi,

I have a web application which is (among other things) doing large SQL
Insert's,
so sometimes it takes a while, user becomes impatient and clicks again (or
just does double-click),
so the same data is getting inserted again.

I was thinking of some simple solution in Javascript.

something like:
<input name=myBtn onclick="this.disable=true;" />
and
<body onload="if (document.myBtn.disabled) document.myBtn.disabled=false;"
/>
...
</body>

Do you think that might work ?
(that input is not a Submit button, the page actually reloads when any DB
transaction is done)

The complication is that the <bodyand <inputare in different files,
i.e. if the button is in the "grandchild" of the <bodyform (child
includes the parent which includes a grandparent).
Do they really share a "document" ?

Or is there a nicer solution ?

Please advise.

Many technical solutions, but before getting too technical, don't forget to
cue the user that he/she must wait.
When I do this via xmlHTTPRequest, I change the image on the link from
'Save' to 'Wait'. I also have the submit handler set a flag whether form
has already been submitted, which the xmlHTTPRequest event handler clears on
server response.

---Bruce Wisentaner

Sep 29 '06 #3

Oleg Konovalov

Bruce,

Most users know they have to wait, but sometimes they perform massive
updates
(e.g. insert 200 rows), and when a server is slow, they tend to become
impatient
and click that button again. Or just simply do double-click instead of a
single click.

So it would be more effective to just disable that button until the DB
transaction is finished
when screen is refreshed with the new data.

Actually, it's a complex Cocoon/XSLT web app with actions in Java,
but I thought that there should be a simple Javascript solution with
disabling & re-enabling that button.

So what would you suggest ?

TIA,
Oleg.

"Bruce Wisentaner" <br*****@verizonDOT.netwrote in message
news:V41Tg.3863$Dq3.2039@trndny06...

"Oleg Konovalov" <ok******@verizon.netwrote in message
news:mpHSg.12807$2G1.1696@trnddc07...
>Hi,

I have a web application which is (among other things) doing large SQL
Insert's,
so sometimes it takes a while, user becomes impatient and clicks again
(or just does double-click),
so the same data is getting inserted again.

I was thinking of some simple solution in Javascript.

something like:
<input name=myBtn onclick="this.disable=true;" />
and
<body onload="if (document.myBtn.disabled)
document.myBtn.disabled=false;" />
...
</body>

Do you think that might work ?
(that input is not a Submit button, the page actually reloads when any DB
transaction is done)

The complication is that the <bodyand <inputare in different files,
i.e. if the button is in the "grandchild" of the <bodyform (child
includes the parent which includes a grandparent).
Do they really share a "document" ?

Or is there a nicer solution ?

Please advise.

Many technical solutions, but before getting too technical, don't forget
to cue the user that he/she must wait.
When I do this via xmlHTTPRequest, I change the image on the link from
'Save' to 'Wait'. I also have the submit handler set a flag whether form
has already been submitted, which the xmlHTTPRequest event handler clears
on server response.

---Bruce Wisentaner

Sep 29 '06 #4

Davey Erwin

Oleg Konovalov wrote:

<input name=myBtn onclick="this.disable=true;" />
and
<body onload="if (document.myBtn.disabled) document.myBtn.disabled=false;"
/>
...
</body>

Maybe like this ?

<INPUT type="button" value="send"
onclick="alert('onlyOnce');this.onclick='';this.va lue='wait'">

Sep 29 '06 #5

LeeU

Oleg Konovalov wrote:

>

<input name=myBtn onclick="this.disable=true;" />
and
<body onload="if (document.myBtn.disabled) document.myBtn.disabled=false;"
/>
...
</body>

Try this:

onclick="this.disabled=true;this.value='Submitting ...';
this.form.submit();"

As in:

<form action="someProgram.cgi">
<input type="submit" id="btnSubmit" value="Submit"
onclick="this.disabled=true;this.value='Submitting ...';
this.form.submit();">
</form>

Sep 29 '06 #6

ASM

Oleg Konovalov a écrit :

I have made some progress and found a few interesting things:
1) I should use just onload="if (btn_id.disabled)",

I can't believe that works with other browser than IE (Win ?)

2) for some reason that always returns false,

see below

3) the other strange thing is that I can't use any curly braces in any
onload or onclick, doing:
onload="if (btn_id.disabled) { alert.window('some text'); }" gives error:

certainly same cause as (2)

"Oleg Konovalov" <ok******@verizon.netwrote in message
news:mpHSg.12807$2G1.1696@trnddc07...
>Hi,

I have a web application which is (among other things) doing large SQL
Insert's,
so sometimes it takes a while, user becomes impatient and clicks again (or
just does double-click),
so the same data is getting inserted again.

I was thinking of some simple solution in Javascript.

something like:
<input name=myBtn onclick="this.disable=true;" />

>and
<body onload="if (document.myBtn.disabled) document.myBtn.disabled=false;"
/>

I do not understand why IE can't find an element of a form ?
(if what you said is true)

document.myForm.myElement.oneAttribute

where : myForm and myElement are names (not ID !) of those

document.forms['myForm'].elements['myElement'].disabled=true;
or
document.myForm.myElement.disabled='disabled';

<form name="myForm" .... >
<input type="submit" name="myElement" ... >

>...
</body>

Do you think that might work ?

yes (as told in my other post) if your code is correct :-)

>(that input is not a Submit button, the page actually reloads when any DB
transaction is done)

Why isn't it a submit ?

prefer to use a submit button and put your conditional function in a
'onsubmit' in form's tag

<form action="page.php" onsubmit="return myConditions();" ... >

myConditions() must return false to avoid send,
if all ok it must return true

>The complication is that the <bodyand <inputare in different files,

that's new ... !
one way to other, in fine, you display a single file, no ?

>i.e. if the button is in the "grandchild" of the <bodyform (child
includes the parent which includes a grandparent).

I understand nothing about your family where children give birth to
their parents and grand parents ... ! ?
Voodoo ?

>Do they really share a "document" ?

yes a virtual document but working as normal one

>Or is there a nicer solution ?

Hope so for your familly :-)

--
ASM

Oct 24 '06 #7

Preventing second click

This discussion thread is closed

Similar topics