We Keep Coding

Load sql data after making a choose out a select box?

I have a question.
I want to achieve something, however, I have never done this so unfortunately I do not know how to handle this.
In my screen I fill a dropdown box with names from a sql db.
Now I would like, as soon as a name is chosen from that dropdown that the other data be loaded such as, for example, min and max values.
I would like to use these values ​​to, for example, be able to give limits to input fields.
So as soon as an entry field falls outside of the loaded values, the entry field then turns red.
However, I would like to use this without the submit button of the form being pressed.
Is this possible ? if so can someone help me with this?
The code i use to fill my selectbox is this.:
<td>
<div class="controls">
<select name="prod" id="employee" onclick="updateBottomValue(this.value);" onchange="mys1()" style="width: 245px;">
<option value="" disabled selected="selected[]" multiple="multiple">Selecteer Product</option>
<?php
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM specsv1 where RActive = 'y' order by RNaam";
$q = $pdo->prepare($sql);
$q->execute(array($Id,$RNaam));
Database::disconnect();
while ($row = $q->fetch(PDO::FETCH_ASSOC)) {
echo "<option value='" . $row['Id'] . "'>" . $row['RNaam'] . "</option>";
}
?>
</select>
<?php if (!empty($ProductError)): ?>
<span class="help-inline"><?php echo $ProductError;?></span>
<?php endif; ?>
</div>
<span id="selectedValue"></span>
<input STYLE="width: 6em" name="rrss" type="text" id='rrss'>
</td>
The code i have to get the selected name is this.:
<script>
function updateBottomValue(selectedvalue) {
document.getElementById("selectedValue").innerHTML=selectedvalue;
document.getElementById('rrss').value = selectedvalue;
}
</script>

