Linked combo boxes

Dev Shed Forums Sponsor:

May 7th, 2008, 04:02 AM

jekka

Registered User

Join Date: May 2008

Posts: 5

Time spent in forums: 2 h 3 m 31 sec
Reputation Power: 0

Linked combo boxes

Heloo! I'm new to javascript so may be you could help out with this problem

I need two combo boxes, the first one is filled from a database and the second is filled according to what you choose in the first one, also from the database.
If someone has an example, it would be very helpfull

May 7th, 2008, 05:16 AM

PHP-Newb

Bad Coder

Join Date: Jul 2003

Posts: 1,592

Time spent in forums: 1 Week 3 Days 15 h 43 m
Reputation Power: 123

How many options are we talking about?

__________________
Under no circumstances click the

button, because it is pointless. Thanks!

May 7th, 2008, 06:02 AM

jekka

Registered User

Join Date: May 2008

Posts: 5

Time spent in forums: 2 h 3 m 31 sec
Reputation Power: 0

Linked combo boxes

In the first combobox there are about 40 options(which are names of groups in a college ex: CIB0405) the second one selects from the database all the students from that group.

May 7th, 2008, 06:32 AM

PHP-Newb

Bad Coder

Join Date: Jul 2003

Posts: 1,592

Time spent in forums: 1 Week 3 Days 15 h 43 m
Reputation Power: 123

Post an example please.

May 7th, 2008, 06:55 AM

jekka

Registered User

Join Date: May 2008

Posts: 5

Time spent in forums: 2 h 3 m 31 sec
Reputation Power: 0

Quote:

Originally Posted by jekka

In the first combobox there are about 40 options(which are names of groups in a college ex: CIB0405) the second one selects from the database all the students from that group.

- that's waht i need to do and don't know how

I have one in php, but the comboboxes are not linked. You basically select the group(there are all the possible groups in the combobox) and the student(there are all the students in that combobox). It takes your choices and goes forward if the selected student(combobox 2) is in the selected group(combobox 1).
Here is the sequence of code that selects that creates the comboboxes and fills them with values:

[PHPNET]<tr>
<th> select the group: </th>
<td><?php
$link=mysql_connect("localhost","root","");
$db=mysql_select_db("baza_cfbc");
$qry=mysql_query("SELECT id_grupa, grupa From student_grupa");
echo '<select name="grupa">';
while($rez=mysql_fetch_row($qry))
{
echo '<option value="'.$rez[1].'">'.$rez[1].'</option>';
}
echo '</select>';
?></td>
</tr>
<tr>
<th>select student: </th>
<td><?php
$link=mysql_connect("localhost","root","");
$db=mysql_select_db("baza_cfbc");
echo '<select name="student">';
$query = mysql_query("SELECT id_stud, nume, prenume FROM student_persoane, student_stud WHERE student_stud.id_persoana=student_persoane.id_persoana ");

while ($rez=mysql_fetch_array($query))
echo '<option value="'.$rez['id_stud'].'">'.$rez['prenume'].' '.$rez['nume'].'</option>';

echo '</select>';

?></td></tr>
<tr>[/PHPNET]

May 7th, 2008, 07:22 AM

PHP-Newb

Bad Coder

Join Date: Jul 2003

Posts: 1,592

Time spent in forums: 1 Week 3 Days 15 h 43 m
Reputation Power: 123

How are the two tables linked?

May 7th, 2008, 08:55 AM

tom_cos

Registered User

Join Date: Jun 2007

Posts: 12

Time spent in forums: 6 h 44 m 16 sec
Reputation Power: 0

Perhaps you can modify the code presented on 2-level combo box
to get what you are looking for.

May 7th, 2008, 11:34 AM

jekka

Registered User

Join Date: May 2008

Posts: 5

Time spent in forums: 2 h 3 m 31 sec
Reputation Power: 0

Quote:

Originally Posted by tom_cos

Perhaps you can modify the code presented on ...
to get what you are looking for.

Thanks! thats a good code example, but is there any possibility to work with mysql through javascript?

May 7th, 2008, 11:37 AM

