?
Solved

HELP!!!!  Select box

Posted on 2011-10-12
19
Medium Priority
?
337 Views
Last Modified: 2012-05-12
Hi,

I have a select box that populate the state I need to be able to when the page load the selected state should be selected.

so, if I select michigan and the page got reloaded my selected michigan should be selected again.

how can I do this?

my select code
this is my site:

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


<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>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateList,2,Len(strStateList))#];
			   document.forms.FRMAcc.TxtState.onkeyup();
			 </script>
			 </cfoutput>

Open in new window

0
Comment
Question by:lulu50
  • 8
  • 8
  • 2
  • +1
19 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36954928
you can store the value in a cookie, and at the next page load add the value attribute to the select box
0
 

Author Comment

by:lulu50
ID: 36955540
I am confused when I look at the code I am not good at JQuery
I am not sure how to get the value so, I can put it in a cookie.


the select box calls this function

function setCityOptions(theSel,fldNameFilter,fldNameTarget,fldNameTargetChild){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  theForm[fldNameTargetChild].options.length=0;
 var theFilter = escape(theForm[fldNameFilter].value.replace(/(^\s*|\s*$)/g,""));
  var theRequest = 'getOptCityName.cfm?selval='+theSel.value+'&filter='+theFilter;
  getSelOptions(theRequest,theForm[fldNameTarget]);
}

and 

the above function calls this getSelOptions function

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;
  for(var i=0;i<newOpt.length;i++){
    opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
  }
}

Open in new window

0
 
LVL 3

Expert Comment

by:saimazz
ID: 36959236
here jquery cookie plugin http://plugins.jquery.com/files/jquery.cookie.js.txt

you can set cookie by $.cookie('key', 'value') nad get cookie value by var value = $.cookie('key')

on your case

$(function() {
var value = $.cookie('select_value');
if(value) {
$('select').val(value)
}

$('select').change(function() {
$.cookie('select_value', $(this).val())
})
})

Open in new window

cookie.js
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 36959634
OK, I got it working.

I have rewriten your current page but I tested as HTML and used your ColdFusion for my testing. And it works :-)

Move the JavaScript array with the State codes at the bottom of the page after the last Form element.
I have put that bottom JavaScript code together with the function popup(url).

Here is that bottom JavaScript part:
<script type="text/javascript"><!--
  var arrStates=[['22','Michigan (MI) '],['35','Ohio (OH)']];
  getUrlParams();
  document.forms.FRMAcc.TxtState.onkeyup();
  if(window[fldMap.GetCity]) document.forms.FRMAcc.DispStateBox.onchange();
  if(window[fldMap.GetChurch]) document.forms.FRMAcc.GetCity.onchange()
  
function popup(url) 
{
 var width  = 950;
 var height = 500;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=yes';
 params += ', scrollbars=yes';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'windowname5', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

Open in new window

The former functions that I made for you nearly all were extended so take this complete set:
</head>
<body>
<script>
function getSelOptions(theRequest,theTarget){
  theRequest = "http://www.churchesbulletin.com/"+theRequest;
  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){
      opt[i] = new Option(newOpt[i][1],newOpt[i][0],true,true);
    } else {
      opt[i] = new Option(newOpt[i][1],newOpt[i][0]);
    }
  }
}
function setCityOptions(theSel,fldNameFilter,fldNameTarget,fldNameTargetChild){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  theForm[fldNameTargetChild].options.length=0;
 var theFilter = escape(theForm[fldNameFilter].value.replace(/(^\s*|\s*$)/g,""));
  var theRequest = 'getOptCityName.cfm?selval='+theSel.value+'&filter='+theFilter;
  getSelOptions(theRequest,theForm[fldNameTarget]);
}
function setChurchOptions(theSel,fldNameFilter,fldNameTarget){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  var theFilter = escape(theForm[fldNameFilter].value.replace(/(^\s*|\s*$)/g,""));
  var theRequest = 'getOptChurchName.cfm?selval='+theSel.value+'&filter='+theFilter;
  getSelOptions(theRequest,theForm[fldNameTarget]);
}
function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  for(var i=0;i<arrStates.length;i++){
    if(arrStates[i][1].match(rxFilter)){
          if(arrStates[i][0]==stid){
	    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]);
	  }
	}
  }
}

var fldMap={DispStateBox:'stid',GetCity:'ctid',GetChurch:'chid'};
function selectChurch(theSel){
  var theForm = theSel.form;
  for(var fldName in fldMap){
    window[fldMap[fldName]]=theForm[fldName].value;
  }
  self.location.href='index.htm?stid='+stid+'&ctid='+ctid+'&chid='+chid;
}

function getUrlParams(){
  var theForm = document.forms[0];
  var urlPar=location.search.substr(1).split("&");
  for(var fldName in fldMap){
    var fldPar=fldMap[fldName];
    window[fldMap[fldName]]="";
    for(var i=0;i<urlPar.length;i++){
      if(urlPar[i].match(fldPar+"=")){
        window[fldPar]=urlPar[i].split("=")[1];
      }
    }
  }
}
</script>

