[SOLVED] Help with a shipping form that selects zip/postal codes

M.O.S. Studios · January 29, 2009

Hey guys, i altered this code for a shipping form, switches the from zip code to Postal code depending on the country selected, it works fine with the exception that it loads with both postal/code and zip code showing untill a country is selected,

any ideas?

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Home Brewed Jewelery</title>
</head>
<body>

<div id="container">

<br>
<br>
<center>
<table width='50%'>
  <tr width='100%'><td width='100%' align="center" valign="middle" bgcolor="#000000">
   <font size=10>HOME BREWED JEWELERY</font>
  </td></tr>
</table>
</center>

<div id="content">

<table width='100%' height='600'>
<tr width='100%' height='100%'><td width='100%' height='100%' valign="top" align="center">

<br>
<br>
<br>


<script type="text/javascript">
function ChangeDropdowns(value){
if(value=='CANADA'){
document.getElementById('ship_post1').style.display='block';
document.getElementById('ship_post2').style.display='block';
document.getElementById('ship_zip').style.display='none';}
if(value=='UNITED STATES'){
document.getElementById('ship_post1').style.display='none';
document.getElementById('ship_post2').style.display='none';
document.getElementById('ship_zip').style.display='block';}
if(value=='MEXICO'){
document.getElementById('ship_post1').style.display='none';
document.getElementById('ship_post2').style.display='none';
document.getElementById('ship_zip').style.display='block';}
if(value=='Please select'){
document.getElementById('ship_post1').style.display='none';
document.getElementById('ship_post2').style.display='none';
document.getElementById('ship_zip').style.display='block';}
}
</script>




<b>Checkout</b><br>
<b>Shipping Address</b><br>
Please provide us with your shipping information.

<form name="shipform" action="confirm.php?action=ship" method="POST">

<table width='100%' border=0>
<tr width='100%'>
  <td width='25%' align='right'>*First Name:</td><td width='75%'> <input type="text" name="ship_fname" size=15 maxlength="64" value=''onChange="javascript:this.value=this.value.toUpperCase();"></td>
</tr>

<tr width='100%'>
  <td width='25%' align='right'>*Last Name:</td><td width='75%'><input type="text" name="ship_lname" size=15 maxlength="64" value=''onChange="javascript:this.value=this.value.toUpperCase();"></td>
</tr>

<tr width='100%'>
  <td width='25%' align='right'>*Address 1:</td><td width='75%'><input type="text" name="ship_add1" size=25 maxlength="200" value=''onChange="javascript:this.value=this.value.toUpperCase();"></td>
</tr>

<tr width='100%'>
  <td width='25%' align='right'>Address 2:</td><td width='75%'><input type="text" name="ship_add2" size=25 maxlength="200" value=''onChange="javascript:this.value=this.value.toUpperCase();"></td>
</tr>

<tr width='100%'>
  <td width='25%' align='right'>*Country:</td><td width='75%'>
<select name="ship_con" onChange="updateship_pro(this.selectedIndex),ChangeDropdowns(this.value);">
<option value="Please select">Please select</option>
<option value='CANADA'>CANADA</option>
<option value='UNITED STATES'>UNITED STATES</option>
<option value='MEXICO'>MEXICO</option>
</select>
  </td>
</tr>
  
<tr width='100%'>
  <td width='25%' align='right'>*Province/State:</td><td width='75%'><select name="ship_pro"></select></td>
</tr>

<tr width='100%'>
  <td width='25%' align='right'>*City:</td><td width='75%'><input type="text" name="ship_city" size=15 maxlength="40" value=''onChange="javascript:this.value=this.value.toUpperCase();"></td>
</tr>

<tr width='100%' rowspan=2 colspan=2 cellspan=2 >
  <td width='25%' align='right'>*Postal/Zip code:</td>
  <td width='75%'>

  <table>
   <tr>
    <td>
     <input type=text id="ship_post1" name="ship_post1" value="" size=3 maxlength="3" onChange="javascript:this.value=this.value.toUpperCase();">
     <input type=text id="ship_zip" name="ship_zip" value="" size=5 maxlength="5">
    </td>
    <td>
     <input type=text id="ship_post2" name="ship_post2" value="" size=3 maxlength="3" onChange="javascript:this.value=this.value.toUpperCase();">
   </td>
  </tr>
</table>

</tr>

</form>

</table>

