Controlling Button Execution Through JavaScript Function

This article is basically a continuation of my previous articles of passing a value from a JavaScript function to an ASP.NET function.

This article is basically a continuation of my previous article of ing a value from a JavaScript function to an ASP.NET function, if you haven't read it then kindly go to it at the following link: 
 
 
In the above example we have made use of a hidden field to a value from a JavaScript function to an ASP.Net function so that we can validate the age of an employee by storing the value in the hidden field using the JavaScript function and then validating the age in the ASP.NET function by getting the value. The same technique can be done simply through JavaScript. But here we are not concerned with the value to be retrieved on the server side.
 
That means that on the button click event a JavaScript function would be called and it will validate whether the age is >= 18 then only the record would be stored in the database and displayed on the gridview or else an error message should be returned to the user stating that your age is invalid.
 
For doing this we need a SQL table and some procedures; here are those queries:
  1.    
  2. That means that on the button click event a JavaScript function would be called and it will validate whether the age is >= 18 then only the record would be stored in the database and displayed on the gridview or else an error message should be returned to the user stating that your age is invalid.  
  3.    
  4. For doing this we need a SQL table and some procedures; here are those queries:  
  5.    
  6. create table Employee  
  7.  (  
  8.      Empid int identity(1,1)not null,  
  9.      EName varchar(30)not null,  
  10.      EAge int not null,  
  11.      ESalary int not null,  
  12.      constraint pkeid primary key(Empid)  
  13.  )   
  14.  select * from Employee   
  15.  create procedure prcAddEmp  
  16.  (  
  17.      @name varchar(30),  
  18.      @age int,  
  19.      @salary int  
  20.  )  
  21.  as  
  22.  begin  
  23.  insert into Employee  
  24.  values(@name,@age,@salary)  
  25.  end   
  26.  create procedure prcDisplayRecords  
  27.  as  
  28.  begin  
  29.  select * from Employee  
  30.  end 
The following is the front-end structure:

front-end-structure.gif
 
The following is the source code for it:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>   
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5.     <title>Untitled Page</title>   
  6.     <script type="text/javascript">  
  7.         function validateAge()  
  8.         {  
  9.             var age=document.forms[0]["txtAge"].value;  
  10.             if(age>=18)  
  11.                 return true;  
  12.             else  
  13.             {  
  14.                 alert("Invalid Age");  
  15.                 return false;  
  16.             }  
  17.         }  
  18.     </script>   
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.         <div>  
  23.             <table>  
  24.                 <tr>  
  25.                     <td>Name:  
  26.                     </td>  
  27.                     <td>  
  28.                         <asp:TextBox ID="txtName" runat="server"></asp:TextBox>  
  29.                     </td>  
  30.                 </tr>  
  31.                 <tr>  
  32.                     <td>Age:  
  33.                     </td>  
  34.                     <td>  
  35.                         <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>  
  36.                     </td>  
  37.                 </tr>  
  38.                 <tr>  
  39.                     <td>Salary:  
  40.                     </td>  
  41.                     <td>  
  42.                         <asp:TextBox ID="txtSal" runat="server"></asp:TextBox>  
  43.                     </td>  
  44.                 </tr>  
  45.                 <tr>  
  46.                     <td colspan="2" align="right">  
  47.                         <asp:Button ID="btnSave" OnClientClick="javascript:return validateAge()" runat="server" Text="Save" OnClick="btnSave_Click" />  
  48.                     </td>  
  49.                 </tr>  
  50.             </table>  
  51.             <br />  
  52.             <asp:GridView ID="gvwData" runat="server">  
  53.             </asp:GridView>  
  54.         </div>  
  55.     </form>  
  56. </body>  
  57. </html> 
The following is the code behind for it:
  1. using System;  
  2.  using System.Configuration;  
  3.  using System.Data;  
  4.  using System.Linq;  
  5.  using System.Web;  
  6.  using System.Web.Security;  
  7.  using System.Web.UI;  
  8.  using System.Web.UI.HtmlControls;  
  9.  using System.Web.UI.WebControls;  
  10.  using System.Web.UI.WebControls.WebParts;  
  11.  using System.Xml.Linq;  
  12.  using System.Data.SqlClient;   
  13.    
  14.  public partial class _Default : System.Web.UI.Page  
  15.  {  
  16.      SqlConnection con;  
  17.      SqlCommand cmd;  
  18.      DataSet ds;  
  19.      string dbcon = ConfigurationManager.ConnectionStrings["myCon"].ConnectionString;   
  20.      protected void Page_Load(object sender, EventArgs e)  
  21.      {   
  22.      }  
  23.      protected void btnSave_Click(object sender, EventArgs e)  
  24.      {  
  25.          string msg = "";  
  26.          con = new SqlConnection(dbcon);  
  27.          cmd = new SqlCommand("prcAddEmp", con);  
  28.          cmd.CommandType = CommandType.StoredProcedure;  
  29.          cmd.Parameters.AddWithValue("@name", txtName.Text);  
  30.          cmd.Parameters.AddWithValue("@age", txtAge.Text);  
  31.          cmd.Parameters.AddWithValue("@salary ", txtSal.Text);  
  32.          con.Open();  
  33.          int rows = cmd.ExecuteNonQuery();  
  34.          if (rows > 0)  
  35.              msg = "<script>alert('Record Saved Successfully')</script>";  
  36.          else  
  37.              msg = "<script>alert('Error Saving Record')</script>";  
  38.          ClientScript.RegisterClientScriptBlock(this.GetType(), "Message", msg);  
  39.          con.close();  
  40.      }  
  41.  }
Here is the output for it:
 
If the age entered is >= 18 then the following output is generated:

validaion-through-javascript.gif

validaion-through-javascript1.gif
 
Or else if the age < 18:

validaion-through-javascript2.gif
 
The concept is quite clear; over here what we did is, in the Button declaration we added an onClientClick event which is basically a JavaScript function which returns either true (if the age value is >= 18) or else false.
  1. <asp:Button ID="btnSave" OnClientClick="javascript:return validateAge()" runat="server" Text="Save" OnClick="btnSave_Click" /> 
The default behaviour of the button is to do a post back whenever the button is clicked, but since the JavaScript function is returning true or false, whenever the JavaScript function returns false, the button's server-side code (ie Button_Click) event is not called because it stops the execution there itself.
 
Hope you have liked the article.