Reputation: 30865
I have a product page with an add to cart button
When the add to cart button is clicked, a couple of input fields are validated using ASP.NET validation controls (which use client-side validation to prevent the postback from occurring upon invalid input).
In order to prevent double-clicks from adding multiple items to the cart, I would like to disable the add to cart button after the initial click, but ONLY if validation has succeeded. (It would be rather bad to disable "add to cart" just because they goofed up an input)
Is it possible to handle the "on ASP.NET client-side validation succeeded" event in javascript?
I may just end up rolling my own validation mechanism for this page.
Upvotes: 4
Views: 1688
Reputation: 446
Building on rick schott's answer to hide the button once validation succeeds, & reshow the button if the user hits escape:
<asp:Button ID="btnProcess" runat="server" Text="Donate" OnClick="BtnProcessClick" ValidationGroup="donate" ClientIDMode="Static" onClientClick="HideBtnProcess()">
<div id="pWait" >Please wait...</div>
<script type="text/javascript">
$(document).ready(function() {
$("#pWait").hide();
});
function HideBtnProcess() {
if (Page_ClientValidate("donate")) {
$("#btnProcess").hide();
$("#pWait").show();
$(document).keyup(function (event) {
if (event.which === 27) {
$("#btnProcess").show();
$("#pWait").hide();
}
});
}
}
Upvotes: 1
Reputation: 21127
Just an example, but you can adopt this to your needs:
Markup:
<asp:button id="bla" runat="server" Text="bla" onClientClick="ValidationCatcher()" />
Script:
function ValidationCatcher()
{
//force .net validation
Page_ClientValidate();
for(i=0; i < Page_Validators.length; i++)
{
if(!Page_Validators[i].isvalid)
{
//do whatever you need to do
}
}
}
Upvotes: 2