Validating a form and not Losing data??
I have an HTML form with just a few radio and text boxes...I will ask the users to fill out their Name, Department, and Manager name...
I need to validate that they actually filled in these fields befor they can submit the form...
So I placed a Javascript function that will do this, the only problem I see is that if the user failed to complete a required field, then it clears the form...
All I want it to do is alert the user of the field(s) that need to be completed and then stop the process of the submit without losing the data on the form....
Here is the code I have thus far:
Code:
<html>
<title>Mystery Shop Quiz</title>
<head>
<SCRIPT language="JavaScript"><!--
function verify() {
var themessage = "You are required to complete the following fields: ";
if (document.f2.Name.value=="") {
themessage = themessage + " - Your Name";
alert(themessage);
return false;
}
if (document.f2.Department.value=="") {
themessage = themessage + " - Your Department";
alert(themessage);
return false;
}
if (document.f2.Manager.value=="") {
themessage = themessage + " - Your Manager Name";
alert(themessage);
return false;
}
//alert if fields are empty and cancel form submit
//if (themessage == "You are required to complete the following fields: ") {
document.f2.submit();
//}
//else {
//alert(themessage);
//return false;
// }
}
// End -->
</script>
<table border="0" cellpadding="1" cellspacing="0" >
<tr><td valign="top" align="left">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR VALIGN=top><CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TD WIDTH="272"><FONT SIZE=2><img name="DIRECT BANKING-MAINHSBC LOGO" src="http://het7/hsbclogo.gif" border="0"></img></FONT>
</TD><TD WIDTH="848"><div align=right><img name="Mystery HEADING" src="http://het7/Mystery_Head.gif"</TD></TR></div>
</TABLE>
</CENTER></TD></TR>
</td></tr>
</table>
<hr width = 100%>
<center>
<font size = 2 color="330099"><b>Please enter your Name, Department, and Manager Name below:</b></font><br>
<p>
<form name=f2 action="http://het7/MysteryIn.jsp" Method = "post" onSubmit="verify();"><font size=3 color="990033">
<font size=2>Your Name: <input type = Text Name = Name></font>
<font size=2>Department: <input type = Text Name = Department></font>
<font size=2>Manager: <input type = Text Name = Manager></font>
</Center>
<p>
<font size=2 color="330099"><b>If a customer has a question on a Business Card which of the following numbers do you use to warm transfer?:</b></font>
<br>
<input type=radio value="866-341-5203 - Correct" name=q1><font size=2>866-341-5203<br></font>
<input type=radio value="866-541-5203 - Incorrect" name=q1><font size=2>866-541-5203<br></font>
<input type=radio value="866-341-5103 - Incorrect" name=q1><font size=2>866-341-5103<br></font>
<input type=radio value="800-975-4722 - Incorrect" name=q1><font size=2>800-975-4722<p></font>
<font size=2 color="330099"><b>When Cold Transfer is in effect, does this mean that you can cold transfer to the Branches?:</b></font>
<br>
<input type=radio value="Yes - Correct" name=q2><font size=2>Yes<br></font>
<input type=radio value="No - InCorrect" name=q2><font size=2>No<br></font>
<p>
<font size=2 color="330099"><b>If a customer calls to do a wire transfer over the phone, <br>you should :</b></font>
<br>
<input type=radio value="Call branch - Incorrect" name=q3><font size=2>explain to the customer that they will need to call their branch<br></font>
<input type=radio value="Complete the trasfer - Incorrect" name=q3><font size=2>proceed by gathering all information from the customer to complete the wire transfer<br></font>
<input type=radio value="Inform of Procedures - Correct" name=q3><font size=2>explain the procedures on how to fax their request with their TAC<br></font>
<input type=radio value="Transfer to Supervisor - Incorrect" name=q3><font size=2>transfer the customer to your Supervisor<p></font>
<br>
<center>
<input type=submit value='Submit'>
</FORM>
</center>
</body>
</head>
</html>
Please let me know what I can do to accomplish this task.
Thank you very much!!
