I need some help with with the first drop down box. Instead of changing the bg color, how do I make each value select a particular picture?
Also, if this is possible. Could you give me the code on how to verify the Credit Card expirary date in the format of eg Mar06.
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "<HTML>
<HEAD>
<TITLE>OrderIt Post Page</TITLE>
<META NAME="author" CONTENT="Roger Gale">
<SCRIPT TYPE="text/javascript">
<!--
function checkIt()
{
var postCode = window.document.OrderForm.postal.value;
var emailAdd = window.document.OrderForm.email.value;
var cCardLength = window.document.OrderForm.ccnum.value;
var x =0;
if(postCode.length <= 6)
{
alert("Postal Code is not 7 characters long.");
x=1;
}
if(cCardLength.length <= 15)
{
alert("Credit card number must be 16 characters long.");
x=1;
}
if(emailAdd.indexOf("@") =="-1")
{
alert("Invalid email address.");
x=1;
}
if (x ==1)
return(false);
else
return(true);
}
function Upper()
{
document.OrderForm.first.value = document.OrderForm.first.value.toUpperCase();
}
function upperLast()
{
document.OrderForm.last.value = document.OrderForm.last.value.toUpperCase();
}
//checks credit card for a number. it is not working right now.
function isInt(string)
{
var val = parseInt(string);
return(val > 0);
}
//checks cred card year. not working right now.
function cCardYear()
{
var cardYear = document.OrderForm.ccnum;
if (isInt(cardYear.value))
{
alert("Use rank name, not rank number.");
return(false);
}
return(true);
}
//selects event picture. This is what I need help with!
function changeImage()
{
var selection = document.OrderForm.event;
document.bgColor = selection.options[selection.selectedIndex].value;
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#F0F0F0">
<H1>OrderIt Post Page</H1>
<P>
<FORM ACTION="servlet/OrderIt"
NAME="OrderForm"
onSubmit="return(checkIt())">
<BR>
<TABLE>
<TR>
<TD>Select your event:</TD>
<TD>
<SELECT NAME="event" onChange="changeImage()">
<OPTION VALUE="none">Please Select an Event</OPTION>
<OPTION VALUE="mice">The Three Blind Mice on March 25th </OPTION>
<OPTION VALUE="proud">Proud - a play - on April 7</OPTION>
<OPTION VALUE="sopranos">The Three Sopranos on May 25</OPTION>
</SELECT>
</TD><TD ROWSPAN="13"><IMG SRC="Theater.gif"></TD>
</TR>
<TR>
<TD>Select the seat location:</TD>
<TD>
<SELECT NAME="seatloc">
<OPTION VALUE="A">Section A </OPTION>
<OPTION VALUE="B">Section B </OPTION>
<OPTION VALUE="C">Section C </OPTION>
<OPTION VALUE="D">Section D </OPTION>
<OPTION VALUE="E">Section E </OPTION>
<OPTION VALUE="F">Section F </OPTION>
<OPTION VALUE="G">Section G </OPTION>
<OPTION VALUE="H">Section H </OPTION>
<OPTION VALUE="I">Section I </OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>
Type in your preferred seat number:</TD>
<TD>
<INPUT TYPE="Text" NAME="seatnum" SIZE=2 MAXLENGTH=2><BR>
</TD>
<TR>
<TD>Type in your first name:</TD>
<TD> <INPUT TYPE="Text" NAME="first" VALUE="Enter First Name" onblur="Upper()"></TD>
</TR>
<TR>
<TD>Type in your last name:</TD>
<TD><INPUT TYPE="Text" NAME="last" VALUE="Enter Last Name" onblur="upperLast()"></TD>
</TR>
<TR>
<TD>Type in the street address:</TD>
<TD><INPUT TYPE="Text" NAME="street" VALUE="Enter Street"></TD>
</TR>
<TR>
<TD>Type in your city:</TD>
<TD><INPUT TYPE="Text" NAME="city" VALUE="Enter City"></TD>
</TR>
<TR>
<TD>Type in a two letter province:</TD>
<TD><INPUT TYPE="Text" NAME="prov" SIZE="2" VALUE="BC"></TD>
</TR>
<TR>
<TD>Type in the postal code:</TD>
<TD><INPUT TYPE="Text" NAME="postal" SIZE="6"></TD>
</TR>
<TR>
<TD>Enter Credit Card Type:</TD>
<TD>
<INPUT TYPE="radio" NAME="cc" VALUE="visa">Visa<BR>
<INPUT TYPE="radio" NAME="cc" VALUE="mc">MasterCard<BR>
</TD>
</TR>
<TR>
<TD>Type in Credit Card Number:</TD>
<TD><INPUT TYPE="Text" NAME="ccnum" MAXLENGTH="16" SIZE="16"></TD>
</TR>
<TR>
<TD>Type in the expiry date:</TD>
<TD><INPUT TYPE="Text" NAME="ccdate" VALUE="May05" onblur="cCardYear()"></TD>
</TR>
<TR>
<TD>Type in your Email Address:</TD>
<TD><INPUT TYPE="Text" NAME="email"></TD>
</TR>
<TR>
<TD><INPUT TYPE="Submit"
VALUE="Send Order">
<INPUT TYPE="reset" VALUE="Reset"></TD>
</TR>
</TABLE>
</FORM>
</P>
<HR>
<P><SMALL>Created by Form Master</SMALL></P>
</BODY>
</HTML>
Also, if this is possible. Could you give me the code on how to verify the Credit Card expirary date in the format of eg Mar06.
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "<HTML>
<HEAD>
<TITLE>OrderIt Post Page</TITLE>
<META NAME="author" CONTENT="Roger Gale">
<SCRIPT TYPE="text/javascript">
<!--
function checkIt()
{
var postCode = window.document.OrderForm.postal.value;
var emailAdd = window.document.OrderForm.email.value;
var cCardLength = window.document.OrderForm.ccnum.value;
var x =0;
if(postCode.length <= 6)
{
alert("Postal Code is not 7 characters long.");
x=1;
}
if(cCardLength.length <= 15)
{
alert("Credit card number must be 16 characters long.");
x=1;
}
if(emailAdd.indexOf("@") =="-1")
{
alert("Invalid email address.");
x=1;
}
if (x ==1)
return(false);
else
return(true);
}
function Upper()
{
document.OrderForm.first.value = document.OrderForm.first.value.toUpperCase();
}
function upperLast()
{
document.OrderForm.last.value = document.OrderForm.last.value.toUpperCase();
}
//checks credit card for a number. it is not working right now.
function isInt(string)
{
var val = parseInt(string);
return(val > 0);
}
//checks cred card year. not working right now.
function cCardYear()
{
var cardYear = document.OrderForm.ccnum;
if (isInt(cardYear.value))
{
alert("Use rank name, not rank number.");
return(false);
}
return(true);
}
//selects event picture. This is what I need help with!
function changeImage()
{
var selection = document.OrderForm.event;
document.bgColor = selection.options[selection.selectedIndex].value;
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#F0F0F0">
<H1>OrderIt Post Page</H1>
<P>
<FORM ACTION="servlet/OrderIt"
NAME="OrderForm"
onSubmit="return(checkIt())">
<BR>
<TABLE>
<TR>
<TD>Select your event:</TD>
<TD>
<SELECT NAME="event" onChange="changeImage()">
<OPTION VALUE="none">Please Select an Event</OPTION>
<OPTION VALUE="mice">The Three Blind Mice on March 25th </OPTION>
<OPTION VALUE="proud">Proud - a play - on April 7</OPTION>
<OPTION VALUE="sopranos">The Three Sopranos on May 25</OPTION>
</SELECT>
</TD><TD ROWSPAN="13"><IMG SRC="Theater.gif"></TD>
</TR>
<TR>
<TD>Select the seat location:</TD>
<TD>
<SELECT NAME="seatloc">
<OPTION VALUE="A">Section A </OPTION>
<OPTION VALUE="B">Section B </OPTION>
<OPTION VALUE="C">Section C </OPTION>
<OPTION VALUE="D">Section D </OPTION>
<OPTION VALUE="E">Section E </OPTION>
<OPTION VALUE="F">Section F </OPTION>
<OPTION VALUE="G">Section G </OPTION>
<OPTION VALUE="H">Section H </OPTION>
<OPTION VALUE="I">Section I </OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>
Type in your preferred seat number:</TD>
<TD>
<INPUT TYPE="Text" NAME="seatnum" SIZE=2 MAXLENGTH=2><BR>
</TD>
<TR>
<TD>Type in your first name:</TD>
<TD> <INPUT TYPE="Text" NAME="first" VALUE="Enter First Name" onblur="Upper()"></TD>
</TR>
<TR>
<TD>Type in your last name:</TD>
<TD><INPUT TYPE="Text" NAME="last" VALUE="Enter Last Name" onblur="upperLast()"></TD>
</TR>
<TR>
<TD>Type in the street address:</TD>
<TD><INPUT TYPE="Text" NAME="street" VALUE="Enter Street"></TD>
</TR>
<TR>
<TD>Type in your city:</TD>
<TD><INPUT TYPE="Text" NAME="city" VALUE="Enter City"></TD>
</TR>
<TR>
<TD>Type in a two letter province:</TD>
<TD><INPUT TYPE="Text" NAME="prov" SIZE="2" VALUE="BC"></TD>
</TR>
<TR>
<TD>Type in the postal code:</TD>
<TD><INPUT TYPE="Text" NAME="postal" SIZE="6"></TD>
</TR>
<TR>
<TD>Enter Credit Card Type:</TD>
<TD>
<INPUT TYPE="radio" NAME="cc" VALUE="visa">Visa<BR>
<INPUT TYPE="radio" NAME="cc" VALUE="mc">MasterCard<BR>
</TD>
</TR>
<TR>
<TD>Type in Credit Card Number:</TD>
<TD><INPUT TYPE="Text" NAME="ccnum" MAXLENGTH="16" SIZE="16"></TD>
</TR>
<TR>
<TD>Type in the expiry date:</TD>
<TD><INPUT TYPE="Text" NAME="ccdate" VALUE="May05" onblur="cCardYear()"></TD>
</TR>
<TR>
<TD>Type in your Email Address:</TD>
<TD><INPUT TYPE="Text" NAME="email"></TD>
</TR>
<TR>
<TD><INPUT TYPE="Submit"
VALUE="Send Order">
<INPUT TYPE="reset" VALUE="Reset"></TD>
</TR>
</TABLE>
</FORM>
</P>
<HR>
<P><SMALL>Created by Form Master</SMALL></P>
</BODY>
</HTML>
