Looking to make changing select boxes

[CRypt1k]

Im new to ajax and looking for some help on how make <select> boxes change their options once a selection is make. So say I have 5 select boxes on a page . Each one have the options 1-5 listed in it. If the user selects lets say "3" in the first one, i need the other 4 select boxes to only have 1,2,4,5 as options. This would be easy for me in php, but I'd like to do this with out reloading the whole page since I may be dealing with 75+ select boxes sometimes.

[bluebutterflyofyourmind]

what you do is give each select box an id.  then in your javascript, you can refer to the element(the select box) via that ID.

 

in that select box, make onchange, onfocus, and onblur go to a javascript function that changes the other select boxes depending on what value was selected in the first.  Have the other select boxes created already with nothing, or anything you want in them. 

 

then when that first one is changed, update the the other boxes.  if you're dong simple stuff that'll be the same everytime, then this can all be done in javascript with no AJAX.  otherwise, use AJAx calls. 

 

In your php file, build what you want inside your select boxes using echo's. then back in you javascript file, make the innerHTML of your select box equal to the response text of the php file, which will be the echod text from the php file.

 

 

hope this helps!

 

-grant

[CRypt1k]

THNX so much for replying. This helped a lot. I haven't messed with Javascript much either, but Googling onchange, onfocus, onblur, and innerHTM, gave me a good start. And I think your right it might be easier to just use Javascript. Can you post a basic example of how to send variables to a PHP file and have the Javascript write the echo to the page? and How do i send multiple variables from multiple elements (the select boxes in this case.)?

[bluebutterflyofyourmind]

alllrighty.

 

first things first.  before, your form's mthod would be post or get and action would target your php file.  here you now make your form target a javascript function which submit's the form to the php file. and you remove the method property all together.

 

In your javascript file, have a function that collects and submits to the php file.  This is all AJAX, so it will be done in the background.  if you want the form submission to not AJAX then just target your php file and mthod like normal and process with PHP. 

 

