Jump to content

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

M.O.S. Studios

By M.O.S. Studios
in Javascript Help

Recommended Posts

M.O.S. Studios Advanced Member

M.O.S. Studios

Posted
Posted

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 Newbie

webster08

Posted
Posted

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;
}

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.