Solved

Prevent Multiple Clicks to Button Control

Posted on 2011-02-11
30
592 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
LVL 56

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 56

Expert Comment

by:HainKurt
ID: 34872242
try

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

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 56

Expert Comment

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

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 56

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 56

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 56

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
 
LVL 4

Author Comment

by:asp_net2
ID: 34872980
Hi HainKurt,

Yes, that worked VERY well.

Thank you!!
0
 
LVL 56

Expert Comment

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

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 56

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 56

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 56

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 56

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 56

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

Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…

622 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