/    Sign up×
Community /Pin to ProfileBookmark

Country DDL pre-populate State field: STUMPED!!!

Copy linkTweet thisAlerts:
Mar 16.2012

Hi All,

I have basic JavaScript that pre-populates the state field based on Country selection. Can an expert take a look? It was working a while back but now it’s not. Not really sure why.

Also, can you also look at the JavaScript that copies the shipping information into the billing information section? All of it works except for the State field.

Please help! I have attached the full code as a text file.

to post a comment
JavaScript

19 Comments(s) ↴

Copy linkTweet thisAlerts:
@007JulienMar 16.2012 — At first two remarks.

It would be doubtless preferable to define Javascript strings to build dynamically the drop-dawn lists, especially that the same lists appear several times.

Then it is not useful to repeat values equal to the options (for the country list). These can be obtained with the selectedIndex (see infra).

[CODE]
[COLOR="Blue"]// A simple comma (or |) separated string and the corresponding array for Usa[/COLOR]
var strSttUsa = "Alabama|AB|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|Maryland|MD|Massachusetts|MA|Michigan|MI|Minnesota|MN|Mississippi|MS|Missouri|MO|Montana|MT|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|Puerto Rico|PR|Rhode Island|RI|South Carolina|SC|South Dakota|SD|Tennessee|TN|Texas|TX|Utah|UT|Vermont|VT|Virginia|VA|Washington|WA|West Virginia|WV|Wisconsin|WI|Wyoming|WY";
var arrSttUsa = strSttUsa.split('|');[COLOR="Blue"]
// Same string and array for Canada[/COLOR]
var strSttCan = "Alberta|AB|British Columbia|BC|Manitoba|MB|New Brunswick|NB|New Foundland|NL|NorthWest Territories|NT|Nova Scotia|NS|Ontario|ON|Prince Edward Island|PE|Quebec|QC|Saskatchewan|SK|Yukon|YT|";
var arrSttCan = strSttCan.split('|');
[COLOR="Blue"]// Same things for countries with a unique value (to do for a lighter file)[/COLOR]

[COLOR="Blue"]// An unique function to call with each list with different arguments[/COLOR]
function changeStates(objOrgLst,idDstLst){
[COLOR="Blue"]// A syntax to work without the values[/COLOR] (usual syntax : var country = objOrgLst.value)
var country = objOrgLst.options[objOrgLst.options.selectedIndex].innerHTML;//alert(country)
var slcLst = document.getElementById(idDstLst);//alert(slcLst)

if (country=="United States"){
slcLst.options.length=0;
slcLst.options[0] = new Option('--- Select One ---','');
for (var l=arrSttUsa.length,i=0;i<l;[COLOR="Red"]i+=2[/COLOR]) slcLst.options[1+i/2] = new Option(arrSttUsa[i],arrSttUsa[i+1]);}
else if (country=="Canada"){
slcLst.options.length=0;
slcLst.options[0] = new Option('--- Select One ---','');
for (var l=arrSttCan.length,i=0;i<l;i[COLOR="Red"]+=2[/COLOR]) slcLst.options[1+i/2] = new Option(arrSttCan[i],arrSttCan[i+1]);}
else if (country!="Canada" && country!="United States"){
slcLst.options.length=0;
slcLst.options[0] = new Option('Not Applicable','Not Applicable');}
}[/CODE]Then to call this function you have only to display two onchange on the two lists

[CODE]
// First list
<select id="Shipping_Country" name="Shipping_Country" [COLOR="Red"]onchange="changeStates(this,'Shipping_State')"[/COLOR]>
<option selected="selected">--- Select One ---</option>
<option value="Afghanistan">Afghanistan</option>
<!-- -->
<select id="Billing_Country" name="Billing_Country" [COLOR="Red"]onchange="changeStates(this,'Billing_State')"[/COLOR]>
<option selected="selected">--- Select One ---</option>
<option value="Afghanistan">Afghanistan</option>
<!-- -->
[/CODE]Good Luck !
Copy linkTweet thisAlerts:
@llckllauthorMar 16.2012 — Thanks so much. This makes things easier and simplifies it a lot. Will be sure to reuse often.

