locked
Disable double click on submit button RRS feed

  • Question

  • User2037629498 posted

    Hi,

    I want to prevent double click on my submit button. How do I do that? I tried different codes but nothing works at this time. Here is what I have for now:

    <INPUT TYPE="submit" NAME="Submit" VALUE="Submit" onclick="form.submit(); javascript=this.disabled = true;">

    Wednesday, October 12, 2016 7:44 PM

All replies

  • User2117486576 posted

    You are close but I don't think the JavaScript in the onclick attribute is correct.

    I like to show a progress spinner and either hide or disable the button.  I use markup like this:

    <div class="page-actions clearfix">
            <div class="progress-image-container float-left">
                <span class="loading-image-large"></span>
            </div>
            <button type="submit"  id="save-button" onclick="onSaveButtonClick(this)" class="primary-action">Save</button>
    </div>

    Css like this:

        .float-left {
            float:left;
        }
        .progress-image-container {
            display: none;
        }
        .loading-image-large {
            display: inline-block;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            background-image: url(Your_GIF)
         }

    And JavaScript for the click handler (assuming you can use jQuery):

    function onSaveButtonClick(me) {
              $(me).prev("div").show();
              $(me).attr("disabled","disabled");
               return true;
    }

    Inside this click handler, I will call client side validators and usually submit the form using $("form").submit().  If you rely on the button's default behavior for submitting the form be sure to return true from the handler.

    Wednesday, October 12, 2016 8:50 PM
  • User2037629498 posted

    Thanks RichardY

    I tried this but it did not work for me.

    Thursday, October 13, 2016 7:06 PM
  • User-654786183 posted

    spider1212,

    The only option is to disable the button once the user clicks it or hit the enter button.  But then you have to enable the button back on "asynchronous submit" or on validation errors in order to allow the user to submit the form again.  You have already achieved the solution in your code of disabling the submit button.  now you have to place your code to enable it.

    Please refer the following link for more options, but all of the options are directly or indirectly try to do the same thing you have done.

    http://www.the-art-of-web.com/javascript/doublesubmit/

    Thursday, October 13, 2016 7:23 PM
  • User2117486576 posted

    What did not work?  Show me your relevant code and any errors.

    Thursday, October 13, 2016 7:23 PM
  • User-271186128 posted

    Hi spider1212,

    I want to prevent double click on my submit button. How do I do that? I tried different codes but nothing works at this time. Here is what I have for now:

    <INPUT TYPE="submit" NAME="Submit" VALUE="Submit" onclick="form.submit(); javascript=this.disabled = true;">

    The issue is related to the form.submit() method, after submit the form, the page reload and the same with the submit button, so the disabled attribute not working.

    I suggest you could try to use the Asp.net Server Button control to submit the form, then use the Enabled property to disable the button. Code as below:

            <asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click"  />

    code behind:

            protected void btn_Click(object sender, EventArgs e)
            {
                btn.Enabled = false;
            }

    Best regards,
    Dillion

    Monday, November 7, 2016 11:40 AM