Yap it is possible.
And maybe this example ajax for what you want, feel free to modify to fit your requirements.
function viewMinMax(value){
if (value == 'a'){
tempurl = "https://api.myjson.com/bins/dv40y";
}else if (value == 'b'){
tempurl = "https://api.myjson.com/bins/egjmq";
}
$.ajax({
url: tempurl,
type: "get",
dataType: "JSON",
data: {}, //this is data you send to your server
success: function(res)
{
$('#info').show();
document.getElementById("info").innerHTML = 'Your min value: ' + res.min + ', Your max value: ' + res.max;
$('#min').val(res.min);
$('#max').val(res.max);
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<select name="product_select" id="product_select" onchange="viewMinMax(this.value)">
<option value="">Select Product</option>
<option value="a">Product A</option>
<option value="b">Product B</option>
</select>
<p id="info" style="display:none;"></p>
<h3>Load the min & Max</h3>
<label for="min">Min</label>
<input type="text" name="min" id="min" value="">
<br>
<label for="max">Max</label>
<input type="text" name="max" id="max" value="">
</form>
ignore the tempurl it can be change with your action to select data based on value to your DB.

Is it possible? Absolutely. There are a few ways of going about it. One easy way is to use jQuery to fire off what's called an AJAX call as soon as the dropdown value changes. The AJAX call your PHP script and get back some HTML that it will place wherever you want it on the screen.
It's a big subject, so difficult to give you exact answers, but google jquery ajax dropdown onchange and you should be able to get enough information to get you going. One of them is the following (there are many):
jQuery Load form elements through ajax, from onchange event of drop down box

Multiple actions on a Single Change Event with JQuery/Javascript

I need to implement this js in order to fill in different fields on change event of a select field.
<select class="form-control" name='brands_list'>
<option value="0">Seleziona il produttore</option>
<?php
while ($listabrand=mysqli_fetch_array($brands)){
echo '<option value="'.$listabrand[0].','.$listabrand[1].','.$listabrand[2].'">'.$listabrand['0'].' - '.$listabrand['1'].'</option>';
}?>
</select>
This is the js to implement. I should add a second action that fill in the input field named 'brand_link' assuming the array value [2]:
<script>
$('select[name="brands_list"]').change(function(){
$('input[name="brand_name"]').val($('select[name="brands_list"] option:selected').text().split(' - ')[1]);
});
</script>
I made several attempts but without results such as
<script>
$('select[name="brands_list"]').change(function(){
$('input[name="brand_name"]').val($('select[name="brands_list"] option:selected').text().split(' - ')[1]);
});
$('select[name="brands_list"]').change(function(){
$('input[name="brand_link"]').val($('select[name="brands_list"] option:selected').text()[2]);
});
Any help?

You can do it all within the one function. The reason your pastebin didn't work is because 1) you aren't operating on the .val() of the selected item (rather the element itself) and 2) you didn't split the value by comma, like you split the .text() by hyphen.
$('select[name="brands_list"]').change(function(){
var $selectedOption = $('select[name="brands_list"] option:selected');
$('input[name="brand_name"]').val($selectedOption.text().split(' - ')[1]);
$('input[name="brand_link"]').val($selectedOption.val().split(',')[2]);
});

$(".form-control").change(function()
{
//alert( this.value );
var sl_value = this.value;
$('input[name="brand_name"]').val(sl_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="brand_name" value="">
<?php $listabrand=mysqli_fetch_array($brands);?>
<select class="form-control" name='brands_list'>
<option value="Seleziona il produttore">Seleziona il produttore</option>
<?php
foreach($listabrand as $brand){ ?>
<option value="<?php echo $brand;?>"><?php echo $brand;?></option>
<?php } ?>
</select>
in first step, get dropdown selected value in jquery on change. And save this value in jQuery variable. And then insert this value in textbox using jQuery. Thanks

PHP application with visible/hidden parts before and after form submission

I am trying to create a PHP application, where there is a button "Select Drivers", which shows a form if clicked, where there is a Dropdown list of driver groups. After selection of the group in Dropdown list, the form details should be processed in PHP and the list of drivers shown.
I don't have much knowledge of JavaScript and AJAX, so the way I implemented the application is that the form is submitted after the selection of the group in Dropdown list and the list of drivers are not shown, because the page is reloaded after submission and the HTML Div part with Group and Driver details become hidden again. So, in order to see this list, I have to press the button "Select Drivers" again.
My Javascript code is:
<script type="text/javascript">
function openDrivers(){
if (document.getElementById('driverGroups').style.display== 'none')
document.getElementById('driverGroups').style.display='block';
else if (document.getElementById('driverGroups').style.display== 'block')
document.getElementById('driverGroups').style.display= 'none';
};
</script>
And this part is HTML + PHP:
<form action="ragSelect.php" method="post" id="form">
<!-- DRIVERS SELECTION WINDOW -->
<input type="button" onclick="openDrivers();" id="driversButton" value="Select Drivers" /> <br>
<div id = "driverGroups" style="display: none" >
<br>
<select id ="selectGroup" name="taskOption" onchange="this.form.submit()">
<option selected = "selected"> Select Group </option>
<?php
$drGroup = getAvailableDriverGroups();
for ($x = 0; $x<count($drGroup);$x++)
echo '<option value="'.$drGroup[$x]['name'].'">'.$drGroup[$x]['name'].'</option>';
?>
</select>
<div id = "groupDrivers" >
<?php
if(isset($_POST['taskOption']))
{
$selectOption = $_POST['taskOption'];
echo $selectOption."<br>";
$grID = groupID($selectOption, $drGroup);
$groupName =$selectOption;
$driverGroup = getDriverGroup($wialon_api, $grID,$groupName);
for ($x=0;$x<count($driverGroup[$x]);$x++)
echo 'ID: '.($driverGroup[$x])."<br>";
}
?>
</div>
</div>
Can anyone advice something with that issue? Thank you

how to add new select box after clicking a button in jquery

i dont know if its possible using jquery,..i have a select option that has an array of data came from database and what i want is that whenever i click a button, another select option will popout like the first select option..
here is the code of my select option
<select class="form-control" name="room[]" id="room[]">
<option value="" default>Select</option>
<?php
$room = $subjectsClass->room();
foreach ($room as $key => $value) {
echo '<option value=" ' . $value['room_id'] .' ">' . $value['room_no'] . '</option>';
}
?>
</select>
<button type="button" class="btn btn-default" id="addRooms" >Add more Rooms?</button>
<script>
$('#addRooms').click(function(){
//append another select box with data from database,..how??
});
</script>

Let's say you have that wrapped into a div like:
<div id="the_div_of_wrapping"> all your stuff </div>
Then I would do:
var the_select = $("#room[]");
var the_id = the_select.prop("id");
var the_number_of_selects = $("select").length;
var the_div_of_wrapping = $("#the_div_of_wrapping");
the_select.clone().prop("id", the_id + the_number_of_selects);
the_div_of_wrapping.append(the_select);
.
Update:
As discussed in the comments, I would remove id since it is unnecessary and then the code would be:
var the_select = $("#room[]");
var the_div_of_wrapping = $("#the_div_of_wrapping");
the_select.clone();
the_div_of_wrapping.append(the_select);

How to get all the selected options in a drop down list with JavaScript?

I have a drop down list, and user can select multi options.
So this is part of my code in firtfile.inc
<div class="col-md-8">
<!-- Change report heading so we can grab it on the report page -->
<select name="SearchIn[]" multiple="multiple" onchange="javascript:this.form.Heading.value=this.options[this.selectedIndex].text;" required="required" title="Section">
<option value="" disabled selected>Select</option>
<?php
//Loop over the options
for($i=0;$i<sizeof($SearchCriteria);$i++){
?>
<option value="<?php echo $SearchCriteria[$i]['value'];?>"<?php if($SearchCriteria[$i]['value']=='FacultyName'){echo ' selected="selected"';}?>>
<?php echo $SearchCriteria[$i]['display'];?>
</option>
<?php
}//!End of looping over search criteria
?>
</select>
<!-- Hidden heading field for search report -->
<input type="hidden" name="Heading" valtue="" />
</div>
in another php file, I have included firstfile.inc, and i want to get the list of options that user has selected from drop down list.
so I have the folloing in the php file to get the selected options.
$Heading = $dat->if_default('Heading', '');
but it only gives me the first option that the user has selected, but I need all of them. How can I get them?

First of all, I highly recommend that you use jQuery, it will make any DOM manipulation a lot easier.
It's not clear what output you expect, but supposing you're expecting a comma separated string like:
Criteria1, Criteria2, Criteria3
You could:
1) Just use PHP to give you that, with something like:
$SearchIn = $_POST["SearchIn"];
$selectedArr = array();
foreach($SearchCriteria as $item) {
if (in_array($item["value"], $SearchIn)) {
$selectedArr[] = $item["display"];
}
}
$criteria = implode(", ", $selectedArr); // will contain: Criteria1, Criteria2, Criteria3
2) If you want to do it on the client and store the values in <input id="heading"/>, you can use jQuery and do this (your HTML would change a little, to include the IDs):
<form action="index.php" method="POST">
<div class="col-md-8">
<!-- Change report heading so we can grab it on the report page -->
<select id="section" name="SearchIn[]" multiple="multiple" required="required" title="Section">
<option value="" disabled selected>Select</option>
<?php for($i = 0; $i < sizeof($SearchCriteria); $i++) { ?>
<option value="<?php echo $SearchCriteria[$i]['value'];?>"<?php if($SearchCriteria[$i]['value']=='FacultyName'){echo ' selected="selected"';}?>>
<?php echo $SearchCriteria[$i]['display'];?>
</option>
<?php } ?>
</select>
<!-- Hidden heading field for search report -->
<input id="heading" type="hidden" name="Heading" value="" />
</div>
<input type="submit">
</form>
<script>
$('#section').on("change", function() {
selectedArray = new Array();
$(this).find("option:selected:not([disabled])").each(function() {
selectedArray.push(this.text);
});
$("#heading").val(selectedArray.join(", "));
});
</script>
3) For a pure JavaScript solution (use the same HTML as above):
<script>
document.getElementById("section").onchange=function(){
selectedArray = new Array();
for (x = 0; x < this.length; x++) {
if (this[x].selected && !this[x].disabled) {
selectedArray.push(this[x].text);
}
}
document.getElementById("heading").value = selectedArray.join(", ");
};
</script>