Any insight on the second part? Why the state field won't copy over from shipping into billing?
Copy linkTweet thisAlerts:
@007JulienMar 16.2012 — At first, the changeStates function can be a little simplified with the following template
[CODE]
 if (country=="United States"){
//...
}
else if (country=="Canada"){
//...
}

else [COLOR="Blue"]// test to remove : if (country!="Canada" && country!="United States")[/COLOR]
{
//...
}
[/CODE]
Then, I had not seen the possibility of copy ... You have now to build (in the same script) the same &#171;Billing_State&#187; list before to copy this value. This can be made by a call to the function changeStates. Then the form elements collection could be useful to copy the different fields.
[CODE]function SetBilling(checked){

if (checked){
changeStates(document.getElementById('Shipping_Country'),'Billing_State');
[COLOR="Blue"]var frmElm = document.myform.elements;
for (var l=frmElm.length,i=0;i<l;i++) if (frmElm[i].id.substr(0,8)=="Shipping") [/COLOR]{
document.getElementById('Billing'+frmElm[i].id.substr(8)).value = frmElm[i].value;}
}
else{
document.getElementById('Billing_Address_1').value = '';
document.getElementById('Billing_Address_2').value = '';
document.getElementById('Billing_City').value = '';
document.getElementById('Billing_State').value = '';
document.getElementById('Billing_Postal').value = '';
document.getElementById('Billing_Country').value = '';
}
}[/CODE]But it would be probably easier for the user to copy each Billing elements with an onblur of the corresponding Shipping element and to call twice the changeStates function...
[CODE]<select id="Shipping_Country" name="Shipping_Country" onchange="[COLOR="Blue"]changeStates(this,'Shipping_State');changeStates(this,'Billing_State')[/COLOR]">[/CODE]Then the user will not have more than to make the necessary modifications.

Other variants are possible, for example, with a second hidden list, displayed as previously, only with the click on the checkbox. A smaller or pre-filled form is a probably better...

NB : I have removed two useless </input> (after two <input ..../>) and a <br/> is to replace with a <br />. The file lost 30 Ko. He can again make look slimmer with an unique list of country !
Copy linkTweet thisAlerts:
@llckllauthorMar 17.2012 — Thanks for the help. I tried to implement it the way you said, but I'm probably messing up somewhere. All the fields copy over except the state field when Canada or United States is chosen as the country. The not applicable copies over just fine when selecting any other country. This is how I implemented your code:

[CODE]<script type="text/javascript">
function SetBilling(checked) {
if (checked) {

document.getElementById('Billing_First_Name').value = document.getElementById('Shipping_First_Name').value;
document.getElementById('Billing_Last_Name').value = document.getElementById('Shipping_Last_Name').value;
document.getElementById('Billing_Company').value = document.getElementById('Shipping_Company').value;
document.getElementById('Billing_Address_1').value = document.getElementById('Shipping_Address_1').value;
document.getElementById('Billing_Address_2').value = document.getElementById('Shipping_Address_2').value;
document.getElementById('Billing_Country').value = document.getElementById('Shipping_Country').value;
document.getElementById('Billing_City').value = document.getElementById('Shipping_City').value;
document.getElementById('Billing_Postal').value = document.getElementById('Shipping_Postal').value;
document.getElementById('Billing_Telephone').value = document.getElementById('Shipping_Telephone').value;
changeStates(document.getElementById('Shipping_Country'),'Billing_State');
var frmElm = document.myform.elements;
for (var l=frmElm.length,i=0;i<l;i++) if (frmElm[i].id.substr(0,8)=="Shipping") {
document.getElementById('Billing'+frmElm[i].id.substr(8)).value = frmElm[i].value;}

} else {
document.getElementById('Billing_First_Name').value = '';
document.getElementById('Billing_Last_Name').value = '';
document.getElementById('Billing_Company').value = '';
document.getElementById('Billing_Address_1').value = '';
document.getElementById('Billing_Address_2').value = '';
document.getElementById('Billing_Country').selectedIndex = 0;
document.getElementById('Billing_City').value = '';
document.getElementById('Billing_State').selectedIndex = 0;
document.getElementById('Billing_Postal').value = '';
document.getElementById('Billing_Telephone').value = '';
}
}
</script>[/CODE]
Copy linkTweet thisAlerts:
@007JulienMar 17.2012 — The proposed script updates at first the «Billing-State». Then, with the loop, It modifies all the elements of the form for which the identifier begins by Shipping to copy their value to the corresponding Billing Element. Then, there is no need to copy twice the elements : your first nine added lines are to remove !

