Submit My Question - Recent Questions - Recent Answer

Msdn Tech >> Feedback for forums and MSDN websites >> Off-Topic Posts (Do Not Post Here)

How to code Javascript for a Command Button

I have been scouring the Internet for examples on linking Javascript code to a command button. Here is the scenario:
The business rules for the form I have created are complex. The screen has textboxes for SSN, Last Name, First Name & Middle Name/Middle Initial, and finally, DOB. I need to code the "Submit" button on my form to execute client-side validation to ensure the following scenarios:
No fields are blank. <-- I can probably leave this as server side.
If the SSN is entered, then the name fields and DOB cannot be entered
If the First Name Middle Name is populated, then the Last Name cannot be blank
If the DOB is entered, the SSN cannot be populated
In the event the above rules pass validation, then the form will build the necessary SQL to perform a data lookup and populate a Datagrid on a new form.
As I stated, I can't find examples that show how to execute Javascript from a Command Button.
Thanks,
Finkle

[991 byte] By [Mr.Finkle] at [2008-1-21]

«« OpenMP vcomp.dll problem
»» Possible Hosting Process problem

# 1

The best way would probably be to use the Validator controls that are part of ASP.NET and will automatically generate the javascript for you.

You would use RequiredFieldValidator's and RegularExpressionValidator's for this form.

The upside is that these will produce client-side javascript and can be used to double-check on the server as well.

If you would like to see some of these in action, look here: http://consultutah.com/post.aspx

consultutah at 2007-10-6 >

top of Msdn Tech,Feedback for forums and MSDN websites,Off-Topic Posts (Do Not Post Here)...

# 2

consultutah wrote:
The best way would probably be to use the Validator controls that are part of ASP.NET and will automatically generate the javascript for you.
You would use RequiredFieldValidator's and RegularExpressionValidator's for this form.
The upside is that these will produce client-side javascript and can be used to double-check on the server as well.
If you would like to see some of these in action, look here: http://consultutah.com/post.aspx

I don't think you understand my question. We have complex business rules. SSN and name cannot both be entered. Neither can the SSN and the DOB. I have to have some type of validation in place that will check the entire form, client side, and note any validation errors. I can't make any one particular field mandatory.

Mr.Finkle at 2007-10-6 >

# 3

Sorry about that. I read your original message a little too quickly. So, what you are looking for is more like this: http://consultutah.com/samples/hookevents.aspx

The magic is in the javascript that you can see if you view the page source in IE. Note that even though you check rules on the client-side, you should re-check them on the server-side as well. This code will not work if they have javascript disabled or are on a down-level browser. It does work in IE 6 and FireFox 1.5.

Here is the full page source:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
}
void SubmitButton_Clicked(object sender, EventArgs e)
{
// You will want to verify that all of the client-side
// rules here on the server-side too. You don't want them
// script kiddies showing you up... ;-)
this.Response.Write("Form Submitted");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Please enter one or the other:</td>
</tr>
<tr>
<td>SSN:</td>
<td>
<asp:TextBox ID="SsnField" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>DOB:</td>
<td>
<asp:TextBox ID="DobField" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Clicked" />
</td>
</tr>
</table>
<script language='javascript'></script>
</div>
</form>
</body>
</html>

consultutah at 2007-10-6 >

# 4

I like your example, but it does not appear to work in ASP.Net. Every time I click on the Submit button I have coded in my code, nothing happens.

This is an in-house tool, so I'm not too worried about people trying to hack the system; however, I will incorporate server-side validation as a precaution. I am in the learning stages of Javascript and .Net programming, having come from a background of Cobol and Adabas Natural for the past 10 years.

Here is a copy of the HTML of my program:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="Privacy.WebForm1" debug="True"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Airmen Certification System</title>
<meta content="True" name="vs_showGrid">
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="JavaScript">
//Define the Global Variables here
var curr_Date = new Date()
var str_Date = ((curr_Date.getMonth() + 1) + '/' + (curr_Date.getDate()) + '/' + (curr_Date.getFullYear()))
var s_Date = ((curr_Date.getMonth() + 1) + (curr_Date.getDate()) + (curr_Date.getFullYear()))
var dtCh="/"
var minYear=1850
var chk_Date
var f_date
//End Definition of Global Variables
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}

function stripCharsInBag(s, bag){
var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}

