How to auto-fill 2 drop-down and text-box based upon on the first drop-down value selected?

Hi everyone,

Lets say I have a database table with 3 columns: semister, studentname and coursecode with two drop-downs and one matching textbox. I want to select value from first drop-down and fetch in second drop-down together with a textbox dynamically using php because I have no idea on how to do this.

Hi @sadock016 I have been recently working on this but I cannot post the answer because it might be a bit too long and mind-blowing but can definitely give you a few tips.

The first thing to consider is how much data you have for each drop-down. If you have too much, as in thousands of entries, then it might be better not to build all the options in the dom because there will be too much overhead in rendering. The two solutions vary a bit:

  1. Listen for an a change event on the master select.

For too much data:
2. Do an AJAX request to the server and retrieve the relevant records according to the master select value and rebuild the slave select via JavaScript with the respective options

For not too much data:
2.You can have the slave select have the full set of options in the HTML and then on change of the master select you loop through the slave select options and hide and show as needed.

In order to have an additional search box for the drop-downs you need JavaScript so that when you search you loop through all entries and see if there are matches.
I have built this whole thing in vanilla JavaScript and I can tell you it’s not easy but definitely worth a go if you want to up on your skills. There’s most likely plugins out there that might help you but also might not do everything you need, that’s why I normally go vanilla and write the components myself.

I hope that helped or at least put you on the right direction.

Best of luck

@Andres_Vaquero

Thanks for you answer, but I want to remind you that am new at this so can you post the answer even if it might be a bit too long and mind-blowing.Or is a way to do it with php only?.

@sadock016: I’ve removed your e-mail address for two reasons.

Firstly, these forums are crawled and indexed by search engines, and may also be crawled by less well-intentioned bots, so unless you want your e-mail harvested by Spammers, you should remember not to post it publicly.

Also, the point of forum discussions is that they not only benefit those taking part at the time, but serve as a reference for others who may have the same issues. Taking the discussion out of the public domain and into private messages or email is therefore not in keeping with the spirit of the forum.

I’m sure you will understand.

I’d say it’s a relatively easy thing to do using Ajax and Jquery, as long as you can rely on your users having javascript enabled on their browsers. Consider this short html page that displays the initial drop-down list:

<html>
<body>
<script src="../jquery-1.11.1.js"></script>
<select name="mainlist" id="main-list" >
<option value="1">Select Category</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
</select>
</br></br></br><div id="subcats">
<select name="subcat" id="subcat-list">
<option value='1'>Select Number</option>
</select></div>

<script>
$('#main-list').on('change', function(){
  var mainselection = this.value; // get the selection value
  $.ajax({
    type: "POST",  // method of sending data
    url: "subcategory.php", // name of PHP script
    data:'selection='+mainselection, // parameter name and value
    success: function(result){ // deal with the results
      $("#subcat-list").html(result); // insert in div above
      }
    });
  });
</script>
</body>
</html>

This draws a drop-down list with an id of main-list. The JavaScript function monitors for the selected value in that list being changed, and when it does change, it grabs the current selection into a variable called mainselection, which it then passes to your PHP code as a parameter called selection. Your PHP code is then something like this:

<?php
$sel = $_POST['selection'];
// validate it
// connect to the database
// run a query to retrieve the other information 
$query = "select * from subcats where maincat = " . $sel;
// echo the information out to the screen
// while $row = $result->fetch() { 
// echo "<option>" . $row['subcatname'] . "</option>"
// }
?>

I have left that as mainly pseudo-code so you can fill in the blanks, and I’ve missed out various bits such as actually executing the query - it’s intended as a pointer, not working code. When the data is echoed from your PHP routine, it comes back to the calling JavaScript in the result variable, which is then inserted into the main page html in the second drop-down list in the “success” section.

One thing I haven’t dealt with (because my example code doesn’t do it) is how to return more than one value. In the example, I’m just building up the html that goes into a second drop-down, and the calling JavaScript grabs that output as a variable. You’ll need to return it in two separate variables to be able to split it and send part to the drop-down and part to the text box. It’s probably going to need you to use something like JSON-encoding, but I’d recommend you get it working with a single value first, then expand on it.

You could do it with PHP alone, but it would be a bit more “clunky”. When the user makes a selection in the first drop-down, they’d have to submit the page, whereupon the PHP would extract the next level of data and re-draw the screen, filling in the second drop-down and the text box. I’m sure you’ve seen sites that work that way.

1 Like

@droopsnoot

Thank you alot.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.