<script type="text/javascript">
var ship_conlist=document.shipform.ship_con
var ship_prolist=document.shipform.ship_pro
var ship_pro=new Array()
ship_pro[0]=""
ship_pro[1]=['Please select|Please select', 'Nunavut|Nu', 'Nova Scotia|Ns', 'Northwest Territories|Nt', 'New Brunswick|Nb', 'British Columbia|Bc', 'Alberta|Ab', 'Manitoba|Mn', 'Newfoundland & Labrador|Nf', 'Ontario|On', 'Quebec|Pq', 'Prince Edward Island|Pe', 'Saskatchewan|Sk', 'Yukon|Yt']
ship_pro[2]=['Please select|Please select', 'ALABAMA|Al', 'ALASKA|Ak', 'ARIZONA|Az', 'ARKANSAS|Ar', 'CALIFORNIA|Ca', 'COLORADO|Co', 'CONNECTICUT|Ct', 'DELAWARE|De', 'DISTRICT OF COLUMBIA|Dc', 'FLORIDA|Fl', 'GEORGIA|Ga', 'HAWAII|Hi', 'IDAHO|Id', 'ILLINOIS|Il', 'INDIANA|In', 'IOWA|Ia', 'KANSAS|Ks', 'KENTUCKY|Ky', 'LOUISIANA|La', 'MAINE|Me', 'MASSACHUSETTS|Ma', 'MICHIGAN|Mi', 'MINNESOTA|Mn', 'MISSISSIPPI|Ms', 'MISSOURI|Mo', 'NEBRASKA|Ne', 'NEVADA|Nv', 'NEW HAMPSHIRE|Nh', 'NEW JERSEY|Nj', 'NEW MEXICO|Nm', 'NEW YORK |Ny', 'NORTH CAROLINA|Nc', 'NORTH DAKOTA|Nd', 'OHIO|Oh', 'OKLAHOMA|Ok', 'OREGON|Or', 'PENNSYLVANIA|Pa', 'RHODE ISLAND|Ri', 'SOUTH CAROLINA |Sc', 'SOUTH DAKOTA|Sd', 'TENNESSEE|Tn', 'TEXAS|Tx', 'UTAH|Ut', 'VERMONT|Vt', 'VIRGIN ISLANDS|Vi', 'VIRGINIA|Va', 'WASHINGTON|Wa', 'WEST VIRGINIA|Wv', 'WISCONSIN|Wi', 'WYOMING|Wy']
ship_pro[3]=['Please select|Please select', 'Durango|Dg', 'Colima|Cl', 'Distrito Federal|Df', 'Coahuila|Cu', 'Chihuahua|Ci', 'Chiapas|Ch', 'Campeche|Cp', 'Baja California Sur|Bs', 'Baja California|Bj', 'Aguascalientes|Ag', 'Guanajuato|Gj', 'Guerrero|Gr', 'Hidalgo|Hg', 'Jalisco|Ja', 'Mexico|Em', 'Michoacan|Mh', 'Morelos|Mr', 'Nayarit|Na', 'Nuevo Leon|Nl', 'Oaxaca|Oa', 'Puebla|Pu', 'Queretaro|Qa', 'Quintana Roo|Qr', 'San Luis Potosi|Sl', 'Sinaloa|Si', 'Sonora|So', 'Tabasco|Ta', 'Tamaulipas|Tm', 'Tlaxcala|Tl', 'Veracruz|Vz', 'Zacatecas|Zt']
function updateship_pro(selectedship_pro){
ship_prolist.options.length=0
for (i=0; i<ship_pro[selectedship_pro].length; i++)
ship_prolist.options[ship_prolist.options.length]=new Option(ship_pro[selectedship_pro][i].split("|")[0], ship_pro[selectedship_pro][i].split("|")[1])
}

</script>

</td></tr>
</table>

<div id="footer">

	<div class="left">© 2009 <a href="http://www.simply-i.com">simply-i.com</a>.</div>

	<div class="right"><a href="http://templates.arcsin.se/">Website template</a> by <a href="http://arcsin.se/">Arcsin</a></div>

	<div class="clearer"><span></span></div>


</div>

</div>

<div id="navigation">

<h2 class="decay-small">Information</h2>
<ul>
	<li><a href="index.html">pellentesque</a></li>
	<li><a href="index.html">sociis natoque</a></li>
	<li><a href="index.html">semper</a></li>
	<li><a href="index.html">convallis</a></li>
</ul>

<h2 class="decay-small">STORE</h2>
<ul>
<li><a href='index.php?page=store&cat=41'>Necklaces</a></li>
<li><a href='index.php?page=store&cat=45'>Dichroic</a></li>
<li><a href='index.php?page=store&cat=44'>Earrings</a></li>
<li><a href='index.php?page=store&cat=40'>Bracelets</a></li>
<li>- - -</li>
<li><a href='index.php?page=cart'>SHOPPING CART</a></li>
</ul>

<h2 class="decay-small">CONTACT</h2>
<ul>
	<li><a href="index.html">sociis natoque</a></li>
	<li><a href="index.html">magna sed purus</a></li>
	<li><a href="index.html">tincidunt</a></li>
	<li><a href="index.html">consequat molestie</a></li>
</ul>


</div>

</div>

</body>
</html>

Thanks in advance!

webster08 · January 29, 2009

just add this to your css and the input fields for the postal code / zip code will not be displayed until your select menu is changed.

#ship_zip {
display: none;
}
#ship_post1 {
display: none;
}
#ship_post2 {
display: none;
}

M.O.S. Studios · January 30, 2009

Thanks that works!!

-Jarred

Sign In

[SOLVED] Help with a shipping form that selects zip/postal codes

Recommended Posts

M.O.S. Studios

Link to comment

Share on other sites

webster08

Link to comment

Share on other sites

M.O.S. Studios

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information