The script works but supposes two clicks on the checkbox to update the Billing list. Then we have to attach or remove (if the checkbox is checked or not) events on each Shipping items to copy their value on the corresponding Billing items. Besides it would be preferable to replace the drop dawn lists for States by inputs for other countries than USA or Canada. I'll propose you a variant with a unique script...
Copy linkTweet thisAlerts:
@llckllauthorMar 17.2012 — I removed the first nine lines. It doesn't copy the shipping into billing.

[CODE]<script type="text/javascript">
function SetBilling(checked) {
if (checked) {

changeStates(document.getElementById('Shipping_Country'),'Billing_State');
var frmElm = document.myform.elements;
for (var l=frmElm.length,i=0;i<l;i++) if (frmElm[i].id.substr(0,8)=="Shipping") {
document.getElementById('Billing'+frmElm[i].id.substr(8)).value = frmElm[i].value;}

} else {
document.getElementById('Billing_First_Name').value = '';
document.getElementById('Billing_Last_Name').value = '';
document.getElementById('Billing_Company').value = '';
document.getElementById('Billing_Address_1').value = '';
document.getElementById('Billing_Address_2').value = '';
document.getElementById('Billing_Country').selectedIndex = 0;
document.getElementById('Billing_City').value = '';
document.getElementById('Billing_State').selectedIndex = 0;
document.getElementById('Billing_Postal').value = '';
document.getElementById('Billing_Telephone').value = '';
}
}
</script>[/CODE]
Copy linkTweet thisAlerts:
@llckllauthorMar 17.2012 — The Billing_State gets pre-populated if US or CA is selected from shipping.
Copy linkTweet thisAlerts:
@007JulienMar 17.2012 — I think this script solve the problem.
[CODE]<script language="JavaScript" type="text/javascript">

var strSttUsa = "Alabama|AB|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|Maryland|MD|Massachusetts|MA|Michigan|MI|Minnesota|MN|Mississippi|MS|Missouri|MO|Montana|MT|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|Puerto Rico|PR|Rhode Island|RI|South Carolina|SC|South Dakota|SD|Tennessee|TN|Texas|TX|Utah|UT|Vermont|VT|Virginia|VA|Washington|WA|West Virginia|WV|Wisconsin|WI|Wyoming|WY"
var arrSttUsa = strSttUsa.split('|');
var strSttCan = "Alberta|AB|British Columbia|BC|Manitoba|MB|New Brunswick|NB|New Foundland|NL|NorthWest Territories|NT|Nova Scotia|NS|Ontario|ON|Prince Edward Island|PE|Quebec|QC|Saskatchewan|SK|Yukon|YT|";
var arrSttCan = strSttCan.split('|');

