Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Prevent Multiple Clicks to Button Control

Posted on 2011-02-11
30
Medium Priority
?
597 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 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 61

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 61

Expert Comment

by:HainKurt
ID: 34872242
try

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

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 61

Expert Comment

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

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 61

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 61

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 61

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 61

Expert Comment

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

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 61

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 61

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 61

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 61

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 61

Accepted Solution

by:
HainKurt earned 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Suggested Courses

927 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