Prevent Multiple Clicks to Button Control

Hello,

I have a web form that submits data to my database. I have a few users who don't have patience and like to keep hitting the submit button multiple times which adds multiple values of the same data to my database. How can I prevent this from happening?
LVL 4
asp_net2Asked:
Who is Participating?
 
HainKurtConnect With a Mentor Sr. System AnalystCommented:
the other option is open the source of rendered html page and find the id of that control and use that one instead
it should be like

ctrl0_imbtn_UpdateClient

then use that id directly

var btn = document.getElementById('ctrl0_imbtn_UpdateClient');
btn.style.disabled="disabled";
0
 
s_chilkuryCommented:
One thing which you would find it common on Banking sites is:

Disable button on the first click itself.

And then, Enabling it when the process is complete.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
LoftbugCommented:
I've created this example in html to demonstrate hiding elements.

<html>		
	<head>
			<script type="text/javascript">
			    function toggle_visibility(id) 
			    {			    	
			       var e = document.getElementById(id);			       
			       
			       // for testing - remove
			       alert(e.style.display);
			       
			       if(e.style.display == 'block' || e.style.display == "")
			          e.style.display = 'none';
			       else
			          e.style.display = 'block';
			     
			     	 // for testing - remove
			     	 alert(e.style.display);			     
			    }
			</script>			
	</head>
	<body>
		<form id="form1">
			Prepare to submit the following: ABC<br /><br/ >
			<input type="submit" id="uniqueID1" value="Post" onclick='javascript:toggle_visibility("uniqueID1");' />			
		</form>
	</body>
</html>	

Open in new window

0
 
HainKurtSr. System AnalystCommented:
onClick="this.disable='disabled'"

<button onClick="this.disabled='disabled'">test</button>
0
 
asp_net2Author Commented:
Hi HainKurt,

This is what I'm using. How can I implement what you showed me with what I have below?

<asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" />
0
 
HainKurtSr. System AnalystCommented:
try

imbtn_UpdateClient.attributes.add("onClick","this.disabled='disabled'")
0
 
HainKurtSr. System AnalystCommented:
or

<asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" OnClientClick="this.disabled='disabled'" />
0
 
asp_net2Author Commented:
Hi HainKurt,

That disabled the Button after I initially clicked it BUT no values where sent to my database. If I remove what you mentioned the values to into my database.
0
 
HainKurtSr. System AnalystCommented:
you mean form is not submitted? imbtn_UpdateClient_Click not fired at all?
0
 
HainKurtSr. System AnalystCommented:
you can try this
<script>
var submitted=false;
function checkSubmitted(){
  if (submitted) {
    alert('form is already submitted!');
    return false;
  };
  submitted=true;
  return true;
}
</script>
<button onClick="return checkSubmitted()">test</button>

Open in new window

0
 
asp_net2Author Commented:
>> you mean form is not submitted? imbtn_UpdateClient_Click not fired at all?

Correct, the button got disabled when I first clicked on it but the Click Event did not fire.
0
 
asp_net2Author Commented:
I can't try your method for post 34872505 because I need the image to appear. I need the be able and disable the ImageButton after Click Event fires.
0
 