function changeStates(objOrgLst,idDstLst){var l,i,lstStt,nptStt,objParent;
var country = objOrgLst.options[objOrgLst.options.selectedIndex].innerHTML;
var objStt = document.getElementById(idDstLst);

if (country=="United States" || country=="Canada"){
[COLOR="Blue"]// A drop-dawn list[/COLOR]
if (objStt.nodeName!='SELECT') {objParent=objStt.parentNode;
lstStt=document.createElement('select');
lstStt.onchange=function(){
if (document.getElementById('sameListBtn').checked) {
document.getElementById('Billing_State').value=document.getElementById('Shipping_State').value}}
objParent.replaceChild(lstStt,objStt);
lstStt.id=idDstLst;lstStt.name=idDstLst;}
else lstStt=objStt;
[COLOR="Blue"]// with options[/COLOR]
lstStt.options.length=0;
lstStt.options[0] = new Option('--- Select One ---','one',true,true);
if (country=="United States"){
for (l=arrSttUsa.length,i=0;i<l;i+=2) lstStt.options[1+i/2] = new Option(arrSttUsa[i],arrSttUsa[i+1]);}
else if (country=="Canada"){
for (l=arrSttCan.length,i=0;i<l;i+=2) lstStt.options[1+i/2] = new Option(arrSttCan[i],arrSttCan[i+1]);}

[COLOR="Blue"]// Same thing for the Billing list if the button is checked[/COLOR]
if (document.getElementById('sameListBtn').checked && objOrgLst.id=='Shipping_Country') {
objStt = document.getElementById('Billing_State');
if (objStt.nodeName!='SELECT') {objParent=objStt.parentNode;
lstStt=document.createElement('select');
objParent.replaceChild(lstStt,objStt);
lstStt.id='Billing_State';lstStt.name='Billing_State';
}
else lstStt=objStt;
lstStt.options.length=0;
lstStt.options[0] = new Option('--- Select One ---','one',true,true);
if (country=="United States"){
for (l=arrSttUsa.length,i=0;i<l;i+=2) lstStt.options[1+i/2] = new Option(arrSttUsa[i],arrSttUsa[i+1]);}
else if (country=="Canada"){
for (l=arrSttCan.length,i=0;i<l;i+=2) lstStt.options[1+i/2] = new Option(arrSttCan[i],arrSttCan[i+1]);}
}
}

else {
[COLOR="Blue"]// An input [/COLOR]
if (objStt.nodeName!='INPUT') {objParent=objStt.parentNode;
var nptStt=document.createElement('input');
nptStt.type='text';nptStt.size=30;
nptStt.onchange=function(){
if (document.getElementById('sameListBtn').checked) {
document.getElementById('Billing_State').value=document.getElementById('Shipping_State').value}}
objParent.replaceChild(nptStt,objStt);
nptStt.name=idDstLst;nptStt.id=idDstLst;}

[COLOR="Blue"]// Same thing for the Billing list if the button is checked[/COLOR]
if (document.getElementById('sameListBtn').checked && objOrgLst.id=='Shipping_Country') {
objStt = document.getElementById('Billing_State');
if (objStt.nodeName!='INPUT') {objParent=objStt.parentNode;
var nptStt=document.createElement('input');
nptStt.type='text';nptStt.size=30;
objParent.replaceChild(nptStt,objStt);
nptStt.name='Billing_State';nptStt.id='Billing_State';}}}
[COLOR="Blue"]// update the country Billing value if the button is checked[/COLOR]
if (document.getElementById('sameListBtn').checked && objOrgLst.id=='Shipping_Country') {
document.getElementById('Billing_Country').value=document.getElementById('Shipping_Country').value;
}
}

