3+ Piece Dynamic Form - Making it Closer to User Proof [heh]

[amites]

Hello,

 

It doesn't seem like this should be to difficult, yet 6 hours on google has produced nothing for working examples to tinker with (perhaps I'm losing my Googlefu)

 

I have a page that loads pieces of the form based on AJAX

 

begins with a drop down menu, if I select from drop down 1, drop down 2 loads, select from drop down 2, either dorp down 3 or a form to populate new entry for drop down 3,

 

works great, unless I decide that I want to change the selection in Drop Down 1 in which case drop down 2 reloads and drop down 3 remains,

 

currently it passes selected value, and the next piece to work on

 

figured I can add a 3rd variable to keep track of what pieces have been created, though that still leaves me trying to update multiple elements at once...

 

any thoughts??

 

AJAX Load Script

		echo '<script type="text/javascript">
			function Inint_AJAX() {
			   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
			   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
			   try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
			   alert("XMLHttpRequest not supported");
			   return null;
			};

			function dochange(src, val, step) {
				 var req = Inint_AJAX();
				 req.onreadystatechange = function () { 
					  if (req.readyState==4) {
						   if (req.status==200) {
								document.getElementById(src).innerHTML=req.responseText;
						   } 
					  }
				 };
				 req.open("GET", "components/com_lookout/' . $type . '-load.php?data="+src+"&val="+val);
				 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1");
				 req.send(null);
			}

			window.onLoad=dochange(\'states\', -1);
			</script>';

 

I'm not the strongest with Javascript so please be kind, this is my first attempt at AJAX

[rhodesa]

The easiest way is to just hard code into your function which nodes to hide. But, if you are looking for a more 'generic' approach, try out this:

 

		echo '<script type="text/javascript">
			function Inint_AJAX() {
			   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
			   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
			   try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
			   alert("XMLHttpRequest not supported");
			   return null;
			};

			function dochange(src, val, clearNodes) {
				 //Clear node
				 document.getElementById(src).innerHTML = "";
				 //Clear other nodes
				 if(clearNodes && clearNodes.length){
				   for(var n=0;n < clearNodes.length;n++){
				     document.getElementById(clearNodes[n]).innerHTML = "";
				   }
				 }
				 var req = Inint_AJAX();
				 req.onreadystatechange = function () { 
					  if (req.readyState==4) {
						   if (req.status==200) {
								document.getElementById(src).innerHTML=req.responseText;
						   } 
					  }
				 };
				 req.open("GET", "components/com_lookout/' . $type . '-load.php?data="+src+"&val="+val);
				 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1");
				 req.send(null);
			}

			window.onLoad=dochange(\'states\', -1);
			</script>';

 

Then, in function call, just provide an array of IDs who's innerHTML should be cleared. Assuming the 3 area are called states, cities, and people, the first dropdown would look like:

<select onchange="dochange('cities',this.value,['people']);">

and the second would be:

<select onchange="dochange('people',this.value);">