Sean Limpens
Sean Limpens

Reputation: 77

Creating a dynamic text field that changes content depending on select list choice?

Me and my colleague are in the process of starting up our own company that handles exam results and school data. I am currently in the process of setting up the webpage (I am completely new with PHP and Dreamweaver CC) where the end-user can access and edit the database in the extent that they need to.

But I shall get to the point of my problem. At the moment I am trying to build a data edit page where all relevant data is shown once the user has logged in (In this case it's an admin-kind of person, so he/she needs to see which teacher teaches which classes). On this page I want to build a drop-down list of all the possible Classes (done this with the recordset, sorted alphabetically and working) and linking to that, a dynamic text field that changes value depending on the option picked in the select list.

Example:

There are four classes, and four corresponding teachers as followed:

Class - Teacher

English - Bob

Spanish - Juan

Math - Jenny

Geography - William

What I'm basically after is that if you choose the Class 'English' in the drop-down select list, the text field should display 'Bob' (and similarly for all the other classes). So far I've not managed to work out how to do that in Dreamweaver CC.

EDIT: I forgot to mention that both the class names and the corresponding teachers are a result from the query I've set up in a recordset - so instead of having to make the link myself I have to display that link (it does so for the very first school name in the dropdown list, but I think that's because of the nature of the query)

Help is much appreciated!

Upvotes: 1

Views: 1952

Answers (1)

Lance
Lance

Reputation: 4820

PHP is a server side language; not a client side one. You're gonna need JS and not PHP for this task. Try this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">
   $('.teacher').change(function(){
      var teacher = $(this).val();  
      $('#text').val(teacher);
   });
</script>

<?php
    //If all of the info for the classes is stored in MySQL, then do this
    //I'm not sure how your DB is structured, but you should get the idea here
    //Query the DB for all of the teachers and the subjects they teach
    $con = mysqli_connect("localhost", "root", "password", "database");
    $result = mysqli_query($con, "SELECT * FROM classes");
    $count = mysqli_num_rows($result);
    $i = 0;

   while($row = mysqli_fetch_array($result)) {
      $teacher[$i] = $row['teacher'];
      $subject[$i] = $row['subject'];

      $i++;
   }
?>
<select class="teacher">
<?php
    //Loop thru and for each row, echo out an option tag
    for($i=0;$i<$count;$i++) {
        echo "<option value='".$teacher[$i]."'>".$subject[$i]."</option>";
    }
?>
</select>

<input type="text" id="text" value="" />

Upvotes: 2

Related Questions