Click to See Complete Forum and Search --> : OnSubmit


celtic5544
11-06-2003, 09:26 AM
I have this lovely javascript for a validation form, but have NO clue how to do the onSubmit part. Any ideas?

<title>Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="factset.css" type="text/css">
<script language="JavaScript" type="text/JavaScript">
function submitForm(strAction, id){
document.editForm.hId.value = id
document.editForm.hAction.value = strAction

if (strRegType.value == "" ){
alert ("Please enter Registration Type")
return (false);
}
else if (document.editForm.strFirstName.value == "" ){
alert ("First Name can't be empty")
return (false);
}
else if (document.editForm.strLastName.value == "" ){
alert ("Last Name can't be empty")
return (false);
}
else if (document.editForm.strBadgeName.value == "" ){
alert ("Badge Name can't be empty")
return (false);
}
else if (document.editForm.strCompany.value == "" ){
alert ("Company can't be empty.")
return (false);
}
else if (document.editForm.strAddress1.value == "" ){
alert ("Address can't be empty.")
return (false);
}
else if (document.editForm.strCity.value == "" ){
alert ("City can't be empty.")
return (false);
}
else if (document.editForm.strState.value == "" ){
alert ("State can't be empty.")
return (false);
}
else if (document.editForm.strZip.value == "" ){
alert ("Zip code can't be empty.")
return (false);
}
else if (document.editForm.strCountry.value == "" ){
alert ("Country can't be empty.")
return (false);
}
else if (document.editForm.strPhone.value == "" ){
alert ("Phone Number can't be empty.")
return (false);
}
else if (document.editForm.strEmail.value == "" ){
alert ("Email Address can't be empty.")
return (false);
}
else if (document.editForm.strPaymentType.value == "" ){
alert ("Please Enter a payment type!")
return (false);
}
else if (document.editForm.curAmountDue.value == "" ){
alert ("Current Amount Due can't be empty!")
return (false);
}
else if (document.editForm.curAmountPaid.value == "" ){
alert ("Current Amount Paid can't be empty!")
return (false);
}

document.editForm.submit()
}

}

function submitFormAddHotel(strAction, id){
document.addHotelForm.hId.value = id
document.addHotelForm.hAction.value = strAction

if(document.addHotelForm.strHADDate.value == ""){
alert("Arrival Date can't be empty!")
return(false);
}
else if (document.addHotelForm.strHDDDate.value == "" ){
alert ("Departure Date can't be empty!")
return (false);
}
else if (document.addHotelForm.strHotelCCNumber.value == "" ){
alert ("Please enter Hotel Credit Card Number.")
return (false);
}
else if (document.addHotelForm.strHotelExpMonth.value == "" ){
alert ("Expired Month can't be empty.")
return (false);
}
else if (document.addHotelForm.strHotelExpYear.value == "" ){
alert ("Expired Year can't be empty.")
return (false);
}
document.addHotelForm.submit()
}

function submitFormAddContact(strAction, id){
document.addContactForm.hId.value = id
document.addContactForm.hAction.value = strAction

if(document.addContactForm.strAltName.value == ""){
alert("Contact Name can't be empty!")
return(false);
}
else if (document.addContactForm.strAltPhone.value == "" ){
alert ("Contact Phone can't be empty!")
return (false);
}
else if (document.addContactForm.strAltEmail.value == "" ){
alert ("Contact Email can't be empty!")
return (false);
}

document.addContactForm.submit()
}