function isDate(dtStr){
var daysInMonth = DaysArray(12)
var pos1=dtStr.indexOf(dtCh)
var pos2=dtStr.indexOf(dtCh,pos1+1)
var strMonth=dtStr.substring(0,pos1)
var strDay=dtStr.substring(pos1+1,pos2)
var strYear=dtStr.substring(pos2+1)
strYr=strYear
if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
for (var i = 1; i <= 3; i++) {
if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
}
month=parseInt(strMonth)
day=parseInt(strDay)
year=parseInt(strYr)
if (strMonth.length<1 || month<1 || month>12){
alert("Please enter a valid month")
return false
}
if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
alert("Please enter a valid day")
return false
}
// Any two digit year has the century 19 appended to the front per CAIS standards
if (strYear.length == 2){
var x = 19
strYear=(x) + (strYear)
return true
} else if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
return false
}
//The following calls a function that uses two parameters
if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
alert("Please enter a valid date")
return false
}
chk_Date = strMonth + "/" + strDay + "/" + strYear
if (chk_Date > str_Date){
alert("Date cannot be greater than the current date")
return false
}
if (document.Form1.s_Type.value == "DOB")
if ((curr_Date.getFullYear() - strYear < 12)){
alert("DOB must compute to 12 or Greater" + strYear)
return false
}
return true
}

//If the DOB is passed, then the isDate function is called once. If a 'From' and 'Thru' date
//scenario is used, then the function exectutes successively to insure both dates are validated
//and passed into the 'from_Date' and 'thru_Date' parameters.
function val_DateFrom(oSrc, args){
args.Value = (document.Form1.txtFromMM.value) + '/' + (document.Form1.txtFromDD.value) + '/' + (document.Form1.txtFromYY.value)
if (isDate(args.Value)==false){
args.IsValid = false
}else{
f_Date = chk_Date
document.Form1.thru_Date.value = f_Date
}
}

Mr.Finkle at 2007-10-6 >

# 5

I've built numerous web forms which required similar constraints. The way I handled them is by not implementing .Net functionality at all. Rather, I write JavaScript functionality and prevent the OnSubmit event from occurring if validation fails.

Something like this:

<form id="frmSubmit" runat="Server">
<input type="submit" id="btnSubmit" runat="Server" OnClick="return PerformValidation();" />
<script language="JavaScript">
<!--
function PerformValidation() {
var blnSuccessful = false;

// Validation here ....... business rules checked.....
if (true)
blnSuccessful = true;
else
blnSuccessful = false;

return blnSuccessful;
}
//-->
</script>
</form>

That way, if validation fails, the form doesn't post back.

DotNetFun at 2007-10-6 >

# 6

Well, I played with the form and discovered that even if the Submit Button (or in my case the Search Button) is depressed, the validation takes affect and won't process any further.
My newest problem with with the date validation. As you can see, once my val_FromDate function completes there is a variable called chk_Date that has the validated and properly formatted date. I need to pass that value *BACK* to .Net to use in an SQL lookup. For example, when the val_FromDate function receives 011299 the return date will be 1/12/1999, and I need 1/12/1999 to be sent back to my ASP.Net form for my SQL query. I have tried using the following in my valDateFrom_ServerValidate:
If args.IsValid = True Then
from_Date = args.Value
End If
Unfortunately, it appears that args.Value will only contain what was sent to Javascript for validating, which is '99'. I have tried to over ride that on the Javascript side to no avail. I forsee the need for this ability in many future projects.

Mr.Finkle at 2007-10-6 >

# 7

RE: I need 1/12/1999 to be sent back to my ASP.Net form for my SQL query

Store it in a hidden field before submitting the form back to ASP.NET.

DotNetFun at 2007-10-6 >

# 8

No, I want 1/12/1999 sent to my form BACK from Javascript editing.

Mr.Finkle at 2007-10-6 >

# 9

Yes, this is possible by storing it in a hidden INPUT control and POSTing it back to .Net.

DotNetFun at 2007-10-6 >

# 10

The date is being passed via a hidden field to Javascript. A code example of how to pass 12/31/1999 back to my code behind would more more helpful than saying it can be done.

Mr.Finkle at 2007-10-6 >

Feedback for forums and MSDN websites Hot Topic

Feedback for forums and MSDN websites New Topic

Feedback for forums and MSDN websites

Java / MSDN / Linux Tech / PHP Tech / MSDN DotNet / MSDN TECH / Health Library / Programmers Tech / visual basic Tech / Developer Tech / Ipod faqs / Msdn China Tech