Controlling Button Execution Through JavaScript Function

Vishal Gilbile
11y
5.2k
0
0

Article

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:

http://www.c-sharpcorner.com/uploadfile/17e8f6/ing-values-from-javascript-functions-to-Asp-Net-functions-in-Asp-Net/

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:

create table Employee
(
     Empid int identity(1,1)not null,
     EName varchar(30)not null,
     EAge int not null,
     ESalary int not null,
     constraint pkeid primary key(Empid)
)
select * from Employee
create procedure prcAddEmp
(
     @name varchar(30),
     @age int,
     @salary int
)
as
begin
insert into Employee
values(@name,@age,@salary)
end
create procedure prcDisplayRecords
as
begin
select * from Employee
end

The following is the front-end structure:

The following is the source code for it:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
     <title>Untitled Page</title>
     <script type="text/javascript">
         function validateAge()
         {
             var age=document.forms[0]["txtAge"].value;
             if(age>=18)
                 return true;
             else
             {
                 alert("Invalid Age");
                 return false;
             }
         }
     </script>
</head>
<body>
     <form id="form1" runat="server">
         <div>
             <table>
                 <tr>
                     <td>Name:
                     </td>
                     <td>
                         <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td>Age:
                     </td>
                     <td>
                         <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td>Salary:
                     </td>
                     <td>
                         <asp:TextBox ID="txtSal" runat="server"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="2" align="right">
                         <asp:Button ID="btnSave" OnClientClick="javascript:return validateAge()" runat="server" Text="Save" OnClick="btnSave_Click" />
                     </td>
                 </tr>
             </table>
             <br />
             <asp:GridView ID="gvwData" runat="server">
             </asp:GridView>
         </div>
     </form>
</body>
</html>

The following is the code behind for it:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
     SqlConnection con;
     SqlCommand cmd;
     DataSet ds;
     string dbcon = ConfigurationManager.ConnectionStrings["myCon"].ConnectionString;
     protected void Page_Load(object sender, EventArgs e)
     {
     }
     protected void btnSave_Click(object sender, EventArgs e)
     {
         string msg = "";
         con = new SqlConnection(dbcon);
         cmd = new SqlCommand("prcAddEmp", con);
         cmd.CommandType = CommandType.StoredProcedure;
         cmd.Parameters.AddWithValue("@name", txtName.Text);
         cmd.Parameters.AddWithValue("@age", txtAge.Text);
         cmd.Parameters.AddWithValue("@salary ", txtSal.Text);
         con.Open();
         int rows = cmd.ExecuteNonQuery();
         if (rows > 0)
             msg = "<script>alert('Record Saved Successfully')</script>";
         else
             msg = "<script>alert('Error Saving Record')</script>";
         ClientScript.RegisterClientScriptBlock(this.GetType(), "Message", msg);
         con.close();
     }
}

Here is the output for it:

If the age entered is >= 18 then the following output is generated:

Or else if the age < 18:

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.

<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.

With Regards,

Vishal Gilbile.

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all