jekka

Registered User

Join Date: May 2008

Posts: 5

Time spent in forums: 2 h 3 m 31 sec
Reputation Power: 0

Quote:

Originally Posted by PHP-Newb

How are the two tables linked?

there is a big database out there. Basically the group ID is contained in the table with students. Student ID is contained in the table with persons(that's where the first and last names are).

#10

May 8th, 2008, 02:45 AM

PHP-Newb

Bad Coder

Join Date: Jul 2003

Posts: 1,592

Time spent in forums: 1 Week 3 Days 15 h 43 m
Reputation Power: 123

I was bored yesterday, so I actually wrote this out. It is untested, you have been warned.

Frontend:

Javascript Code:

Original - Javascript Code

<script type="text/javascript">
  var url = "includes/getstudents.php?grupa=";
 
  function init() {
    addEvent(document.getElementById('grupa'), 'change', xmlRange);
  }
 
  function addEvent(obj, type, fn) {
    if(obj.attachEvent) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn](window.event);}
      obj.attachEvent('on'+type, obj[type+fn]);
    }
    else obj.addEventListener(type, fn, false);
  }
 
  function insertReturn() {
    if(http.readyState == 4) {
      results = http.responseText.split(",");
 
      var Students = document.getElementById('students');
      while(Students.length != 0) Students.options[Students.length - 1] = null;
 
      for(var i=0; i<results.length; i++) {
        var currentStudent = results[i].split("|");
        Students.options[i] = new Option(currentStudent[0],currentStudent[1]);
      }
      document.getElementById('students').disabled = false;
    }
  }
 
  function xmlRange() {
    document.getElementById('students').disabled = true;
    var Grupa = document.getElementById('grupa');
 
    http.open("GET", url + escape(Grupa.options[Grupa.selectedIndex].value), true);
    http.onreadystatechange = insertReturn;
    http.send(null);
  }
 
  function getHTTPObject() {
    var xmlhttp;
    /*@cc_on
    @if (@_jscript_version >= 5)
      try xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      catch (e) {
        try xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        catch (E) xmlhttp = false;
      }
    @else
    xmlhttp = false;
    @end @*/
    if(!xmlhttp && typeof XMLHttpRequest != 'undefined') {
      try xmlhttp = new XMLHttpRequest();
      catch (e) xmlhttp = false;
    }
    return xmlhttp;
  }
  var http = getHTTPObject();
  window.onload = init;
</script>

PHP Code:

Original - PHP Code
<?PHP $link = mysql_connect("localhost","root",""); $db = mysql_select_db("baza_cfbc"); $qry = mysql_query("SELECT id_grupa, grupa From student_grupa"); echo ' <select id="grupa" name="grupa">'; while($rez = mysql_fetch_row($qry)) { echo ' <option value="'.$rez[0].'">'.$rez[1].'</option>'; } echo ' </select>'; ?> <select id="student" name="student"> <option>- Select a Group -</option> </select>

<?PHP
  $link = mysql_connect("localhost","root","");
  $db   = mysql_select_db("baza_cfbc");
  $qry  = mysql_query("SELECT id_grupa, grupa From student_grupa");
 
  echo '  <select id="grupa" name="grupa">';
  while($rez = mysql_fetch_row($qry)) {
    echo '    <option value="'.$rez[0].'">'.$rez[1].'</option>';
  }
  echo '  </select>';
?>
 
  <select id="student" name="student">
    <option>- Select a Group -</option>
  </select>

Backend(getstudents.php):

PHP Code:

Original - PHP Code

<?PHP
  $GrupaID = mysql_real_escape_string($_GET['grupa']);
  $link = mysql_connect("localhost","root","");
  $db = mysql_select_db("baza_cfbc");
  $query = mysql_query("SELECT id_stud, nume, prenume FROM student_persoane, student_stud WHERE id_stud = '{$GrupaID}'");
  $studentsReturn = '';
 
  while($rez = mysql_fetch_array($query)) {
    $studentsReturn .= $rez['id_stud'] .'|'. $rez['prenume'] .' '.