Preventing second click

O

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 <body> and <input> are in different files,
i.e. if the button is in the "grandchild" of the <body> form (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.
 
O

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.
 
B

Bruce Wisentaner

Oleg Konovalov said:
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 <body> and <input> are in different files,
i.e. if the button is in the "grandchild" of the <body> form (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
 
O

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.
 
D

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.value='wait'">
 
L

LeeU

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>
 
A

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)

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';


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

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


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

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

yes a virtual document but working as normal one

Hope so for your familly :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top