Jump to content

Select Box that depends on another select box

chris17

By chris17
in PHP Coding Help

 Share

Recommended Posts

chris17 Newbie

chris17

Posted
Posted

Hi Pals.

 

I have a select option named doctor that i need to depend on the another select option named field, just like in Months and days where February shows 29 days in the days select option when clicked.

 

The only difference here is that my data source is from mysql database instead of just html.

 

 

 

 

Link to comment
Share on other sites
chris17 Newbie

chris17

Posted
  • Author
Posted

Ok thanks but how can i do that Sir.

 

This is the little of tried doing:

<?php include("includes/database.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NHIS - Book Appointment</title>
<link rel="stylesheet" type="text/css" href="styles/lay_comp.css">
<script type="text/javascript" src="script.js"></script>
</head>


<body>
<div id = "container">

  <div id = "header"><a href="">Back to Home</a></div>

<div id = "title"><h3>BOOK APPOINTMENT</h3></div>


<div id = "content">
<div id = "form_cont">

<form id="form1" name="form1" method="post" action="">
  <fieldset>
    <fieldset class="f1">

    
    <label for="field"><span>Category:</span>
    <select name="field">
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	
	while($row = mysql_fetch_array($fields)){
			echo "<option value=\"{$row["field_id"]}\" > {$row["field"]} </option>";
	}
?>

    </select>
    </label>
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	$row = mysql_fetch_array($fields);

$tips = mysql_query("SELECT * FROM doctor WHERE field_field_id =  {$row["field_id"]}", $connection);

	if(!$tips){
	die("Error2: " . mysql_error());
	
	}
	$row2 = mysql_fetch_array($tips); 

?>
    <label for="doctor"><span>Doctor:</span>
    <select name="doctor">

<script type="text/javascript">
window.onload = InitFrm;

function InitFrm(){
	document.getElementById("field").selectedIndex = 0;
	document.getElementById("field").onchange = populateDoc;
	}

function populateDoc(){
	<?php 
"<option value=\"{$row2["doc_id"]}\" > {$row2["Fname"]} </option>";	?>
	}
</script>

   </select>
    </label>
    

    <label for="topic"><span>Topic:</span>
    <input type="text" name="topic" id="topic"/>
    </label>
    

   </fieldset>
  <div id="comps">
	  <label for="complaint"><span>Summary of Complaints:</span>
	  <textarea rows="20" cols="40" name="complaint" id="complaint"></textarea>
	  </label>

      </div>    
	  </fieldset>
		<div>
		<input id="buttondiv" type="submit" name="submit" value="BOOK"/>
		</div>
  </form>
</div>

</div>

</body>

</html>

Please help me.

Thanks

Link to comment
Share on other sites
chris17 Newbie

chris17

Posted
  • Author
Posted

Ok thanks but how can i do that Sir.

 

This is the little of tried doing:

<?php include("includes/database.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NHIS - Book Appointment</title>
<link rel="stylesheet" type="text/css" href="styles/lay_comp.css">
<script type="text/javascript" src="script.js"></script>
</head>


<body>
<div id = "container">

  <div id = "header"><a href="">Back to Home</a></div>

<div id = "title"><h3>BOOK APPOINTMENT</h3></div>


<div id = "content">
<div id = "form_cont">

<form id="form1" name="form1" method="post" action="">
  <fieldset>
    <fieldset class="f1">

    
    <label for="field"><span>Category:</span>
    <select name="field">
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	
	while($row = mysql_fetch_array($fields)){
			echo "<option value=\"{$row["field_id"]}\" > {$row["field"]} </option>";
	}
?>

    </select>
    </label>
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	$row = mysql_fetch_array($fields);

$tips = mysql_query("SELECT * FROM doctor WHERE field_field_id =  {$row["field_id"]}", $connection);

	if(!$tips){
	die("Error2: " . mysql_error());
	
	}
	$row2 = mysql_fetch_array($tips); 

?>
    <label for="doctor"><span>Doctor:</span>
    <select name="doctor">

<script type="text/javascript">
window.onload = InitFrm;

function InitFrm(){
	document.getElementById("field").selectedIndex = 0;
	document.getElementById("field").onchange = populateDoc;
	}

function populateDoc(){
	<?php 
"<option value=\"{$row2["doc_id"]}\" > {$row2["Fname"]} </option>";	?>
	}
</script>

   </select>
    </label>
    

    <label for="topic"><span>Topic:</span>
    <input type="text" name="topic" id="topic"/>
    </label>
    

   </fieldset>
  <div id="comps">
	  <label for="complaint"><span>Summary of Complaints:</span>
	  <textarea rows="20" cols="40" name="complaint" id="complaint"></textarea>
	  </label>

      </div>    
	  </fieldset>
		<div>
		<input id="buttondiv" type="submit" name="submit" value="BOOK"/>
		</div>
  </form>
</div>

</div>

</body>

</html>

Please help me.

Thanks

Link to comment
Share on other sites
WebStyles Newbie

WebStyles

Posted
Posted (edited)

you will have to use javascript or jquery to acheive that.

 

there's no javascript in your code. Try google something like "javascript get <select> value"

 

EDIT: opsss... Sorry, just saw the javascript code mixed in at the end. Hang on, I'll have a look for you.

Edited by WebStyles
Link to comment
Share on other sites
WebStyles Newbie

WebStyles

Posted
Posted (edited)

Ok, the select box that you can change (field), you need to add an onChange="" tag that will call your javascript function every time you change the value.

 

so, something like this: (imagine the javascript function is called updateValues

<select name="field" onchange="updateValues()">

this is a basic example, your javascript function would be something like this: (assuming the value of one is the index of the other)

function updateValues(){
  // get the value that's selected
 var a = document.getElementById("field");
 var b = a.options[a.selectedIndex].value;
 // make other box change
  document.getElementById("doctor").selectedIndex = b;
}
Edited by WebStyles
Link to comment
Share on other sites
WebStyles Newbie

WebStyles

Posted
Posted (edited)

here's a simple working example of how one box can change the other. You should be able to adapt it to your case:

 

 

<html>
<head><script>
function updateValues(a){
   // get the value that's selected
   var b = a.options[a.selectedIndex].value;
   // set the value on next box
   var doctor = document.getElementById('doctor');
   var cnt = doctor.length;
   for (var i=0; i < cnt; i++){
      if (doctor.options[i].value == b){
         doctor.options[i].selected = true;
      }
   }
}
</script>
</head>
<body>
<select id="field" name="field" onchange="updateValues(this)">
   <option value="0">please select one</option>
   <option value="1">One</option>
   <option value="2">Two</option>
</select>

<br><br><br>

<select id="doctor">
   <option value="0">nothing selected</option>
   <option value="1">Doctor One Selected</option>
   <option value="2">Doctor Two Selected</option>
</select>


</body>
</html>

Hope that helps

Edited by WebStyles
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.