jason001
07-15-2005, 03:25 PM
I'm using some javascript code for form fields that show an initial value in each field. When a user clicks the field the initial value disappears. When I try and add "required field" script, its reading the initial value and allowing the form to process.
Here is the script:
<form action="" method="post" name="form2" onSubmit="MM_validateForm('Name','','R','Company','','R','Address','','R','City','','R','State or Region','','R','Zip Code or Postal Code','','R','Phone','','R','Email','','RisEmail');return document.MM_returnValue">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><!--DWLayoutTable-->
<TBODY>
<TR>
<TD width=515 height=422 valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="32" valign="top" class="headerborders"><div style="margin-top:15px; margin-bottom:3px"><img src="images/req_quote_header.gif" width="200" height="14"></div></td>
</tr>
<tr>
<td width="515" height="423"><div style="margin-top:25px">
<p>If you would like to request a quote please complete the form to the right. Some fields are mandatory as marked. The more complete the information provided the sooner a Sales Associate will be able to get back to you with a response. Every effort will be made to respond the same day the inquiry is received. </p>
<p class="datacenter-headers">Enter up to 3 part numbers for quoting. </p>
<table width="515">
<tr>
<td height="65" valign="middle" background="images/req_quote_arts_08.gif">
<img src="images/spacer.gif" width="1" height="42"><img src="images/req_quote_art1_03.gif" width="31" height="26" align="absbottom">
<input name="part number" type="text" class="TEXTFIELD" id="part number" onblur="if(this.value==''){this.value=' Enter Part Number'}" onclick="javascript: if(this.value==' Enter Part Number'){this.value=''}" value=" Enter Part Number" size="28">
---
<input type="text" class="TEXTFIELD" onblur="if(this.value==''){this.value=' Manufacturer'}" onclick="javascript: if(this.value==' Manufacturer'){this.value=''}" value=" Manufacturer" size="20">
---
<input name="Quantity" type="text" class="TEXTFIELD" id="Quantity" onblur="if(this.value==''){this.value=' Quantity'}" onclick="javascript: if(this.value==' Quantity'){this.value=''}" value=" Quantity" size="15">
---
<input name="Delivery Date" type="text" class="TEXTFIELD" id="Delivery Date" onblur="if(this.value==''){this.value=' Delivery Date'}" onclick="javascript: if(this.value==' Delivery Date'){this.value=''}" value=" Delivery Date" size="15"> </td>
</tr>
</table>
<table width="515">
<tr>
<td height="65" valign="middle" background="images/req_quote_arts_08.gif">
<img src="images/spacer.gif" width="1" height="42"><img src="images/req_quote_art1b_03.gif" width="31" height="26" align="absbottom">
<input name="part number" type="text" class="TEXTFIELD" id="part number" onblur="if(this.value==''){this.value=' Enter Part Number'}" onclick="javascript: if(this.value==' Enter Part Number'){this.value=''}" value=" Enter Part Number" size="28">
---
<input type="text" class="TEXTFIELD" onblur="if(this.value==''){this.value=' Manufacturer'}" onclick="javascript: if(this.value==' Manufacturer'){this.value=''}" value=" Manufacturer" size="20">
---
<input name="Quantity" type="text" class="TEXTFIELD" id="Quantity" onblur="if(this.value==''){this.value=' Quantity'}" onclick="javascript: if(this.value==' Quantity'){this.value=''}" value=" Quantity" size="15">
---
<input name="Delivery Date" type="text" class="TEXTFIELD" id="Delivery Date" onblur="if(this.value==''){this.value=' Delivery Date'}" onclick="javascript: if(this.value==' Delivery Date'){this.value=''}" value=" Delivery Date" size="15"> </td>
</tr>
</table>
<table width="515">
<tr>
<td height="65" valign="middle" background="images/req_quote_arts_08.gif">
<img src="images/spacer.gif" width="1" height="42"><img src="images/req_quote_art1c_03.gif" width="31" height="26" align="absbottom">
<input name="part number" type="text" class="TEXTFIELD" id="part number" onblur="if(this.value==''){this.value=' Enter Part Number'}" onclick="javascript: if(this.value==' Enter Part Number'){this.value=''}" value=" Enter Part Number" size="28">
---
<input type="text" class="TEXTFIELD" onblur="if(this.value==''){this.value=' Manufacturer'}" onclick="javascript: if(this.value==' Manufacturer'){this.value=''}" value=" Manufacturer" size="20">
---
<input name="Quantity" type="text" class="TEXTFIELD" id="Quantity" onblur="if(this.value==''){this.value=' Quantity'}" onclick="javascript: if(this.value==' Quantity'){this.value=''}" value=" Quantity" size="15">
---
<input name="Delivery Date" type="text" class="TEXTFIELD" id="Delivery Date" onblur="if(this.value==''){this.value=' Delivery Date'}" onclick="javascript: if(this.value==' Delivery Date'){this.value=''}" value=" Delivery Date" size="15"> </td>
</tr>
</table>
<table width="100%" cellspacing="3" >
<tr valign="middle">
<td colspan="10"><span class="style2">*</span> Enter your information in the <span class="style2">required</span> fields to proceed. <br>
<img src="images/spacer.gif" width="1" height="15"></td>
</tr>
<tr>
<td width="11%" valign="bottom"><div align="right" class="style2">3.</div></td>
<td colspan="4"><input name="Name" type="text" onblur="if(this.value==''){this.value=' Name'}" onclick="javascript: if(this.value==' Name'){this.value=''}" class="TEXTFIELD" id="Name" value=" Name" size="40"></td>
<td width="52%" colspan="5" rowspan="7"> <textarea name="SpecialInstructions" cols="40" rows="11" onblur="if(this.value==''){this.value=' Special Instructions'}" onclick="javascript: if(this.value==' Special Instructions'){this.value=''}" class="TEXTFIELD" id="SpecialInstructions"> Special Instructions</textarea></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">4.</div></td>
<td colspan="4"><input name="Company" type="text" onblur="if(this.value==''){this.value=' Company'}" onclick="javascript: if(this.value==' Company'){this.value=''}" class="TEXTFIELD" id="Company" value=" Company" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">5.</div></td>
<td colspan="4"><input name="Address" type="text" onblur="if(this.value==''){this.value=' Address'}" onclick="javascript: if(this.value==' Address'){this.value=''}" class="TEXTFIELD" id="Address" value=" Address" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">6.</div></td>
<td colspan="4"><input name="City" type="text" onblur="if(this.value==''){this.value=' City'}" onclick="javascript: if(this.value==' City'){this.value=''}" class="TEXTFIELD" id="City" value=" City" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">7.</div></td>
<td colspan="4"><input name="State or Region" type="text" onblur="if(this.value==''){this.value=' State or Region'}" onclick="javascript: if(this.value==' State or Region'){this.value=''}" class="TEXTFIELD" id="State or Region" value=" State or Region" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">8.</div></td>
<td colspan="4"><input name="Zip Code or Postal Code" type="text" onblur="if(this.value==''){this.value=' Zip Code or Postal Code'}" onclick="javascript: if(this.value==' Zip Code or Postal Code'){this.value=''}" class="TEXTFIELD" id="Zip Code or Postal Code" value=" Zip Code or Postal Code" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">9.</div></td>
<td colspan="4"><input name="Phone" type="text" onblur="if(this.value==''){this.value=' Phone'}" onclick="javascript: if(this.value==' Phone'){this.value=''}" class="TEXTFIELD" id="Phone" value=" Phone" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right">10.</div></td>
<td colspan="4"><input name="Fax" type="text" onblur="if(this.value==''){this.value=' Fax'}" onclick="javascript: if(this.value==' Fax'){this.value=''}" class="TEXTFIELD" id="Fax" value=" Fax" size="40"></td>
<td colspan="5"> Method of contact:
<input type="radio" name="Contact" value="Phone">Phone
<input type="radio" name="Contact" value="Fax">Fax
<input type="radio" name="Contact" value="Email">E-mail
</td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">11.</div></td>
<td colspan="4"><input name="Email" type="text" onblur="if(this.value==''){this.value=' E-mail'}" onclick="javascript: if(this.value==' E-mail'){this.value=''}" class="TEXTFIELD" id="Email" value=" E-mail" size="40"></td>
<td colspan="5"> Customer type?
<input type="radio" name="Customer" value="New Customer">New
<input type="radio" name="Customer" value="Existing Customer">Existing
</td>
</tr>
<tr>
<td colspan="10"><div align="center" style="margin-top:20px; margin-bottom:25px">
<input name="Submit" type="submit" class="button2" id="Submit" value="Submit">
<input name="Submit22" type="reset" class="button2" value="Reset">
</div></td>
</tr>
</table>
</div></td>
</tr>
</table></TD></TR>
</TBODY></TABLE></form>
Thanks for the help!!
-Jason
Here is the script:
<form action="" method="post" name="form2" onSubmit="MM_validateForm('Name','','R','Company','','R','Address','','R','City','','R','State or Region','','R','Zip Code or Postal Code','','R','Phone','','R','Email','','RisEmail');return document.MM_returnValue">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><!--DWLayoutTable-->
<TBODY>
<TR>
<TD width=515 height=422 valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="32" valign="top" class="headerborders"><div style="margin-top:15px; margin-bottom:3px"><img src="images/req_quote_header.gif" width="200" height="14"></div></td>
</tr>
<tr>
<td width="515" height="423"><div style="margin-top:25px">
<p>If you would like to request a quote please complete the form to the right. Some fields are mandatory as marked. The more complete the information provided the sooner a Sales Associate will be able to get back to you with a response. Every effort will be made to respond the same day the inquiry is received. </p>
<p class="datacenter-headers">Enter up to 3 part numbers for quoting. </p>
<table width="515">
<tr>
<td height="65" valign="middle" background="images/req_quote_arts_08.gif">
<img src="images/spacer.gif" width="1" height="42"><img src="images/req_quote_art1_03.gif" width="31" height="26" align="absbottom">
<input name="part number" type="text" class="TEXTFIELD" id="part number" onblur="if(this.value==''){this.value=' Enter Part Number'}" onclick="javascript: if(this.value==' Enter Part Number'){this.value=''}" value=" Enter Part Number" size="28">
---
<input type="text" class="TEXTFIELD" onblur="if(this.value==''){this.value=' Manufacturer'}" onclick="javascript: if(this.value==' Manufacturer'){this.value=''}" value=" Manufacturer" size="20">
---
<input name="Quantity" type="text" class="TEXTFIELD" id="Quantity" onblur="if(this.value==''){this.value=' Quantity'}" onclick="javascript: if(this.value==' Quantity'){this.value=''}" value=" Quantity" size="15">
---
<input name="Delivery Date" type="text" class="TEXTFIELD" id="Delivery Date" onblur="if(this.value==''){this.value=' Delivery Date'}" onclick="javascript: if(this.value==' Delivery Date'){this.value=''}" value=" Delivery Date" size="15"> </td>
</tr>
</table>
<table width="515">
<tr>
<td height="65" valign="middle" background="images/req_quote_arts_08.gif">
<img src="images/spacer.gif" width="1" height="42"><img src="images/req_quote_art1b_03.gif" width="31" height="26" align="absbottom">
<input name="part number" type="text" class="TEXTFIELD" id="part number" onblur="if(this.value==''){this.value=' Enter Part Number'}" onclick="javascript: if(this.value==' Enter Part Number'){this.value=''}" value=" Enter Part Number" size="28">
---
<input type="text" class="TEXTFIELD" onblur="if(this.value==''){this.value=' Manufacturer'}" onclick="javascript: if(this.value==' Manufacturer'){this.value=''}" value=" Manufacturer" size="20">
---
<input name="Quantity" type="text" class="TEXTFIELD" id="Quantity" onblur="if(this.value==''){this.value=' Quantity'}" onclick="javascript: if(this.value==' Quantity'){this.value=''}" value=" Quantity" size="15">
---
<input name="Delivery Date" type="text" class="TEXTFIELD" id="Delivery Date" onblur="if(this.value==''){this.value=' Delivery Date'}" onclick="javascript: if(this.value==' Delivery Date'){this.value=''}" value=" Delivery Date" size="15"> </td>
</tr>
</table>
<table width="515">
<tr>
<td height="65" valign="middle" background="images/req_quote_arts_08.gif">
<img src="images/spacer.gif" width="1" height="42"><img src="images/req_quote_art1c_03.gif" width="31" height="26" align="absbottom">
<input name="part number" type="text" class="TEXTFIELD" id="part number" onblur="if(this.value==''){this.value=' Enter Part Number'}" onclick="javascript: if(this.value==' Enter Part Number'){this.value=''}" value=" Enter Part Number" size="28">
---
<input type="text" class="TEXTFIELD" onblur="if(this.value==''){this.value=' Manufacturer'}" onclick="javascript: if(this.value==' Manufacturer'){this.value=''}" value=" Manufacturer" size="20">
---
<input name="Quantity" type="text" class="TEXTFIELD" id="Quantity" onblur="if(this.value==''){this.value=' Quantity'}" onclick="javascript: if(this.value==' Quantity'){this.value=''}" value=" Quantity" size="15">
---
<input name="Delivery Date" type="text" class="TEXTFIELD" id="Delivery Date" onblur="if(this.value==''){this.value=' Delivery Date'}" onclick="javascript: if(this.value==' Delivery Date'){this.value=''}" value=" Delivery Date" size="15"> </td>
</tr>
</table>
<table width="100%" cellspacing="3" >
<tr valign="middle">
<td colspan="10"><span class="style2">*</span> Enter your information in the <span class="style2">required</span> fields to proceed. <br>
<img src="images/spacer.gif" width="1" height="15"></td>
</tr>
<tr>
<td width="11%" valign="bottom"><div align="right" class="style2">3.</div></td>
<td colspan="4"><input name="Name" type="text" onblur="if(this.value==''){this.value=' Name'}" onclick="javascript: if(this.value==' Name'){this.value=''}" class="TEXTFIELD" id="Name" value=" Name" size="40"></td>
<td width="52%" colspan="5" rowspan="7"> <textarea name="SpecialInstructions" cols="40" rows="11" onblur="if(this.value==''){this.value=' Special Instructions'}" onclick="javascript: if(this.value==' Special Instructions'){this.value=''}" class="TEXTFIELD" id="SpecialInstructions"> Special Instructions</textarea></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">4.</div></td>
<td colspan="4"><input name="Company" type="text" onblur="if(this.value==''){this.value=' Company'}" onclick="javascript: if(this.value==' Company'){this.value=''}" class="TEXTFIELD" id="Company" value=" Company" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">5.</div></td>
<td colspan="4"><input name="Address" type="text" onblur="if(this.value==''){this.value=' Address'}" onclick="javascript: if(this.value==' Address'){this.value=''}" class="TEXTFIELD" id="Address" value=" Address" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">6.</div></td>
<td colspan="4"><input name="City" type="text" onblur="if(this.value==''){this.value=' City'}" onclick="javascript: if(this.value==' City'){this.value=''}" class="TEXTFIELD" id="City" value=" City" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">7.</div></td>
<td colspan="4"><input name="State or Region" type="text" onblur="if(this.value==''){this.value=' State or Region'}" onclick="javascript: if(this.value==' State or Region'){this.value=''}" class="TEXTFIELD" id="State or Region" value=" State or Region" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">8.</div></td>
<td colspan="4"><input name="Zip Code or Postal Code" type="text" onblur="if(this.value==''){this.value=' Zip Code or Postal Code'}" onclick="javascript: if(this.value==' Zip Code or Postal Code'){this.value=''}" class="TEXTFIELD" id="Zip Code or Postal Code" value=" Zip Code or Postal Code" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">9.</div></td>
<td colspan="4"><input name="Phone" type="text" onblur="if(this.value==''){this.value=' Phone'}" onclick="javascript: if(this.value==' Phone'){this.value=''}" class="TEXTFIELD" id="Phone" value=" Phone" size="40"></td>
</tr>
<tr>
<td valign="bottom"><div align="right">10.</div></td>
<td colspan="4"><input name="Fax" type="text" onblur="if(this.value==''){this.value=' Fax'}" onclick="javascript: if(this.value==' Fax'){this.value=''}" class="TEXTFIELD" id="Fax" value=" Fax" size="40"></td>
<td colspan="5"> Method of contact:
<input type="radio" name="Contact" value="Phone">Phone
<input type="radio" name="Contact" value="Fax">Fax
<input type="radio" name="Contact" value="Email">E-mail
</td>
</tr>
<tr>
<td valign="bottom"><div align="right" class="style2">11.</div></td>
<td colspan="4"><input name="Email" type="text" onblur="if(this.value==''){this.value=' E-mail'}" onclick="javascript: if(this.value==' E-mail'){this.value=''}" class="TEXTFIELD" id="Email" value=" E-mail" size="40"></td>
<td colspan="5"> Customer type?
<input type="radio" name="Customer" value="New Customer">New
<input type="radio" name="Customer" value="Existing Customer">Existing
</td>
</tr>
<tr>
<td colspan="10"><div align="center" style="margin-top:20px; margin-bottom:25px">
<input name="Submit" type="submit" class="button2" id="Submit" value="Submit">
<input name="Submit22" type="reset" class="button2" value="Reset">
</div></td>
</tr>
</table>
</div></td>
</tr>
</table></TD></TR>
</TBODY></TABLE></form>
Thanks for the help!!
-Jason