function submitFormAddGuest(strAction, id){
document.addGuestForm.hId.value = id
document.addGuestForm.hAction.value = strAction

if(document.addGuestForm.strGuestFirst.value == ""){
alert("Guest First Name can't be empty!")
return(false);
}
else if (document.addGuestForm.strGuestLast.value == "" ){
alert ("Guest Last Name can't be empty!")
return (false);
}
document.addGuestForm.submit()
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name="frmRegister" action="redirectA.asp" method="post" onSubmit="???????????????????????????? ">

pyro
11-06-2003, 09:44 AM
Since it seems that all you are doing is checking if the fields are empty, you would benefit a great deal from using a loop. Take a look at the following links:

http://www.infinitypages.com/research/formvalidation.htm
http://www.infinitypages.com/research/formvalidation_2.htm

celtic5544
11-06-2003, 09:59 AM
Oh that is totally cool. But how to I use that in the stuff I have? I am SOOO new at this and it is not clicking in my head yet.

The thing is....I also need to be able to say if they are staying at a hotel it needs to alert and say hey you need to fill out the Credit Card information. And if you say no it does not do that same alert. Same with if they bring a guest.

Here is the HTML Code I have basically (had to cut some things out)...
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name="frmRegister" action="redirectA.asp" method="post" onSubmit="return submitForm(this);">

<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Registration Type </td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <select name="strRegType" type="text" id"strRegType">
<option selected value="">Select</option>
<option value="Customer">Customer</option>
<option value="Speaker">Speaker</option>
<option value="Sponsor">Sponsor</option>
<option value="Staff">Staff</option>
</select> <font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" height="24" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> First Name:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input name="strFirstName" type="text" id="strFirstName" maxlength="100">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Last Name:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strLastName" maxlength="100">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" height="24" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Preferred First Name for Badge
ID:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strBadgeName" maxlength="50">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Company:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strCompany" maxlength="255">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" class="main"> <h1 class="subheading">Contact Information
</h1></td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp;</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Email Address:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strEmail" maxlength="100">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Phone Number:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strPhone" maxlength="15">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Business Address:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strAddress1" maxlength="100">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp; </td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strAddress2" maxlength="50">
</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp; </td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strAddress3" maxlength="50">
</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> City:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strCity" maxlength="50">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> State:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <select name="strState">
<option value="" selected>Select
<option value="N/A">Not Applicable
<option value="AK">AK
<option value="WY">WY </select></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Zip / Postal Code:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <input type="text" name="strZip" maxlength="20">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Country:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <select name="strCountry">
<option selected> United States
<option>Albania</option>
</select> <font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp;</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp;</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" class="main"> <h1 class="subheading">Hotel Information </h1></td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp;</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Exp. Month:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <select name="strHotelExpMonth">
<option value="" selected>Select</option>
<option value="01">Jan</option>

</select> <font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main"> Exp. Year:</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main"> <select name="strHotelExpYear">
<option value="" selected>Select</option>
<option value="03">2003</option>
</select>
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td class="main"><div align="right">Referral Name:</div></td>
<td class="main">&nbsp;</td>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td colspan="3" class="main">Are you interested in sponsorship opportunities?</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" valign="top" class="main">&nbsp;</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" valign="top" class="headercontrol">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" valign="top" class="main">&nbsp; </td>
<td width="9" class="main">&nbsp;</td>
<td width="348" valign="top" class="main">&nbsp; </td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td colspan="3" class="main">Please call the conference hotline at <b><font color="#000000">877-744-3029</font></b>
with questions. </td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp;</td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td colspan="3" class="main"> <a href="javascript:void(0)" onClick="formReset()"><img src="images/clear.gif" alt="Clear" border="0"></a>&nbsp;&nbsp;
<input name="Submit" type="image" value="Proceed to Payment" src="images/proceed.gif" alt="Proceed to Payment">
</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td width="301" align="right" class="main">&nbsp; </td>
<td width="9" class="main">&nbsp;</td>
<td width="348" class="main">&nbsp;</td>
</tr>
<tr>
<td width="1" bgcolor="#FFFFFF">&nbsp;</td>
<td colspan="3" class="main"> <p>
<br>
</p></td>
</tr>

pyro
11-06-2003, 11:07 AM
Add this between the <head> tags:

<script language="javascript" type="text/javascript">

function validate(frm) {
msg = "Please fill out the following fields:\n";
x = 0;
for (i=0; i<frm.elements.length; i++) {
if(/^\s*$/.test(frm.elements[i].value)) {
msg += frm.elements[i].name+"\n";
x = 1;
}
}
if (x == 1) {
alert (msg);
return false;
}
}
</script>Then, change your onsubmit handler to look like this:

onsubmit="return validate(this);"

celtic5544
11-06-2003, 11:11 AM
Ok but how do I deal with things like if they pick yes for the hotel then they have to fill out other things.