CRypt1k

bump

I've been working with PHP for a few years now but I haven't play with javascript much at all. Here's what I came up with but none of it works. Can someone tell me what I'm doing wrong? ajax_select_script.php <script> function submitSelection() { httpObject = getHTTPObject(); var x=document.getElementsByTagName("select"); for(i=0;i<x;i++) { var selectbox[i] = getElement("select_"+i); } for(i=0;i<x;i++) { var selectboxsubmited[i] = encodeURIComponent(selectbox[i].value); } //For Debugging purposes //alert("s1="+select1submit+"&s2="+select2submit+"&s3="+select3submit+"&s4="+select4submit+"&s5="+select5submit); if (httpObject != null) { var params = ""; for(i=0;i<x;i++) { var params += "s"+i+"="+selectboxsubmited[i]+"&"; } httpObject.open("GET", "load_select.php?"+params, true); httpObject.send(null); httpObject.onreadystatechange = function() { setOutput("outputID"); } } } 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 < 4) { output.innerHTML = "Loading...readyState_"+httpObject.readyState; } //For Debugging purposes //alert(output.innerHTML); } </script> <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> <option value ="6">6</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> <option value ="6">6</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> <option value ="6">6</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> <option value ="6">6</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> <option value ="6">6</option> </select> Select6: <select id="select_6" 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> <option value ="6">6</option> </select> </div> <br /> load_select.php <script> function getNumElements() { var x=document.getElementsByTagName("select"); return(x.length); } </script> <?php select_num = getNumElements(); for ($i=1;$i<=$select_num;$i++) { $select[$i] = $_GET['s'.$i]; } for ($chk_null=1;$chk_null<=5;$chk_null++) { if (!isset($select[$chk_null])) { echo "Invalid data"; exit; } } for ($list=1;$list<=$select_num;$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; ?>

Thank you! I'll check it out and start researching that.

I'm working on this script which work perfect for a set number of select boxes but need some help changing it to work so that I can give the script any number from say 1 to 300 and have it do the same thing to the select boxes. Number of select boxes options needs to equal the number of select boxes. ajax_select_script.php <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); //For Debugging purposes //alert("s1="+select1submit+"&s2="+select2submit+"&s3="+select3submit+"&s4="+select4submit+"&s5="+select5submit); if (httpObject != null) { httpObject.open("GET", "load_select.php?s1="+select1submit+"&s2="+select2submit+"&s3="+select3submit+"&s4="+select4submit+"&s5="+select5submit, true); httpObject.send(null); httpObject.onreadystatechange = function() { setOutput("outputID"); } } } 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 < 4) { output.innerHTML = "Loading...readyState_"+httpObject.readyState; } //For Debugging purposes //alert(output.innerHTML); } </script> <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 <?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; ?> Hope this make sense to someone. Thnx!

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

Thank you Corbin! Bluebutterflyofyourmind was helping me with a script using the similar code and same problem. I always try to figure out why something doesn't or does work, and this explanation made thing much more clear. Thank you both again!!!

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.

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.

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 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.

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.)?

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.