?
Solved

State select box

Posted on 2011-10-21
9
Medium Priority
?
221 Views
Last Modified: 2012-05-12
Hi,

this is my site.
http://www.churchesbulletin.com/home.cfm?chid=11

when I open the page I will get list of states populated what I would like to add to the list is a new option that says "Select a state"

so, where the visitor come to my site they should see in the select state list

Select a state
Michigan (MI)
Ohio (OH)

right now it shows only the states
Michigan (MI)
Ohio (OH)

I need to add something like this but not sure how!

 if(theTarget.name == "DispStateBox") {
  opt[0] = new Option("Select a State","");
}


function getSelOptions(theRequest,theTarget){
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  theRequest=theRequest+"&t="+(new Date()).getTime();
  xmlhttp.open("GET",theRequest,false);
  xmlhttp.send();
  newOpt=[];
  var respOpt=xmlhttp.responseText.split('<!-- " --->')[0].replace(/^\s*[\n\r]*$/gm,"");
  if(respOpt){
    newOpt=eval(respOpt);
  }
  var opt = theTarget.options;
  opt.length=0;
  var selPar = window[fldMap[theTarget.name]];
  for(var i=0;i<newOpt.length;i++){
    if(newOpt[i][0]==selPar){
      window[fldMap[theTarget.name]]="";
      opt[i] = new Option(newOpt[i][1],newOpt[i][0],true,true);
    } else {
      opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
    }
  }
}

Open in new window

0
Comment
Question by:lulu50
  • 5
  • 3
9 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37005321
	var oSelect=document.createElement("select");
			oSelect.id = 'needsby1' 

			var oOption = document.createElement("OPTION");
			var t = document.createTextNode("Please Select One22");
			oOption.setAttribute("value", 'Please Select One2222222');
			oOption.appendChild(t);
			oSelect.appendChild(oOption);
document.getElementById("div1").appendChild(oSelect);

<div id='div1'></div>

Open in new window

0
 

Author Comment

by:lulu50
ID: 37005334
how would I use it in my code
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37005396
for(var i=1;i<newOpt.length;i++){
opt[0] = new Option("select a state","select a state");
    if(newOpt[i][0]==selPar){
      window[fldMap[theTarget.name]]="";
      opt[i] = new Option(newOpt[i][1],newOpt[i][0],true,true);
    } else {
      opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
    }
  }

Open in new window


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 20

Accepted Solution

by:
chaitu chaitu earned 2000 total points
ID: 37005401
sorry u put out side of for loop;start int i =1;

opt[0] = new Option("select a state","");

for(var i=1;i<newOpt.length;i++){
0
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 37005469
@lulu50 -
Is this the same requirement that you posted in the question - http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27406762.html ?

If yes, did you try that solution ?

Raj
0
 

Author Comment

by:lulu50
ID: 37006758
RajkumarGS:

the one that you helped me with it was the post.cfm page but the one I am talking about is
in the home.cfm

it's on a different page and the code are similar but not the same.

http://www.churchesbulletin.com/home.cfm?chid=11

-----------------------------------------------------------------------------------------
the post.cfm has this.
function getSelOptions(theRequest,theTarget){
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  theRequest=theRequest+"&t="+(new Date()).getTime();
  xmlhttp.open("GET",theRequest,false);
  xmlhttp.send();
  newOpt=eval(xmlhttp.responseText);
  var opt = theTarget.options;
  opt.length=0;

if(theTarget.name == "GetCityCT") {
  opt[0] = new Option("Select a City","");
}
else if(theTarget.name == "GetCity") {
  opt[0] = new Option("Select a City","");
}
else {
  opt[0] = new Option("Select a church","");
}

  for(var i=0;i<newOpt.length;i++){
    opt[opt.length] = new Option(newOpt[i][1],newOpt[i][0]);
  }
} 

_______________________________________________

this question has to do with this page 
home.cfm

function getSelOptions(theRequest,theTarget){
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  theRequest=theRequest+"&t="+(new Date()).getTime();
  xmlhttp.open("GET",theRequest,false);
  xmlhttp.send();
  newOpt=[];
  var respOpt=xmlhttp.responseText.split('<!-- " --->')[0].replace(/^\s*[\n\r]*$/gm,"");
  if(respOpt){
    newOpt=eval(respOpt);
  }
  var opt = theTarget.options;
  opt.length=0;
  var selPar = window[fldMap[theTarget.name]];
  for(var i=0;i<newOpt.length;i++){
    if(newOpt[i][0]==selPar){
      window[fldMap[theTarget.name]]="";
      opt[i] = new Option(newOpt[i][1],newOpt[i][0],true,true);
    } else {
      opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
    }
  }
}

see it's a little bit different

Open in new window

0
 

Author Comment

by:lulu50
ID: 37006962
chaituu:

I tried it.  It's not working

can I do it somewhere here when the state get populated?
<select name="DispStateBox" style="width: 218px;" size="4" 
			   onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
			   onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" >
			 </select>
			 
			 <cfset strStateList="" >
			 <cfloop query="DispState">
			   <cfset strStateList=strStateList&",['#StateID#','#StateName#']" >
			 </cfloop>

Open in new window

0
 

Author Comment

by:lulu50
ID: 37007410
I added to this function and it worked!!!
function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  opt[0] = new Option("Select a State","");
  for(var i=0;i<arrStates.length;i++){
    if(arrStates[i][1].match(rxFilter)){
       if(arrStates[i][0]==window.stid){ 
         window.stid="";
         opt[opt.length] = new Option(arrStates[i][1],arrStates[i][0],true,true);
       } else {
         opt[opt.length] = new Option(arrStates[i][1],arrStates[i][0]);
       }
    }
  }
}

Open in new window

0
 

Author Closing Comment

by:lulu50
ID: 37007411
Thank you
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question