Solved

Prevent Multiple Clicks to Button Control

Posted on 2011-02-11
30
570 Views
Last Modified: 2012-05-11
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?
0
Comment
Question by:asp_net2
  • 15
  • 12
  • 2
  • +1
30 Comments
 
LVL 9

Expert Comment

by:s_chilkury
ID: 34871818
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
 
LVL 9

Expert Comment

by:s_chilkury
ID: 34871828
0
 
LVL 4

Expert Comment

by:Loftbug
ID: 34871896
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34871960
onClick="this.disable='disabled'"

<button onClick="this.disabled='disabled'">test</button>
0
 
LVL 4

Author Comment

by:asp_net2
ID: 34872184
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34872242
try

imbtn_UpdateClient.attributes.add("onClick","this.disabled='disabled'")
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 34872249
or

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

Author Comment

by:asp_net2
ID: 34872333
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34872465
you mean form is not submitted? imbtn_UpdateClient_Click not fired at all?
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 34872505
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
 
LVL 4

Author Comment

by:asp_net2
ID: 34872515
>> 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
 
LVL 4

Author Comment

by:asp_net2
ID: 34872529
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34872754
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34872768
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34872773
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 4

Author Comment

by:asp_net2
ID: 34872980
Hi HainKurt,

Yes, that worked VERY well.

Thank you!!
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 34873061
which one worked :)
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 34873071
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
 
LVL 4

Author Comment

by:asp_net2
ID: 34873153
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34873161
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
 
LVL 4

Author Comment

by:asp_net2
ID: 34873280
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34873591
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
 
LVL 4

Author Comment

by:asp_net2
ID: 34873817
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34874164
post the code you have... there must be something else...
does error goes away when you remove those lines from js?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 34874221
Yes, the error goes away after I remove those lines.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 34874296
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 34874675
try removing

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

if you do not need this feature and put the code back into js
0
 
LVL 4

Author Comment

by:asp_net2
ID: 34874688
I need that feature.
0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 34875069
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
 
LVL 4

Author Closing Comment

by:asp_net2
ID: 34879412
Thank you!!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now