function SetBilling(checked){var i,frmElm;

if (checked){
[COLOR="Blue"]// To copy the type and list of states[/COLOR]
changeStates(document.getElementById('Shipping_Country'),'Billing_State');

// To copy and attach an onchange event on each Shipping item
frmElm=document.myform.elements;
for (var l=frmElm.length,i=0;i<l;i++){
if (frmElm[i].id.substr(0,8)=="Shipping" && (frmElm[i].tagName=='SELECT' || frmElm[i].tagName=='INPUT')){
document.getElementById('Billing'+frmElm[i].id.substr(8)).value = frmElm[i].value;
[COLOR="Blue"]// Do not change events for select items[/COLOR]
if (frmElm[i].tagName!='SELECT') frmElm[i].onchange=function(){
document.getElementById(this.id.replace(/Shipping/,'Billing')).value=this.value;}}}}

else {
[COLOR="Blue"]// To transform the list of states in an input[/COLOR]
var objStt = document.getElementById('Billing_State');
if (objStt.nodeName!='INPUT') {objParent=objStt.parentNode;
var nptStt=document.createElement('input');
nptStt.type='text';nptStt.size=30;
objParent.replaceChild(nptStt,objStt);
nptStt.name='Billing_State';nptStt.id='Billing_State';}

[COLOR="Blue"]// To remove onchange event on each Shipping item and value on each Billing item[/COLOR]
var frmElm=document.myform.elements;
for (var l=frmElm.length,i=0;i<l;i++) {
if (frmElm[i].id.substr(0,8)=="Shipping" && (frmElm[i].tagName!='SELECT')){
if (frmElm[i]!='Shipping_Country') frmElm[i].onchange=null;
document.getElementById('Billing'+frmElm[i].id.substr(8)).value = ' ';}}
document.getElementById('Billing_Country').selectedIndex=0;
}
}
</script>[/CODE]I add an id (sameListBtn) to the checkbox and replace [B]the two drop dawn lists[/B] for State by to input like this

[CODE]<tr>
<td>&nbsp;</td>
<td>State:&nbsp;</td>
<td>&nbsp;
<input type="text" name="Shipping_State" id="Shipping_State" size="30">
[COLOR="SeaGreen"]<!--
<select name="Shipping_State" id="Shipping_State">
<option selected="selected">--- Select One --</option>
</select>
-->[/COLOR]
</td>
</tr>[/CODE]
Copy linkTweet thisAlerts:
@llckllauthorMar 19.2012 — I implemented as you stated but it's still not working.

State field doesn't change and none of the fields copy over to the billing section.
Copy linkTweet thisAlerts:
@llckllauthorMar 19.2012 — Also, I tried really simplifying my old way of doing it but it's not working. Now I'm really STUMPED!

[CODE]<html>
<head>
<script language="JavaScript">

function clearselect()
{
document.myform.State.options.length=0;
}
function changeStates()
{
var indx=document.myform.Country.selectedIndex
var Country=document.myform.Country.options[indx].value

if (Country=="United States")
{
clearselect();
document.myform.State.options[0] = new Option('--- Select One ---','');
document.myform.State.options[1] = new Option('Alabama','AB');

}
else if (Country=="Canada")
{
clearselect();
document.myform.State.options[0] = new Option('--- Select One ---','');
document.myform.State.options[1] = new Option('Alberta','AB');

}


else if (Country!="Canada" && Country!="United States")
{
clearselect();
document.myform.State.options[0] = new Option('Not Applicable','Not Applicable');
}
}
</script>
</head>

<body>
<form id="myform">
<table>
<tr>
<td>Country:&nbsp;&nbsp;</td>
<td><select name="Country" onChange="return changeStates()">
<option value="" selected>--- Select One--- </option>
<option value="Afghanistan">Afghanistan</option>
<option value="Canada">Canada</option>
<option value="United States">United States</option>
</select></td>
</tr>
<tr>
<td>State:&nbsp;&nbsp;</td>
<td><select name="State"></select></td>
</tr>
</table>
</form>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@007JulienMar 19.2012 — Did you make the modifications of the HTML (the id sameListBtn for the checkbox and the two input for country) ? You should work with Firebug for FireFox or other development console with Google Chrome or Safari for window. With IE a click on the status bar give (on error) the line of the error to retrieve on the source.

Edit : The script was a draft. Here is a better script which work like the preceding one.

[CODE]<script language="JavaScript" type="text/javascript">

