Form - dual drop down select

[denzlite]

I'm creating a form where poeple enter info for multiple patients.

So there multiple fields which consist of two form elements - drop down menus that are populated by two tables: patient_name and patient_type.

For instance:

Select Patient Name - Select Patient Type
Select Patient Name - Select Patient Type
Select Patient Name - Select Patient Type

Right now my client must always select a patient and then select a type. What he would like to do is every time he selects a patient - the patient type is automatically selected. BUT he would also like to be able to select a different type on the fly without altering the default type in the 'Add/Edit' patient area.

So it seems to me I would maybe need some kind of Ajax? element that would automatically update corresponding type when a patient is selected - but once that occurs be able to change the type.

Any help much appreciated.

[cretaceous]

yup - ajax is your solution
- it wont stop you from changing the type selecter afterwards

[denzlite]

Ok - so here's the code I'm working with as an example. This works good. You can select from a range of cities by a given state.

What if say you added a "favorite" or "default" column to the states table for a particular city? How could you modify the code so that when you click a state the corresponding dropdown would still load all the cities - but that the default city would load as selected?

state_dropdown.php

<?php     

     echo "<form name=sel>\n";
     echo "States : <font id=states><select>\n";
     echo "<option value='0'>============</option> \n" ;
     echo "</select></font>\n";

 echo "Cities : <font id=cities><select>\n";
 echo "<option value='0'>=== none ===</option> \n" ;
 echo "</select></font>\n";
?>

<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) {
     var req = Inint_AJAX();
     req.onreadystatechange = function () { 
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText; //retuen value
               } 
          }
     };
     req.open("GET", "state.php?data="+src+"&val="+val); //make connection
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
     req.send(null); //send value
}

window.onLoad=dochange('states', -1);         // value in first dropdown
</script>

state.php

<?php

 //set IE read from page only not read from cache
 header ("Expires: Sun, 03 Feb 1997 04:22:00 GMT");
 header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
 header ("Cache-Control: no-cache, must-revalidate");
 header ("Pragma: no-cache");

 header("content-type: application/x-javascript; charset=tis-620");

 $data=$_GET['data'];
 $val=$_GET['val'];



$hostname_connAdmin = "localhost";
$database_connAdmin = "*";
$username_connAdmin = "*";
$password_connAdmin = "*";
$connAdmin = mysql_connect($hostname_connAdmin, $username_connAdmin, $password_connAdmin) or trigger_error(mysql_error(),E_USER_ERROR); 

mysql_select_db($database_connAdmin, $connAdmin);

$query = "select * from states order by `state_id`";
$result= mysql_query($query, $connAdmin) or die(mysql_error());

$query2 = "SELECT * FROM cities WHERE `state_id` = '$val' ORDER BY `city`";
$result2 = mysql_query($query2, $connAdmin) or die(mysql_error());

if ($data=='states') {  // first dropdown_
      echo "<select name='states' onChange=\"dochange('cities', this.value)\">\n";
      echo "<option value='0'>==== choose state ====</option>\n";

      while(list($id, $name)=mysql_fetch_array($result)){
           echo "<option value=\"$id\" >$name</option> \n" ;
      }
} else if ($data=='cities') { // second dropdown
      echo "<select name='cities' >\n";
      echo "<option value='0'>====choose cities ====</option>\n";                           
      while(list($id, $name)=mysql_fetch_array($result2)){       
           echo "<option value=\"$id\" >$name</option> \n" ;
      }
 }
  echo "</select>\n";
?>

[cretaceous]

you need to find a method to decide what is the key city - that could all be done from your sql and by adding a column in the cities table - something like 'topcity' and there would be one for each set of cities in the state..

so in the php ajax script :

get your top city into the while loop , then when you build the select component, do this

• -you are using list syntax so adapt as needed - -

 while ......
 {    

if ($row['topcity'] ==1 )  { 
  echo    "<option value=\"$id\"  selected =\"selected\">$name</option> \n" ;
  } else {
   echo "<option value=\"$id\" >$name</option> \n" ;
 }
}

the key is adding selected="selected" at the right point

[denzlite]

if ($row['topcity'] ==1 ) {

Don't I need to somehow pass along one more value? I need to be able to have values assigned to states in order to update/insert mysql - but I also need to send another GET to the cities dropdown right - the topcity ID?

I apologize if not right forum, but I think I need to modify

onChange=\"dochange('cities', this.value)

to send along another value - so

$data=$GET['data'];
$val=$GET['val'];
$topcity=$_GET['topcity'];

and then make the change to

req.open("GET", "state.php?data="+src+"&val="+val); //make connection

[cretaceous]

I think you may need to re post your problem as I'm getting a bit lost - I dont know what works for you and what doesnt

when you fetch the cities list its governed by the state yes?
does that work ok with your ajax when you change state?

• if that works proceed to next item:

in the cities list, one city is preflagged as the capital city for that state - that one will then be the one selected in the list if you add
selected ='selected' in correct place
that doesnt depend on the ajax - thats governed by the php that draws up the dropdown selecter

[you could also bring it to top of list using "order by topcity DESC, cityname"
which would bring the designated topcity to top and stack the rest in alpha order by their name
(DESC because topcity is 1 and entries marked 0 get put to top)]

[denzlite]

Well I'm adapting this code for patient records.

So the states will be patients and the cities will be patient type.

So for the sake of clarity - just having a top city as 1 won't work. All Cities will have a number. In the States table there will be a column 'topcity' that has a corresponding number.

So in the script I need to be able to pass not only the State's option value to the cities list > but the topcity value as well so that way I can match it up to echo a selected...

Sorry if this confusing.

[cretaceous]

ok- that makes sense - you need a javascript forum!

you need to pass that variable along with the call to the ajax

here's one I bodged earlier

first add bits to your onChange in the originating select

onchange="drawdrop(this.value,<?php echo $editid;?>,'levdiv1',<?php echo $txsect ?> );"

this.value is selected valued
editid is the item being edited
levdiv1 is the div I want to update
txsect is like topcity - something else I want pass around..

then pick those up in the ajax/javascript |: incomplete code..

 - javascript:
function drawdrop(str,othvar,outputdiv,txsect)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
opdiv=outputdiv;

//if (str==0)return;
var url="fetch_ajdd.php";
url=url+"?itmid="+str;
url=url+"&editid="+othvar;
url=url+"&txsect="+txsect;
url=url+"&sid="+Math.random();
//alert (url); 
// uncomment line above for testing!
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() 
{
//	alert ("aaa"+opdiv);
if (xmlHttp.readyState==4)
{ 
switch (opdiv)
	{
	case 'levdiv1':
	 document.getElementById("levdiv1").innerHTML=xmlHttp.responseText; 
	 break;
	} 
}
}

so I added 'othvar' and 'opdiv'
othvar gets appended to the query string that gets pased to the php fetch script

the value of opdiv tells the function to do something else for one specific div - though I cant remember why I did that right now

in my php fetch script add at top

$itmid = $_GET['itmid'];
$editid = $_GET['editid'];
$txsect = $_GET['txsect'];

and you can do what you like with those values

that make sense?

[denzlite]

Hey thanks man, let me try it out. I really appreciate the help. - Denz