Preventing second click

Discussion in 'Javascript' started by Oleg Konovalov, Sep 28, 2006.

  1. 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.
    Oleg Konovalov, Sep 28, 2006
    #1
    1. Advertising

  2. Re: Preventing second click in Javascript

    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" <> wrote 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 <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.
    >
    >
    >
    >
    >
    Oleg Konovalov, Sep 29, 2006
    #2
    1. Advertising

  3. "Oleg Konovalov" <> wrote 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 <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
    Bruce Wisentaner, Sep 29, 2006
    #3
  4. 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" <> wrote in message
    news:V41Tg.3863$Dq3.2039@trndny06...
    > "Oleg Konovalov" <> wrote 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 <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
    >
    >
    Oleg Konovalov, Sep 29, 2006
    #4
  5. Oleg Konovalov

    Davey Erwin Guest

    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'">
    Davey Erwin, Sep 29, 2006
    #5
  6. Oleg Konovalov

    LeeU Guest

    > 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>
    LeeU, Sep 29, 2006
    #6
  7. Oleg Konovalov

    ASM Guest

    Re: Preventing second click in Javascript

    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" <> wrote 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;" />


    OK

    >> 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 <body> and <input> are 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 <body> form (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
    ASM, Oct 24, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Oleg Konovalov

    Preventing second click

    Oleg Konovalov, Oct 22, 2006, in forum: Java
    Replies:
    13
    Views:
    553
    Wojtek Bok
    Oct 30, 2006
  2. chrisp
    Replies:
    2
    Views:
    1,832
    bruce barker
    Oct 11, 2008
  3. Oleg Konovalov

    Preventing second click

    Oleg Konovalov, Oct 22, 2006, in forum: Javascript
    Replies:
    12
    Views:
    195
    Wojtek Bok
    Oct 30, 2006
  4. Oleg Konovalov

    Preventing second click

    Oleg Konovalov, Oct 23, 2006, in forum: Javascript
    Replies:
    0
    Views:
    78
    Oleg Konovalov
    Oct 23, 2006
  5. Oleg Konovalov

    Preventing second click

    Oleg Konovalov, Oct 23, 2006, in forum: Javascript
    Replies:
    6
    Views:
    128
    Erwin Moller
    Oct 23, 2006
Loading...

Share This Page