How to get the second value in a dropdown based on the one selected in the first dropdown
I wrote the following code in PHP to create two dropdowns on the same page.
The first dropdown gets the value from the MySQL table. This dropdpwn block contains multiple user IDs. The second dropdown contains some dates which should be based on the UserID that is selected in the first dropdown. I have filled in the second dropdown with all the dates in the MySQL table, but it should be filtered with the UserID that is selected in the first dropdown.
To communicate, with these two values from these two dropdowns on this PHP page, I posted them by clicking the submit button to another PHP page to handle some other work.
I would appreciate it if you could help me populate the second dropbox only based on the UserID selected in the first Dropbox. Here is the code I wrote to display and populate these dropdowns. Could you please let me know which part of the code I should change and I would appreciate it if you can show me the modification code as well. I'm new to PHP, so I'm asking for code-level help.
My code:
<html>
<head>
<title>
Search Alert DB
</title>
<body>
<br />
<?php>
$con = mysql_connect("localhost","root","root"); // (host, user,pwd)
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mysql", $con);
echo "<p> Search Alert database </p>";
echo "<br />";
$result = mysql_query("SELECT distinct(UserID) FROM tblAlertLogSpecificUsersDayStatusFinal_1");
$options="";
echo "<form action='Search_AlertDB_process.php' method='POST'>\n";
//echo "Please choose a user: ";
echo "Please choose a user: <select name = userid>";
echo "<option>-Select-";
while ($row = mysql_fetch_array($result))
{
$userid=$row["UserID"];
$options ="<option value = \"$userid\">$userid </option>";
echo "$options";
}
echo "</select>";
echo "<br />";
echo "<br />";
$dayresult = mysql_query("SELECT distinct(Occurred_date) FROM tblAlertLogSpecificUsersDayStatusFinal_1");
$dayoptions="";
echo "Please pick a date:<select name = day>";
echo "<option>-Select-";
while ($row=mysql_fetch_array($dayresult)) {
$day=$row["Occurred_date"];
$dayoptions ="<option value = \"$day\">$day </option>";
echo "$dayoptions";
//$options.="<OPTION VALUE=\"$id\">".$day;
}
echo "</select>";
echo "<br />";
mysql_close($con);
?>
<br />
<input type="submit" name="Submit" value="Search" /> <br /> <br />
</form>
</body>
</html>
source to share
You will need 3 things
- Start page with selection fields
- The first selection field is pre-filled with user IDs
- The second field contains no parameters and is disabled.
- A separate endpoint / page that accepts a user id as a parameter to return matching dates
- It should probably return JSON / XML (or something similar), or you can return dates pre-rendered in tags
<option />
(actually it doesn't, but it would be faster to hack this together)
- It should probably return JSON / XML (or something similar), or you can return dates pre-rendered in tags
- The Javascript callback is triggered when an option is selected in the first dropdown. The callback should send an AJAX request to a separate endpoint and populate the second dropdown with the result.
It would be easier for me to write everything for you than [try to] explain it, but that's not entirely true. Just trying to set it all up (it's going to be relatively simple) will teach you a whole bunch of things about Javascript, AJAX, and web services.
If you choose to return JSON / XML from your web service (separate endpoint / page) and hopefully you do, you can also see the benefit of separating logic from presentation, making a world of differences in both your understanding and delivery of the code.
source to share
Well, we won't be writing any code for you. Otherwise you will be a lifelong newbie :)
What you need here is called AJAX. The easiest way to implement this is probably the jQuery ajax function . If you don't know jQuery - learn the basics, it shouldn't take more than an hour or so. It's worth it:)
source to share