Link to home
Create AccountLog in
Avatar of Brian
BrianFlag for United States of America

asked on

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?
Avatar of s_chilkury
s_chilkury
Flag of United States of America image

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.
Avatar of Loftbug
Loftbug

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

onClick="this.disable='disabled'"

<button onClick="this.disabled='disabled'">test</button>
Avatar of Brian

ASKER

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" />
try

imbtn_UpdateClient.attributes.add("onClick","this.disabled='disabled'")
or

<asp:ImageButton ID="imbtn_UpdateClient" runat="server" ImageUrl="~/images/update_btn.png" onclick="imbtn_UpdateClient_Click" OnClientClick="this.disabled='disabled'" />
Avatar of Brian

ASKER

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.
you mean form is not submitted? imbtn_UpdateClient_Click not fired at all?
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

Avatar of Brian

ASKER

>> 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.
Avatar of Brian

ASKER

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

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

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

Avatar of Brian

ASKER

Hi HainKurt,

Yes, that worked VERY well.

Thank you!!
which one worked :)
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?
Avatar of Brian

ASKER

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

Avatar of Brian

ASKER

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. <% ... %>).
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";



Avatar of Brian

ASKER

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. <% ... %>).
post the code you have... there must be something else...
does error goes away when you remove those lines from js?
Avatar of Brian

ASKER

Yes, the error goes away after I remove those lines.
Avatar of Brian

ASKER

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>
try removing

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

if you do not need this feature and put the code back into js
Avatar of Brian

ASKER

I need that feature.
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Brian

ASKER

Thank you!!