Open in new window

On the ColdFusion part nothing changed.
And I already tested your server as stated and it works :-)

Good Luck,
Zvonko
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36959659
Sorry, one function need to be changed, the top most one:
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
 

Author Comment

by:lulu50
ID: 36959734
Zvonko:

I have an error:
stid is undefined
0
 

Author Comment

by:lulu50
ID: 36959977
Zvonko,

"Sorry, one function need to be changed, the top most one:"

so, you want me to keep my previous code just change this function?
function getSelOptions(theRequest,theTarget) and add the javascript code at the bottom?

I have an error object expected


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36960397
You have to replace the function getSelOptions() in my big post with last upper version of that function.

And for the object-expected error you have to chenge your selct tag for Church to this version:
<select onChange="selectChurch(this);" name="GetChurch" style="width: 218px;" size="8">

Open in new window

If it helps you you can send me your cfm page source to the email from yesterday and I can see how you implement it.

See you.
0
 

Author Comment

by:lulu50
ID: 36960928
I made all the changes

but now I have a
new error:




stid is undefined.


function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  for(var i=0;i<arrStates.length;i++){
    if(arrStates[i][1].match(rxFilter)){
          if(arrStates[i][0]==stid){
	    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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36961315
change line 12 to


if(stid!= undefined && arrStates[i][0]==stid){

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36961975
Normaly is gurvinder372 proposal the correct way but for any reasons needs that var the window.prefix:
function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  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
 
LVL 63

Expert Comment

by:Zvonko
ID: 36962798
One more change:
function selectChurch(theSel){
  var theForm = theSel.form;
  for(var fldName in fldMap){
    window[fldMap[fldName]]=theForm[fldName].value;
  }
  self.location.href='ContactUs.cfm?stid='+stid+'&ctid='+ctid+'&chid='+chid;
}

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36962869
I see also in your live web server page this lines:
			 <script>
			   var arrStates=[['22','Michigan (MI) '],['35','Ohio (OH)']];
			   document.forms.FRMAcc.TxtState.onkeyup();
			 </script>

Open in new window

Please delete those lines.
They are doubled at the bottom and bring errors.

0
 

Author Comment

by:lulu50
ID: 36963465
Zvonko:

Great!!! I see my parameter passing (home.cfm?stid=22&ctid=1447&chid=33)

Now I have to attached my url.stid parameter to my select box.


I have to select the option that matches with my url.stid.

       <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>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateList,2,Len(strStateList))#];
			   document.forms.FRMAcc.TxtState.onkeyup();
			 </script>
			 </cfoutput> 

___________________________________________________________ 
I have to do the same thing with city 

<select name="GetCity" style="width: 218px;" size="4" onChange="setChurchOptions(this,'TxtChurch','GetChurch');"/> </select>
___________________________________________________________ 
and the same thing with the church select 

<select onChange="selectChurch(this);" name="GetChurch" style="width: 218px;" size="8">

Open in new window

0
 

Author Comment

by:lulu50
ID: 36964523
I needed to do this.

when the user get to the page and select state, city and church the page will be reloaded.  I want it to
repopulate the selected boxes to what the user previous selection.  

exp:

if i select Michigan , Detroit, anychurch  the page will get reloaded upon the selected church.
passing parameter of the stateID, CityID and churchId
once the page get reloaded I need for the state select box to reselect Michigan and for the city select box to reselect Detroit and for the church select box to reselect anychurch

that's my goal and I have no idea how to do this.   If this was in just coldfusion I have no problem doing it but my select has a combination of a beautiful languages that makes my brain blank.  

help.

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36965878
You did not do the Delete that I asked here: http:#36962869

Delete those lines and recreate the lines  2 - 6 from this posting: http:#36959634
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36965917
<script type="text/javascript"><!--
  var arrStates=[['22','Michigan (MI) '],['35','Ohio (OH)']];
  getUrlParams();
  document.forms.FRMAcc.TxtState.onkeyup();
  if(window[fldMap.GetCity]) document.forms.FRMAcc.DispStateBox.onchange();
  if(window[fldMap.GetChurch]) document.forms.FRMAcc.GetCity.onchange()

Open in new window

You may wonder why the statements from middle part has to be deleted and why the bottom page statement has to be at bottom.
Here the explanation: in upper statements is the order of statements important. The statement in line 4 can be executed first when parameters are fetched from URL in line 3.
And lines 5 and 6 can be executed only after the <select> tags are rendered on the browser page that meen they have to be located below the referenced <select> tags.
You see?
0
 

Author Comment

by:lulu50
ID: 36967204
Zvonko:

IT WORKS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

GREAT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


THANK YOU THANK YOU AND THANK YOU FOR ONE MILLION AND ONE TIME.

Zvonko My search tab has the same problem.
I need to open a new question can you please, help me
It is tricky because it has three different menu, I need to reselect what has been selected.


Thank you so much for helping me this is GREAT!!!!!  
0
 

Author Closing Comment

by:lulu50
ID: 36967205
Thank you for all your help
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

571 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