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

How to get my javascript to look for class or anything other than val

I have a javascript script that looks for the value and of dropdown and changes the next dropdown menu based on what the value is, however this will no longer work for me as i need to pass the value back to ruby so i can save it in sessions.
$(document).ready(function() {
$('#Exposures').bind('change', function() {
var elements = $('div.exposures').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="pmmargin3 exp" size="1" id="Exposures" title="" name="exposures_pt1">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="1">thing1</option>
<option value="1">thing2</option>
<option value="2">thing3</option>
<option value="1">thing4</option>
<option value="3">thing5</option>
</select>
<div class="container exposures leftmargin exp">
<div class="1">
<select class="second-level-select" name="exposures_pt2a">
<option selected disabled hidden style='display:none' value=''>- Please select an option-</option>
<option value="guardrail_system">thing1</option>
<option value="personal_fall">thing2</option>
<option value="safety_net">thing3</option>
</select>
</div>
<div class="2">
<select class="second-level-select" name="exposures_pt2b">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="guardrail_system">thing1</option>
<option value="personal_fall">thing2</option>
<option value="safety_net">thing3</option>
<option value="infeasibility_option">thing4</option>
</select>
</div>
<div class="3">
<select class="second-level-select" name="exposures_pt2c">
<option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
<option value="current_subpart">thing5</option>
<option value="proposed_subpart">thing6</option>
</select>
</div>
</div>
Thank you for any help, I'm fairly new to Javascript and am trying my best but still need some guidance.

As per what I understood. You want to send data selected in first dropdown to ruby to save it in Session.
If that is the case, on every select you can trigger AJAX call with cookies and update the session object accordingly and also subsequently display it in second dropdown as well.
Though, onChange AJAX is not a really good suggestion, in that scenario you can save selected option into browser sessionStorage and later add it to session object by a single ajax to your server at the end of your selection(dropdown) cycle.

Well i figured out how to get my results back and keep the value the same in my code so nothing else breaks here is how i did it.
$(document).ready(function() {
$('#Exposures').bind('change', function() {
var elements = $('div.exposures').children().hide(); // hide all the elements
var value = $(this).val();
*added* var exposuredd = document.getElementById("Exposures");
*added* var selectedText = exposuredd.options[exposuredd.selectedIndex].text;
*added* document.getElementById("exp1").innerHTML="<input type='text' name='exposures_pt1' value='"+selectedText+"' >";
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
this needs to be in the erb im using this in
<p hidden id="exp1"></p>
So now i can pass whatever text is in my options to ruby such as...."Hey Here I am"
<option value="1">Hey Here I am</option>

Loading Textarea with Javascript on click event

I am working on a project which requires status update. I would like to add onlcick even on select box to show textarea only if the users selected the status as pending.
echo "
<select onchange=\"window.location=this.value\" name=\"status\">
<option value=\"".$res1['ProjStatus']."\">".$res1['ProjStatus']."</option>
<option value=\"completed\">Completed</option>
<option value=\"ongoing\">Ongoing</option>
<option value=\"Project.php?pending=pending\">Pending</option>
</select>
";
Question: I would like to show the textarea only if the user change the project status to pending.
The above code work but this refresh the whole page

I think you want something like this. Forgive me for not testing that it works as is. Hopefully you can extrapolate.
HTML
<style> #textArea { display: none } </style>
<!-- select onchange calls javascript function to check if Pending was selected -->
<select onchange="toggleText(this.value)">
<option value="<?php echo $res1['ProjStatus'] ?>"><?php echo $res1['ProjStatus'] ?></option>
<option value="completed">Completed</option>
<option value="ongoing">Ongoing</option>
<option value="Pending">Pending</option>
</select>
<textarea id='textArea' />
JavaScript
function toggleText(value) {
// if the new value of the select element is Pending, show it
if("Pending" === value){
document.getElementById('textArea').style.display = "block";
// the return values just lets you know the result if you ever need it
return true;
}
document.getElementById('textArea').style.display = "none";
return false;
}

<select> tag returns an empty value to the database

So I am trying to create a dropdown that loops through $countries and then the selected country is written to $country in the database under the user table. I got the dropdown, but it returns a null value to the database (well the validation at least).
Here is the call for the dropdown
<div class="form-group col-lg-6 col-sm-12">
<label for="country">Country</label>
<div id="countrydd">
#if(isset($currentCountry->name))
<select name="country" id="country_display" class="current-value-da-select closed">
{{(isset($user->country->name))?$user->country->name:$currentCountry->name}}
#foreach($countries as $country)
<option value="{{$country->name}}">{{$country->name}}</option>
#endforeach
</select>
#else
<select name="country" id="country_display" class="current-value-da-select closed">
{{(isset($user->country->name))?$user->country->name:'Select your Country'}}
#foreach($countries as $country)
<option value="{{$country->name}}">{{$country->name}}</option>
#endforeach
</select>
#endif
And this is the Javascript for the dropdown
//Country Drop Down
$('#countrydd').click(function(e) {
var selectWrapperCountry = $('#countrydd');
var currentValueCountry = $(this).find('a').html();
selectWrapperCountry.find('.current-value-da-select').html(currentValueCountry);
selectWrapperCountry.find('#country').val(currentValueCountry);
updateCarretClassCountry();
});
$('#countrydd a.current-value-da-select').click(function() {
updateCarretClassCountry();
});
function updateCarretClassCountry(){
if($('#countrydd a.current-value-da-select').hasClass('closed')) {
$('#countrydd a.current-value-da-select').attr('class', 'current-value-da-select opened');
}
else
{
$('#countrydd a.current-value-da-select').attr('class', 'current-value-da-select closed');
}
};
Any help to get the value to update right would be awesome.

It seems that you are using the select tag wrong. Select needs to have a name (that is what you will get as a post variable), and every option needs to have a value. So it would be something like this:
<select name="country">
<option value="1">First one</option>
<option value="2">Second one</option>
</select>
After the form is submitted, you would have
echo $_POST["country"]; //This will output 1 if First one is selected and 2 if Second one is
Also, why do you have <a> inside <option> ?
Read more at: http://www.w3.org/wiki/HTML/Elements/select

Passing value of select menu to variable

Hello I am using the following procedure to get information from drop down menu:
$('select[name=status]').change(function(){
selectstatus = $("select[name=status]").val();
Currently it is getting information from the drop down menu with name=status. In case if I have more than one drop down menus with that name the script is not working correctly. It is working only for the first select menu that appears and for the rest is not selecting anything inside the variable selectstatus, how to modify the code that it will work with any select menu it doesn't matter what name it have.
<?php echo "<select name='status' id='$ids' idc='$idc'>" ?>
<option value="">Opcion:</option>
<option value="aprobado">Aprobado</option>
<option value="cupolleno">Cupo Lleno</option>
<option value="cancelado">Curso Cancelado</option>
<option value="noacion">No Acion</option>
</select>

With $(this):
selectstatus = $(this).val();

I would add a class to make it easy to target every select that you want this handler on.
<?php echo "<select name='status' class='getstatus' id='$ids' idc='$idc'>" ?>
<option value="">Opcion:</option>
<option value="aprobado">Aprobado</option>
<option value="cupolleno">Cupo Lleno</option>
<option value="cancelado">Curso Cancelado</option>
<option value="noacion">No Acion</option>
</select>
Then use the class name as the selector. Use $(this) to reference the select that fired the change event.
$('.getstatus').change(function(){
var selectstatus = $(this).val();
});

Use $(this)
$('select[name=status]').change(function(){
selectstatus = $(this).val();
});