Hi, I'm new in JavaScript. I'm using 2 function first is to check if textbox is empty and another one is to show please wait box while it saves the data.
function validate()
{
if (document.getElementById("<%=txtExName.ClientID%>").value == "")
{
alert("Enter Executive Details");
document.getElementById("<%=txtExName.ClientID%>").focus();
return false;
}
Another is
$(function() {
$('#<%= btnSave.ClientID %>').click(function() {
$.blockUI({ message: '<h2>Please wait..</h2>' });
});
});
How could I write if all the validations are correct then show please wait message.
Thanx
If all you want to do on your button click is validate and then BlockUI if the validation is successful, then you can as well use the OnClientClick property of your asp button. When validation is successful, UI gets blocked and button submit happens. If
validation is unsuccessful, then blockUI is not called and submit does not happen because we return false. This is just a variation of what Anup has posted above without overriding default button click.
There is a small error in above script of yours. When validate is successful, blockUI is called. But irrespective of the validation, the button is submitted. the code should have been like
$('#<%= btnSave.ClientID %>').click(function() {
var isValid = validate();
if (isValid)
$.blockUI({ message: '<h2>Please wait..</h2>' });
//return isvalid. If it is true, button submits. If it is false, button will not submit
return isValid;
});
Sincerely,
Hari Vemuri
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
ravininave
Member
158 Points
197 Posts
How to use 2 Javascript functions
Jun 14, 2011 06:15 PM|LINK
Hi, I'm new in JavaScript. I'm using 2 function first is to check if textbox is empty and another one is to show please wait box while it saves the data.
function validate() { if (document.getElementById("<%=txtExName.ClientID%>").value == "") { alert("Enter Executive Details"); document.getElementById("<%=txtExName.ClientID%>").focus(); return false; } Another is $(function() { $('#<%= btnSave.ClientID %>').click(function() { $.blockUI({ message: '<h2>Please wait..</h2>' }); }); }); How could I write if all the validations are correct then show please wait message. ThanxA1ien51
All-Star
29935 Points
5821 Posts
Re: How to use 2 Javascript functions
Jun 14, 2011 06:44 PM|LINK
$('#<%= btnSave.ClientID %>').click(function() { if(validate())$.blockUI({ message: '<h2>Please wait..</h2>' });});ravininave
Member
158 Points
197 Posts
Re: How to use 2 Javascript functions
Jun 14, 2011 06:51 PM|LINK
I'm using like this. bt it's nt working. Is there something wrong in my code
<script type="text/javascript"> $(function() { $('#<%= btnSave.ClientID %>').click(function() { if (validate()) $.blockUI({ message: '<h2>Please wait..</h2>' }); }); }; </script> <script language="javascript" type="text/javascript"> function validate() { if (document.getElementById("<%=txtExName.ClientID%>").value == "") { alert("Enter Executive Details"); document.getElementById("<%=txtExName.ClientID%>").focus(); return false; } } </script>asteranup
All-Star
30184 Points
4906 Posts
Re: How to use 2 Javascript functions
Jun 15, 2011 09:59 AM|LINK
Hi,
Check below post-
http://forums.asp.net/p/1620326/4457438.aspx/1?Re+Show+wait+message+on+submit
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
ravininave
Member
158 Points
197 Posts
Re: How to use 2 Javascript functions
Jun 16, 2011 06:05 AM|LINK
Thanx 4 reply bt I'm validating many fields as u can see and then when submit even fires it should shows wait mess
asteranup
All-Star
30184 Points
4906 Posts
Re: How to use 2 Javascript functions
Jun 16, 2011 07:10 AM|LINK
Hi,
This code should work for you-
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript" src="https://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.34"></script> <script type="text/javascript"> $(document).ready(function() { $('#Button1').click(function(e) { if (validate()) $.blockUI({ message: '<h2>Please wait..</h2>' }); else return false; }); }); function validate() { if (document.getElementById("<%=txtExName.ClientID%>").value == "") { alert("Enter Executive Details"); document.getElementById("<%=txtExName.ClientID%>").focus(); return false; } else return true; } </script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="txtExName" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </form> </body> </html>protected void Button1_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(6000); }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
hvemuri
Member
314 Points
53 Posts
Re: How to use 2 Javascript functions
Jun 16, 2011 12:39 PM|LINK
If all you want to do on your button click is validate and then BlockUI if the validation is successful, then you can as well use the OnClientClick property of your asp button. When validation is successful, UI gets blocked and button submit happens. If validation is unsuccessful, then blockUI is not called and submit does not happen because we return false. This is just a variation of what Anup has posted above without overriding default button click.
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript" src="https://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.34"></script> <script type="text/javascript"> function ValidateAndBlock() { if (document.getElementById("<%=txtExName.ClientID%>").value == "") { alert("Enter Executive Details"); document.getElementById("<%=txtExName.ClientID%>").focus(); return false; } else { $.blockUI({ message: '<h2>Please wait..</h2>' }); return true; } } </script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="txtExName" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="return ValidateAndBlock();" /> </form> </body> </html>Since you are using jquery plugins, I suggest using Jquery Validation plugin
Hari Vemuri
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
hvemuri
Member
314 Points
53 Posts
Re: How to use 2 Javascript functions
Jun 16, 2011 12:43 PM|LINK
There is a small error in above script of yours. When validate is successful, blockUI is called. But irrespective of the validation, the button is submitted. the code should have been like
$('#<%= btnSave.ClientID %>').click(function() { var isValid = validate(); if (isValid) $.blockUI({ message: '<h2>Please wait..</h2>' }); //return isvalid. If it is true, button submits. If it is false, button will not submit return isValid; });Hari Vemuri
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
ravininave
Member
158 Points
197 Posts
Re: How to use 2 Javascript functions
Jun 17, 2011 12:15 AM|LINK
Thanx, it solves my issue. thanx again 4 ur gr8 support.