This is my understanding of what you're doing.  having select boxs that change depending on the other's inputs.  if these values never really chnage then you can use javascript only.  or if you need to query a databse, then you must use ajax which will be similar to the example i'm about to show, jsut you'll be echoing the innerHTML of the select box (ie: echo"<option>thing</option>"

 

so what i'm showing you here is a form that has multiple values submitted, and then passed to a php file, whose echo'd text is then displayed in teh page (mines inside a placeholder div.  could be anything.)

 

sooo here goes.

 

function that submits values from form

function submitShout(){
httpObject = getHTTPObject();

name = getElement("nameID");
city = getElement("cityID");
shout = getElement("shoutID");
submitted = getElement("submitID");

namesubmit = encodeURIComponent(name.value);
citysubmit = encodeURIComponent(city.value);
shoutsubmit = encodeURIComponent(shout.value);

if (httpObject != null) {
	httpObject.open("GET", "shoutupdate.php?submit="+submitted.value+"&shouter="+namesubmit+"&city="+citysubmit+"&shout="+shoutsubmit, true);
	alert("just press ok");
	httpObject.send(null);
	alert("we'll fix this issue soon");
	httpObject.onreadystatechange = setOutput("outputID");
}

document.form.reset();
}

 

as you see there are alert's there that appear to do nothing...but for some reason with out them the code get stuck at a readystate 1(google ajax onreadystatechange) and i'm working with people to sort this problem out on this forum as well.

 

from that code you need to get the xmlHTTPrequest(which is what allows the php call to be made in the background)

function getHTTPObject(){
var xhr; 
    try {  
	xhr = new ActiveXObject('Msxml2.XMLHTTP');
	return xhr;
}
    catch (e) 
    {
        try {   
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
		return xhr;
	}
        catch (e2) 
        {
          try {  
	  
	  	xhr = new XMLHttpRequest();
	  	return xhr;
	  }
          catch (e3) {
		  xhr = false;
			return xhr;
		}
        }
     }
}

 

I also have a function gets the element from the specific id given.  so every input of your form has to have an id associated with it

function getElement(id){
if (document.getElementById){
	// this is the way the standards work
	var el = document.getElementById(id);
}else if (document.all){
	// this is the way old msie versions work
	var  el = document.all[id];
}else if (document.layers){
	// this is the way nn4 works
	var el = document.layers[id];
}
return el;

}

 

After assigning the gotten elements to variables,  you must encode these(if they are text) as if they have &'s in teh text, the AJAX will not work properly.  (i found this out the hard way lol). then come the AJAX.

 

so referencing that first code block i sent in this post,

if (httpObject != null) {
	httpObject.open("GET", "shoutupdate.php?submit="+submitted.value+"&shouter="+namesubmit+"&city="+citysubmit+"&shout="+shoutsubmit, true);
	alert("just press ok");
	httpObject.send(null);
	alert("we'll fix this issue soon");
	httpObject.onreadystatechange = setOutput("outputID");
}

this is the AJAX part.

 

the open function is where info is sent to your php file.  you must set it to GET as you are passing though the url(it will never be seen) then you have the url itself and then TRUE, which makes it send asynchronously(in the background).  the url is just your usual url but with your variables mixed in.  pay attention to where you have encoded and unencoded variables.  the unencoded ones need to be variable.value where as the encoded ones already have taken into account the .value property.  you could clean this up before the url stage but i was just lazy to fix it after.

 

then you .send(null)  (not 100% what's going on here, as this is where my code doesn't work properly without the alerts.)

 

 

and then the part where your javascript listens for a response from the php file

httpObject.onreadystatechange = setOutput("outputID");

 

"outputID" is just a placeholder div i had.  that would be the id of your select box if that's what you're doing.

 

the setoutput code is thus

function setOutput(id){

var output = getElement(id);
if(httpObject.readyState == 4){

	output.innerHTML = httpObject.responseText;

}
else if(httpObject.readyState == 0){
	output.innerHTML = "ready state = 0";
}
else if(httpObject.readyState == 1){
	output.innerHTML = "ready state = 1";
}
else if(httpObject.readyState == 2){
	output.innerHTML = "ready state = 2";
}
else if(httpObject.readyState == 3){
	output.innerHTML = "ready state = 3";
}
else{
	output.innerHTML = "<img src=\"images/waiting.gif\"/>";	
}
}

 

State Description

0 The request is not initialized

1 The request has been set up

2 The request has been sent

3 The request is in process

4 The request is complete

 

these are what the numbers mean.  mine gets stuck at one without the alerts. 

 

so upon reaching 4, you update the innerHTML of whatever thing you're updating with the  .responseText

 

This is what ever the php file echo's

 

so in my php file, if they messed up on something, echo what they did wrong and that would display in teh placeholder div.

or echo your <option>'s for your select box.

 

 

I know this is a lot to take in but i managed to learn it in about a week due to a deadline...my knowledge isn't too comprehensive but  i've done what your asking so figured i'd contribute the code.

 

don't hesitate to ask questions about anything i posted as i know it can be kinda confusing.  Later!

 

grant

[CRypt1k]

YAY! I got it all worked out. Thank you again. That made it alot more understandable. I still have a long way to go, but i understand a little more now. I always learn easier when tweaking with other scripts. If you'd like to see the change I made, there you go:

 

html page:

<script>
function submitSelection()
{
httpObject = getHTTPObject();

select1 = getElement("select_1");
select2 = getElement("select_2");
select3 = getElement("select_3");
select4 = getElement("select_4");
select5 = getElement("select_5");

select1submit = encodeURIComponent(select1.value);
select2submit = encodeURIComponent(select2.value);
select3submit = encodeURIComponent(select3.value);
select4submit = encodeURIComponent(select4.value);
select5submit = encodeURIComponent(select5.value);

if (httpObject != null)
{
	httpObject.open("GET", "load_select.php?s1="+select1.value+"&s2="+select2.value+"&s3="+select3.value+"&s4="+select4.value+"&s5="+select5.value, true);
	alert("just press ok");
	httpObject.send(null);
	alert("we'll fix this issue soon");
	httpObject.onreadystatechange = setOutput("outputID");
}
document.form.reset();
}

function getHTTPObject()
{
var xhr; 
try
{  
	xhr = new ActiveXObject('Msxml2.XMLHTTP');
	return xhr;
}
catch (e) 
{
        	try
        	{   
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
		return xhr;
	}
	catch (e2) 
	{
		try 
		{  
			xhr = new XMLHttpRequest();
			return xhr;
		}
		catch (e3)
		{
			xhr = false;
			return xhr;
		}
	}
}
}

function getElement(id)
{
if (document.getElementById)
{
	// this is the way the standards work
	var elmnt = document.getElementById(id);
}
else if (document.all)
{
	// this is the way old msie versions work
	var  elmnt = document.all[id];
}
else if (document.layers)
{
	// this is the way nn4 works
	var elmnt = document.layers[id];
}
return elmnt;
}


function setOutput(id)
{
var output = getElement(id);
if(httpObject.readyState == 4)
{
	output.innerHTML = httpObject.responseText;
}
else if(httpObject.readyState == 0)
{
	output.innerHTML = "ready state = 0";
}
else if(httpObject.readyState == 1)
{
	output.innerHTML = "ready state = 1";
}
else if(httpObject.readyState == 2)
{
	output.innerHTML = "ready state = 2";
}
else if(httpObject.readyState == 3)
{
	output.innerHTML = "ready state = 3";
}
else
{
	output.innerHTML = "Waiting";	
}
}
</script>

<br />
<br />
<br />
<div id="outputID">
Select1: <select id="select_1" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select2: <select id="select_2" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select3: <select id="select_3" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select4: <select id="select_4" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select5: <select id="select_5" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
</div>
<br />

 

load_select.php page:

<?php
$select[1] = $_GET['s1'];
$select[2] = $_GET['s2'];
$select[3] = $_GET['s3'];
$select[4] = $_GET['s4'];
$select[5] = $_GET['s5'];

for ($chk_null=1;$chk_null<=5;$chk_null++)
{
if (!isset($select[$chk_null]))
{
	echo "Invalid data";
	exit;
}
}

for ($list=1;$list<=5;$list++)
{
$select_text .= "Select".$list.": <select id='select_".$list."'  onChange='submitSelection()'>\n";
for ($options=0;$options<=5;$options++)
{
	if ($options==0)
	{
		$select_text .= "<option value='-'>-</option>\n";
	}
	else if ($options == $select[$list])
	{
		$select_text .= "<option value='".$options."' selected>".$options."</option>\n";
	}
	else if ($options == $select[1] || $options == $select[2] || $options == $select[3] || $options == $select[4] || $options == $select[5])
	{
		$select_text .= "";
	}
	else
	{
		$select_text .= "<option value='".$options."'>".$options."</option>\n";
	}
}
$select_text .= "</select>   \n";
}
echo $select_text;
?>

 

So here a couple of questions:

I know you said

then you .send(null)  (not 100% what's going on here, as this is where my code doesn't work properly without the alerts.)

And I did notice when I remove the alert it stops at "ready state = 1", but I cant have these alert in there. What can you tell me about whats the code is trying to do here? What research have you found about this bug?

Thank again for all your help.

[bluebutterflyofyourmind]

gah i've no help yet on that problem.  trying to contact a guy on this forum right now that might possibly know. I haven't found much help yet online.  I also don't understand why having the alerts makes it work.  they should have no effect on the code....right?

 

in your first body of code that you posted there, when you're sending your variables to you php file, you're not sending the encrypted ones.  right now you're sending select1.value....when you should be sending select1submit.  glad to see that you got it working....minus my stupid bug.  i'm still looking for help on that....so let me know if you figure anything out or find anything.  i'm not too sure what the code's doing wih .send(null). possibly that's what's needed to send off the request.  really have no idea :S

[needs_upgrade]

I've done this before... call a javascript function that refreshes the page and adds a variable on the URL. 

[CRypt1k]

I could easily do that in PHP, but i think you missed the point I mentioned about dealing with 75+ select boxes on a page, and I really want to avoid refreshing the page every time one of the select boxes is changed.

[bluebutterflyofyourmind]

tonight i'm gonna do some work with some AJAX and start from fresh and see if i still get the problem where i'm stuck at readystate 1 without those alerts.  will let you know if i figure out how to fix it.  kinda glad to know it happened to you too though as i was worrying it was the server i was on....thus meaning now i know i should be able to fix it somehow. ttyl

[bluebutterflyofyourmind]

FOUND THE SOLUTION!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!11

 

thanks to help from a guru on this forum he helped me fix the problem.  check out this thread. it's just a matter of changing one line.

 

hope if works for you too

 

http://www.phpfreaks.com/forums/index.php/topic,209190.html

 

lata.

 

-grant

[CRypt1k]

Yay! Yeah in my forum searches and Google searches i can across that topic of yours and have been keeping an eye on it. i read what corbin had to say and surprisingly most of it made sense. I think I'll post on there too, to thank him. I'm looking forward to trying it when i get home.

[CRypt1k]

Ok, I could wait. So i edit the page from work. and... EVERYTHING WORKS PERFECTLY!!!

[bluebutterflyofyourmind]

make sure to mark this as "topic solved"  at the bottom of this thread.  ttyl!