[COLOR="Blue"]// List to be completed for federations[/COLOR]
var oListsOfStates={// the country string value for key, and for value, a | separated string with text and value for all the States
"United States":"Alabama|AB|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|Maryland|MD|Massachusetts|MA|Michigan|MI|Minnesota|MN|Mississippi|MS|Missouri|MO|Montana|MT|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|Puerto Rico|PR|Rhode Island|RI|South Carolina|SC|South Dakota|SD|Tennessee|TN|Texas|TX|Utah|UT|Vermont|VT|Virginia|VA|Washington|WA|West Virginia|WV|Wisconsin|WI|Wyoming|WY"
,"Canada":"Alberta|AB|British Columbia|BC|Manitoba|MB|New Brunswick|NB|New Foundland|NL|NorthWest Territories|NT|Nova Scotia|NS|Ontario|ON|Prince Edward Island|PE|Quebec|QC|Saskatchewan|SK|Yukon|YT|"
};

function toogleInputList(object,country){
/* Adapts if necessary the Shipping or Billing State object (input type or drop-dawn list for countries in oListsOfStates)
and remove the corresponding list.
For Shipping State:
- adapts (if sameListBtn checked) the Billing State Object (with a new call of tis function),
- attach an onchange event to make, if necessary, a copy to Billing State.
object, define the Shipping or the Billing State object,
country, the concerned country.
*/
var newObj,okList=typeof(oListsOfStates[country])!='undefined';
[COLOR="Blue"]// Adapts the object[/COLOR]
if (okList && object.nodeName!='SELECT' || !okList && object.nodeName!='INPUT'){
var idName=object.id;
if (okList && object.nodeName!='SELECT') newObj=document.createElement('select');
else {newObj=document.createElement('input');newObj.type='text';newObj.size=30;}
object.parentNode.replaceChild(newObj,object);
newObj.id=idName;newObj.name=idName;}
else newObj=object;
[COLOR="Blue"]// Remove the drop-dawn list[/COLOR]
if (newObj.nodeName=='SELECT'){
newObj.options.length=0;
newObj.options[0] = new Option('--- Select One ---','one',true,true);
var arrStt=oListsOfStates[country].split('|');
for (var l=arrStt.length,i=0;i<l;i+=2) newObj.options[1+i/2] = new Option(arrStt[i],arrStt[i+1])}
[COLOR="Blue"]// For Shipping : onchange copy (if sameListBtn) and now change the Billing State object[/COLOR]
if (/Shipping/.test(object.id)){
newObj.onchange=function(){
if (document.getElementById('sameListBtn').checked) {
document.getElementById('Billing_State').value=this.value}}
toogleInputList(document.getElementById('Billing_State'),country)}
}

function changeStates(currentList,idTargetElm){
[COLOR="Blue"]// Copy the country change if necessary[/COLOR]
if (currentList.id=='Shipping_Country' && document.getElementById('sameListBtn').checked) {
document.getElementById('Billing_Country').value=currentList.value;}
var targetElm = document.getElementById(idTargetElm);
var country = currentList.value;// currentList.options[current.options.selectedIndex].innerHTML (if no value)
toogleInputList(targetElm,country);
}

