Forum Moderators: open

Message Too Old, No Replies

Javascript form validation and redirect to thank you page.

I need to use only javscript for this

         

AliciaHarper

5:23 am on Apr 23, 2008 (gmt 0)

10+ Year Member



I have to validate the form and then redirect (up successful submission) to a thankyou page.

here is my code:

<form action="mailto:info@rmfs.org?subject=Music Festival Volunteer" method="post" enctype="text/plain" onSubmit= "return checkrequired(this)">

<p class="regtext" ><b style='color:red'>*</b> fields marked with a asterisk are required</p>
<table width="100%" border="0" cellpadding="0" cellspacing="8" class="regtext">
<tr>
<td width="54%"><b style='color:red'>*</b>First Name:
<td colspan="2"><input type='text' name='requiredFirstName' id='FirstName' size='20' maxlength='20' value='' /></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Last Name:</td>
<td colspan="2"><span class="ftbl_row_2a">
<input type='text' name='requiredLastName' id='LastName' size='20' maxlength='24' value='' />
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Street Address:</td>
<td colspan="2"><span class="ftbl_row_1a">
<input type='text' name='requiredStreetAddress' id='StreetAddress' size='20' maxlength='24' value='' />
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>City:</td>
<td colspan="2"><span class="ftbl_row_2a">
<input type='text' name='requiredCity' id='City' size='20' maxlength='20' value='' />
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Province:</td>
<td colspan="2"><span class="ftbl_row_1a">
<input type='text' name='requiredProvince' id='Province' size='4' maxlength='4' value='' />
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Postal Code:</td>
<td colspan="2"><span class="ftbl_row_2a">
<input type='text' name='requiredPostalCode' id='PostalCode' size='20' maxlength='20' value='' />
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Home Phone:</td>
<td colspan="2"><span class="ftbl_row_1a">
<input type='text' name='requiredHomePhone' id='HomePhone' size='16' maxlength='16' value='' />
</span></td>
</tr>
<tr>
<td>Cell Phone:</td>
<td colspan="2"><span class="ftbl_row_2a">
<input type='text' name='CellPhone' id='CellPhone' size='16' maxlength='16' value='' />
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Email address:</td>
<td colspan="2"><span class="ftbl_row_1a">
<input type='text' name='requiredEmail' id='Email' size='20' maxlength='20' value='' />
</span></td>
</tr>
<tr>
<td>Have you volunteered before?</td>
<td colspan="2"><span class="ftbl_row_2a">
<label accesskey=''>
<input type='checkbox' name='VolunteeredBefore' id='VolunteeredBefore[0]' value='No' />
</label>
No
<label accesskey=''>
<input type='checkbox' style="padding-right:10px;" name='VolunteeredBefore' id='VolunteeredBefore[1]' value='Yes' />
</label>
Yes </span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Position:</td>
<td colspan="2"><span class="ftbl_row_1a">
<select name='Position' id='Position'>
<option value='Reception'>Reception</option>
<option value='Adjudicator Asst '> Adjudicator Asst</option>
<option value='Any'> Any</option>
</select>
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Best Days Available:</td>
<td colspan="2"><span class="ftbl_row_2a">
<select name='BestDays' style="width:90px;" id='BestDays'>
<option value='Weekday'>Weekday</option>
<option value=' Weekend'> Weekend</option>
<option value=' Any'> Any</option>
</select>
</span></td>
</tr>
<tr>
<td><b style='color:red'>*</b>Best Times Available:</td>
<td colspan="2"><span class="ftbl_row_1a">
<select name='BestTimesAvailable' id='BestTimesAvailable'>
<option value='Morning'>Morning</option>
<option value=' Afternoon'> Afternoon</option>
<option value=' Evening'> Evening</option>
<option value=' Any'> Any</option>
</select>
</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="19%"><div align="right">
<input type='reset' name='reset' value='Clear Form' />
</div></td>
<td width="27%"> <input type='submit' name='submit' value='Submit Form' /></td>
</tr>
</table>

</form>

and here is my current javascript:

function checkrequired(which) {
var pass=true;
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,8)=="required") {
if (((tempobj.type=="text"¦¦tempobj.type=="textarea")&&
tempobj.value=='')¦¦(tempobj.type.toString().charAt(0)=="s"&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(8,30).toUpperCase();
alert("The "+shortFieldName+" field is a required field.");
return false;
} else {
return true;
}
}

Is it possible to do the re-direct in the external javascript file? Such as if else, return true and redirect?

ANy help would be greatly appreciated - I have been struggling with this for awhile.

httpwebwitch

11:30 pm on Apr 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



(bump)

anyone?