We Keep Coding

Change content based on a drop down selection from a mysql database

I have a form of drop down boxes populated with values from a mysql database (Computer Part Models). My goal is to produce the rest of the values (The part's specs) from the database below each drop down box based on the value that was selected.
Essentially what I think I think I need is some sort of div refresh for each time a new item has been selected.
I have tried different functions triggered by 'onchange' within the select tag but nothing has come up working.
Let me know if anymore code would be needed for context.
HTML & PHP for one drop down
<form id="parts">
<fieldset>
<legend>Choose your parts</legend>
Any parts marked with * are required<br/><br/>
<label for="CPU">CPU*</label><br/>
<?php
$cresult = $mysqli->query("SELECT * FROM pCpu ORDER BY cModel asc");
?>
<select id="CPU" name="CPU">
<option value="" disabled selected>Select your Part</option>
<?php
while ($rows = $cresult->fetch_assoc()) {
$cmodel = $rows['cModel'];
echo "<option value='$cmodel'>$cmodel</option>";
$cid = $rows['ID'];
}
?>
</select>
<br/>
<?php
$res = $mysqli->query("SELECT cSocket FROM pCpu WHERE ID = '$cid'");
while($rows = $res->fetch_assoc()) {
$csocket = $rows['cSocket'];
echo "CPU Socket: $csocket<br/>";
}
?>
<br/><br/>
What would be the best way of tackling this?
Thanks in advance!

There's two parts in this answer :
First if you want to update a part of your page with change event on the select
function myUpdateFunc()
{
var mySelected = $("#CPU").find("option:selected").val();
$('#divResults').html ('selected value :' + mySelected)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="parts">
<fieldset>
<legend>Choose your parts</legend>
Any parts marked with * are required<br/><br/>
<label for="CPU">CPU*</label><br/>
<select id="CPU" name="CPU" onchange="myUpdateFunc()">
<option value="" disabled selected>Select your Part</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<br/>
<div id="divResults"/>
<br/><br/>
Next :
If you want to query a database you can check many tutorials on this. I can help you with this as well

Update/Edit a form, so that it loads with selected option-values of SELECT from sql table

Here, I have already submitted my form values in sql table, with a multiple select, where I serialized selected values of <options> & inserted in SQL column : fldR.
Now, I am trying to UPDATE this form info, and trying to load this form.php, with fetched values from SQL table. I want to populate the MULTIPLE select, with fetched - selected option values.
PHP:
$data = mysqli_fetch_object($result);
$selected_values = unserialize($data->fldR);
Now what to do ?
HTML / PHP:
<select name="rtype[]" id="rtype" class="myselect" multiple="multiple" style="height:6em">
<option value="hr">H1</option>
<option value="fr">F1</option>
<option value="rnr">R1</option>
</select>
Any creative ideas how this can be done?

We can use in_array() to check if the value is in array or not, if yes execute certain code.
in_array() can accepts two arguments, first argument is the value you need to check and second parameter is array to be checked.
Now update your PHP/HTML code as below to select the values in SELECT box by default from databases. Like this,
<select name="rtype[]" id="rtype" class="myselect" multiple="multiple" style="height:6em">
<option value="hr" <?php if(in_array('hr',$selected_values)) { ?> selected="selected" <?php } ?>>H1</option>
<option value="fr" <?php if(in_array('fr',$selected_values)) { ?> selected="selected" <?php } ?>>F1</option>
<option value="rnr" <?php if(in_array('rnr',$selected_values)) { ?> selected="selected" <?php } ?>>R1</option>
</select>
http://php.net/manual/en/function.in-array.php

Dynamically populate 3 dropdowns based on the selection in first dropdown

I have 4 dropdowns. Magazines, DD1, DD2, DD3. The dropdowns DD1, DD2, DD3 needs to be auto populated dynamically with the selection of a value in Magazine dropdown. The dropdowns DD1, DD2, DD3 are not dependent on each other. They purely depend on value in Magazines dropdown.
On the selection of dropdown 1 value, php ajax has to make call on mysql. I need to implement 3 different mysql queries in the background for 3 dropdowns.I surfed in net and all dropdowns are related to the previous dropdowns. For Example.
Can anybody guide me with proper link or proper idea to do this.

A quick workaround using javascript onchange:
form:
<select name="dd1" id="dd1" class="form-control" onChange="getDD2(this.value);">
<option value="" selected="selected">-select-</option>
</select>
javascript:
function getDD2(id){
if(id==""){
alert("Please select any dd1!");
}else{
var url = 'getdd2.php?id='+id;
$('#dd2container').load(url);
}
}
and in getdd2.php
$id = $_REQUEST['id'];
$dd= "SELECT * FROM prefix_dd2 WHERE id='$id'";
$founddd1 = $dbh->query($dd);
$res = $founddd1->fetchAll();
if(count($res)<=0){
echo '<select name="dd2" class="form-control" id="dd2">';
echo '<option value="select">No dd</option>';
echo "</select>";
}else{
echo '<select name="dd2" class="form-control" id="dd2" onchange="getDD3($id)">';
echo '<option value="select" selected="selected">-select-</option>';
foreach($res as $dd2):
echo '<option value="'.$dd2['id'].'">'.$dd2['dd2_name'].'</option>';
endforeach;
echo "</select>";
}
DD2 select in your form would be:
<div id="dd2container">
<select name="dd2" class="form-control">
<option value="" selected="selected">--select--</option>
</select>
</div>
Now you can make getDD3() function like I did getDD2() above. I hope this may help.
If you want to populate three select at one go, you can put all the three select box in the getdd2.php and query the database for each base on the data from the first select box.

How do I update dropdown boxes based on previous dropdown box's values

I'm currently a beginner in javascript and i'm having a hard time passing the value of a dropdown box. I only know how to get the value into php if I wrap the select stuff into a post form and create a button to get the values when it's clicked but since this is javascript there isn't a submit button and I need to update the second dropdown list based on the value of the first dropdown list and update the third dropdown list based on the first and second values.
My table looks like this:
Currently, what my code does is it only stores the values inside the dropdown boxes. What I wanted it to do is if "guy" chooses January and chooses week 1, year should only contain 2015 and when he chooses week 2, year should only contain 2013.
<?php
mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("my_db") or die (mysql_error());
$queryMonth = mysql_query("SELECT DISTINCT month FROM list WHERE username='guy'");
$queryWeek = mysql_query("SELECT DISTINCT week FROM list WHERE username='guy', month='Should be the value of the first select'");
$queryYear = mysql_query("SELECT DISTINCT year FROM list WHERE username='guy', month='Should be the value of the first select', week='Should be the value of the second select'");
?>
<html>
<head>
<script src="js/javascript.js"></script>
<script>
function getMonth() {
document.getElementById("monthchoice").value = document.getElementById("month").value;
}
function getWeek() {
document.getElementById("weekchoice").value = document.getElementById("week").value;
}
function getYear() {
document.getElementById("yearchoice").value = document.getElementById("year").value;
}
</script>
</head>
<body>
<select id="month" onchange="getMonth()" >
<option value="" disabled selected>Select your option</option>
<?php
while($getMonth = mysql_fetch_assoc($queryMonth))
{
echo
'
<option value="'.$getMonth['month'].'">'.$getMonth['month'].'</option>
';
}
?>
</select>
<select id="week" onchange="getWeek()" >
<option value="" disabled selected>Select your option</option>
<?php
while($getWeek = mysql_fetch_assoc($queryWeek))
{
echo
'
<option value="'.$getWeek['week'].'">'.$getWeek['week'].'</option>
';
}
?>
</select>
<select id="year" onchange="getYear()" >
<option value="" disabled selected>Select your option</option>
<?php
while($getYear = mysql_fetch_assoc($queryYear))
{
echo
'
<option value="'.$getYear['year'].'">'.$getYear['year'].'</option>
';
}
?>
</select>
<br><br>
<input type="text" id="monthchoice"><br>
<input type="text" id="weekchoice"><br>
<input type="text" id="yearchoice"><br>
</body>
</html>

You should research for ajax.
http://www.w3schools.com/ajax/ajax_intro.asp
When your dropdownboxvalue's value is changed. You can use ajax to request new data from the server. The server should return json datatype or xml if you want. Then you parse the data you receive from server into javascript object. Then use javascript to replace the old dropdownboxvalue value into new dropdownboxvalue you receive from the server before (i recommend u use jquery because it is quiet easy to use for beginner)

Writing Conditional Drop Downs to MySQL

Hopefully this isn't too confusing..
I have a conditional form that has the user select a category, based on that category they'll need to choose from that category's sub categories. This works fine.
However, my issue is when writing to MySQL the Value that's inserted in my Sub Category column is always the last Select group's first Value (in this case it's "sandwich"). Example..
My Main Categories: Starters | Supper | Sandwiches
Starters' Sub Categories: Coastal or Southern
Supper's Sub Categories: Smokehouse or Specialties
Sanwiches' Sub Categories: Sandwich or Po-Boy
No matter which Category/Sub Category you select, it always writes the "Sandwich" subcategory in MySQL. Make sense?
So here's my code & JSFiddle if you want to play with the dropdowns. http://jsfiddle.net/kkobayashi/5f5tw4t0/
PHP to MySQL
<?php
if( isset( $_POST['create'] ) ):
$cat = $_POST['cat'];
$catsubs = $_POST['subcategory'];
$name = $_POST['name'];
$description = $_POST['description'];
$price = $_POST['price'];
mysql_query("INSERT INTO leDB (cat,subcategory)
VALUES('$cat','$catsubs')")
or die(mysql_error());
echo "Success."; /** success message **/
endif;
?>
HTML
<form action="" method="POST">
<!-- MAIN CATS -->
<select id="mainCat" class="source" name="cat">
<option value="starters">Starters</option>
<option value="supper">Supper</option>
<option value="sandwiches">Sandwiches</option>
</select>
<!-- SUB CATS -->
<div id="cat_starters" class="subcategory" style="display:inline;">
<select class="" id="starters" name="subcategory">
<option value="coastal">Coastal</option>
<option value="southern">Southern</option>
</select>
</div>
<div id="cat_supper" class="subcategory hidden">
<select class="" id="supper" name="subcategory">
<option value="smokehouse">Smokehouse</option>
<option value="specialties">Specialties</option>
</select>
</div>
<div id="cat_sandwiches" class="subcategory hidden">
<select class="" id="sandwiches" name="subcategory">
<option value="sandwich">Sandwich</option>
<option value="poboy">Po-Boys</option>
</select>
</div>
</form>
JS
// Conditional Drop Down
$(document).ready(function(){
$('#mainCat').on('change', function() {
// Setting this variable to add inline
var inline = document.querySelector('#cat_' + $(this).val() );
// Show/Hide
$('div.subcategory').hide();
$('#cat_' + $(this).val() ).show();
inline.style.display = "inline";
});
});
A little CSS
div.hidden {
display: none;
}
Don't know how well of a job I did describing the issue, if you're confused feel free to yell at me. Thanks y'all.

Hiding the select does not actually remove it from the DOM, as you would see if you would check the source. It only hides it from the user.
This means that every select with the same name attribute will override the last one, hence why you only get the last one.
an easy fix could be to add the name attribute to the correct select.
$(document).ready(function(){
$('#mainCat').on('change', function() {
// Setting this variable to add inline
var inline = document.querySelector('#cat_' + $(this).val() );
// Show/Hide
$('div.subcategory').hide().attr('name', '');
$('#cat_' + $(this).val() ).show().attr('name', 'subcategory');
inline.style.display = "inline";
});
});

you need to add unique names to your selects.
For example for starters, add name="starters". Add names as the option values of the category.
And after that, use: $catsubs = $_POST[$cat];

Change the subcategory names to maybe subcategory1, ...2 and ....3 or just make them unique in the form
You need the names to be unique. The reason you end up with the same sandwich no matter what you select is because you are using the same name. When the $_POST data is sent, it sends an array with the key equal to the name in the form. So to know exactly what a user clicked, selected or typed, each name must be unique