function SetBilling(checked){var i,frmElm;
if (checked){
[COLOR="Blue"]// Copy the Country and adapts the type and list of states[/COLOR]
changeStates(document.getElementById('Shipping_Country'),'Billing_State');
[COLOR="Blue"]// Copy and attach an onchange event on each Shipping item[/COLOR]
frmElm=document.myform.elements;
for (var l=frmElm.length,i=0;i<l;i++){
if (frmElm[i].id.substr(0,8)=="Shipping" && (frmElm[i].tagName=='SELECT' || frmElm[i].tagName=='INPUT')){
document.getElementById('Billing'+frmElm[i].id.substr(8)).value = frmElm[i].value;
// Do not change events for select items
if (frmElm[i].tagName!='SELECT') frmElm[i].onchange=function(){
document.getElementById(this.id.replace(/Shipping/,'Billing')).value=this.value;}}}}
else {
[COLOR="Blue"]// Transform the list of states in an input[/COLOR]
toogleInputList(document.getElementById('Billing_State'),'');

[COLOR="Blue"]// Remove onchange event on each Shipping item and value on each Billing item, set Billing_Country to 0[/COLOR]
var frmElm=document.myform.elements;
for (var l=frmElm.length,i=0;i<l;i++){
if (frmElm[i].id.substr(0,8)=="Shipping" && (frmElm[i].tagName!='SELECT')){
if (frmElm[i]!='Shipping_Country') frmElm[i].onchange=null;
document.getElementById('Billing'+frmElm[i].id.substr(8)).value = ' ';}}
document.getElementById('Billing_Country').selectedIndex=0;}
}
[COLOR="Blue"]// Ensure the adaptation of lists and events[/COLOR]
window.onload=function(){document.myform.reset();}

</script>[/CODE]
Copy linkTweet thisAlerts:
@llckllauthorMar 19.2012 — I did add the id to the checkbox like this:

[CODE]<input type="checkbox" name="sameListBtn" id="sameListBtn">[/CODE]

And changed the state selection:

[CODE]<input type="text" name="Shipping_State" id="Shipping_State" size="30">
<!--
<select name="Shipping_State" id="Shipping_State">
<option selected="selected">--- Select One --</option>
</select>
-->[/CODE]

[CODE] <input type="text" name="Billing_State" id="Billing_State" size="30">
<!--
<select name="Shipping_State" id="Shipping_State">
<option selected="selected">--- Select One --</option>
</select>
-->[/CODE]

Is it working for you?
Copy linkTweet thisAlerts:
@007JulienMar 19.2012 — I verified the modifications made since your original text file. Except this preceding modifications and both </ input > and < br / > (and an other <hr/> to write <hr />) , there is only two onchange="changeStates(this,'Shipping_State')", onchange="changeStates(this,'Billing_State') and the last script which replace the two preceding scripts... Send me your mail address with a private message (click on 007Julien), I would send you the whole file.
Copy linkTweet thisAlerts:
@llckllauthorMar 19.2012 — Would you be able to make the modifications to the attached text file (code.txt) and send it back? I stripped out all JavaScript and ID's to start fresh.

Your help and expertise is GREATLY appreciated!

Thanks.
Copy linkTweet thisAlerts:
@007JulienMar 19.2012 — Here is my file
Copy linkTweet thisAlerts:
@llckllauthorMar 19.2012 — I wonder what I was doing wrong. Nevertheless, it's working great.

Can I ask for one modification? If any other country is selected (not U.S. or Canada, the state field will default to "Not Applicable".
Copy linkTweet thisAlerts:
@007JulienMar 19.2012 — You wish to forbid to Brazilians, to Russians, to Indians or to all other people who live in federation to display their country with a text "Not applicable" ?

In this case a readonly attribut and a value "Not applicable" on the the input type text is enough !
[CODE]
// The line 41
else {newObj=document.createElement('input');newObj.type='text';newObj.size=30;}
// Is to complete by
else {newObj=document.createElement('input');newObj.type='text';newObj.size=30;
newObj.value="Not applicable";newObj.readOnly=true;}
[/CODE]
Should the opposite occur, a not required field would be sufficient...
Copy linkTweet thisAlerts:
@llckllauthorMar 19.2012 — What I meant was, if a country other than United States or Canada is selected, then the State Field will automatically become "Not Applicable".

I applied the code you gave me but it didn't work.

Thanks.
Copy linkTweet thisAlerts:
@007JulienMar 19.2012 — It's works, but if you want to see this mention at the opening, you have too to change the HTML !

In my opinion there is not very useful to display a not applicable field. I leave you the care of using a display ='none' to remove it... Good Luck !
×

Success!

Help @llckll spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...