HainKurtSr. System AnalystCommented:
ok, other method
<script>
var submitted=fale;
function disableButton{
  if (!submitted){
    var btn = document.getElementById("<%=imbtn_UpdateClient.ClientID%>");
    btn.style.disabled="disabled";
    submitted=true;
    return true;
  } else {
    alert("Please wait for response, form is already submitted!);
    return false;
  }
  
}
</script>

<form name=form1 runat=server ... onSubmit="return disableForm()">
...
<asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" /> 
</form1>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
or do not touch the button at all:

(rename fuction above to "disableForm()" too)
<script>
var submitted=fale;
function disableForm(){
  if (!submitted){
    submitted=true;
    return true;
  } else {
    alert("Please wait for response, form is already submitted!);
    return false;
  }
  
}
</script>

<form name=form1 runat=server ... onSubmit="return disableForm()">
...
<asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" /> 
</form1>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
fixed the code above:
<script>
var submitted=false;
function disableForm(){
  if (!submitted){
    submitted=true;
    return true;
  } else {
    alert("Please wait for response, form is already submitted!");
    return false;
  }
  
}
</script>

<form name=form1 runat=server ... onSubmit="return disableForm()">
...
<asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" /> 
</form1>

Open in new window

0
 
asp_net2Author Commented:
Hi HainKurt,

Yes, that worked VERY well.

Thank you!!
0
 
HainKurtSr. System AnalystCommented:
which one worked :)
0
 
HainKurtSr. System AnalystCommented:
could you disable the button?

I mean, could you use

var btn = document.getElementById("<%=imbtn_UpdateClient.ClientID%>");
btn.style.disabled="disabled";

in your "disableForm()" function without breaking the logic?
0
 
asp_net2Author Commented:
The code in this post 34872773 worked. Did not try code in post 34872754. Would you like me to try code in post 34872754? Is there a certain one I should use or that you prefer that I use?
0
 
HainKurtSr. System AnalystCommented:
try this one, just added two lines inside the function to disable the button after form is submitted (hopefully)...
<script>
var submitted=false;
function disableForm(){
  if (!submitted){
    submitted=true;

    var btn = document.getElementById("<%=imbtn_UpdateClient.ClientID%>");
    btn.style.disabled="disabled";

    return true;
  } else {
    alert("Please wait for response, form is already submitted!");
    return false;
  }
  
}
</script>

<form name=form1 runat=server ... onSubmit="return disableForm()">
...
<asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" /> 
</form1>

Open in new window

0
 
asp_net2Author Commented:
Ok, I tried the code above and when the page first loads I get the following error message below.

Server Error in '/' Application.
--------------------------------------------------------------------------------

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
0
 
HainKurtSr. System AnalystCommented:
did you get that error because of

var btn = document.getElementById("<%=imbtn_UpdateClient.ClientID%>");
btn.style.disabled="disabled";

strange, these lines sholuld not create any issue... try

var btn = document.getElementById('<%=imbtn_UpdateClient.ClientID%>');
btn.style.disabled="disabled";



0
 
asp_net2Author Commented:
same thing. Does it matter that I'm using C#?


Server Error in '/' Application.
--------------------------------------------------------------------------------

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
0
 
HainKurtSr. System AnalystCommented:
post the code you have... there must be something else...
does error goes away when you remove those lines from js?
0
 
asp_net2Author Commented:
Yes, the error goes away after I remove those lines.
0
 
asp_net2Author Commented:
Below is the code that currently works now.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="update_client.aspx.cs" Inherits="cms_secure_update_client" %>

<%@ Register Namespace="HTMLEditor" TagPrefix="custon" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="description" content="Weddings, Portraits, Senior Photos, Events, Nature & Fine Art" />
    <link href="../../css/main.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 8]>
        <style type="text/css" media="all">
            @import "../../css/ie8.css";
        </style>
    <![endif]-->

    <script type="text/javascript">
        var submitted = false;
        function disableForm() {
            if (!submitted) {
                submitted = true;
                return true;
            } else {
                alert("Please wait for response, form is already submitted!");
                return false;
            }
        }
</script>

</head>
<body>
    <form id="form1" onsubmit="return disableForm()" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="wrapper">
        <div id="cms-header">
            <div id="logo-nav">
                <div id="logo">
                    <img src="../../images/PicksPhotoLogo.png" alt="Picks Photo and Studio" />
                </div>
                <div id="nav">
                    <ul>
                        <li><a href="../../index.aspx">Home</a></li>
                        <li>
                            <asp:Repeater ID="rpRetrieveNavLinks" runat="server">
                                <ItemTemplate>
                                        <a href="<%#Eval("mnav_url")%>?mnav_id=<%#Eval("mnav_id")%>" class="rpRetrieveNavLinks"><%#Eval("mnav_linkname")%></a>
                                </ItemTemplate>
                            </asp:Repeater>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="maincontent">
            <div id="#sidenav-content">
                <div id="sidenav">
                    <h2>CMS Tools</h2>
                    <ul>
                        <li><a href="create_mainnavcategory.aspx">Create Page</a></li>
                        <br />
                        <li><a href="create_friendslinks.aspx">Create Friends Link</a></li>
                        <br />
                        <li><a href="create_client.aspx">Create Clients Page</a></li>
                        <br />
                        <li><a href="view_mainnav.aspx">Update Navigation</a></li>
                        <br />
                        <li><a href="view_mainnavcategory.aspx">Update/Delete Page</a></li>
                        <br />
                        <li><a href="view_friendslinks.aspx">Update/Delete Friends Link</a></li>
                        <br />      
                        <li><a href="view_client.aspx">Update/Delete Client</a></li>
                        <br />    
                    </ul>
                </div>
                <div id="content">
                    <h2>Update Client</h2>
                    <asp:Label ID="lblClientName" runat="server" CssClass="label"></asp:Label><br />
                    <br />
                    <br />
                    <asp:Label ID="lblClientCategory" runat="server" Text="Choose a Category: "></asp:Label><br />
                    <asp:DropDownList ID="ddlCategory" Width="445px" CssClass="ddl" runat="server"></asp:DropDownList>
                    <br />
                    <br />
                    <asp:Label ID="lblClientSubCategory" runat="server" Text="Choose a SubCategory: "></asp:Label><br />
                    <asp:DropDownList ID="ddlSubCategory" Width="445px" CssClass="ddl" runat="server"></asp:DropDownList>
                    <br />
                    <br />
                    <asp:Label ID="lblClientAlbum" runat="server" CssClass="label" Text="Update Photo Album: "></asp:Label>&nbsp;<asp:RequiredFieldValidator ID="rfvContent" runat="server" ErrorMessage="Required" ControlToValidate="ClientAlbumContentEditor" InitialValue="" CssClass="required"></asp:RequiredFieldValidator><br />
                    <custon:LinkHTMLEditor ID="ClientAlbumContentEditor" Width="445px" Height="200px" runat="server" />
                    <br />
                    <br />
                    <asp:Label ID="lblClientPermission" runat="server" CssClass="label" Text="Client Grants Permission to use Photo's Online: "></asp:Label><br />
                    <asp:RadioButtonList ID="rblClientPermission" CssClass="label" runat="server" RepeatDirection="Horizontal" CellPadding="-1" CellSpacing="-1"></asp:RadioButtonList>
                    <br />
                    <br />
                    <asp:HiddenField ID="hfclt_id" runat="server" />
                    <asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" />
                </div>
            </div>
        </div>
        <div id="footer">
            <p class="copyright">
 
            </p>
        </div>
    </div>
    </form>
</body>
</html>
0
 
HainKurtSr. System AnalystCommented:
try removing

<head runat="server">
-->
<head>

if you do not need this feature and put the code back into js
0
 
asp_net2Author Commented:
I need that feature.
0
 
asp_net2Author Commented:
Thank you!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.