i want a combobox which populates itself from a database column, when a user selects an option from the combobox it will populate textboxes, which are on the same page, with information related to the selection in the combobox.
Below is the code I used to populate a textbox when I selected the select nama from the dropdown combobox. but it doesnt work, the textbox still blank.
I have the drop down working and also it fills a JavaScript array using names but I just cannot work out how to use the array to show in the fields.
i understand it will have to use javascript and Onchange function, can anyone point me in the right direction?
cheers and thank in advance :)
<script src="js/jquery.js"></script>
<script type="text/javascript">
var selected = new Array();
<?php
$query1 = "SELECT * FROM inventori";
$result1 = mysql_query($query1) or die(mysql_error());
// build javascript array
while($row1=mysql_fetch_array($result1)){
echo 'selected['.$row1['selectnama'].'] = new Array();';
echo 'selected['.$row1['selectnama'].']["NAMA_BAHAN_BAKU"] = "'.$row1['NAMA_BAHAN_BAKU'].'";';
echo 'selected['.$row1['selectnama'].']["SATUAN"] = "'.$row1['SATUAN'].'";';
}
?>
function showname() {
var selectnama = document.formInventori.selectnama.value;
document.formInventori.SATUAN.value = selected[selectnama]["SATUAN"];
}
window.onload=function() {
showname();
}
</script>
<form role="form" action="" method="post" name="formInventori">
<div class="form-group">
<label for="NAMA_BAHAN_BAKU">Nama Bahan Baku</label>
<select class="form-control" name="selectnama" onchange="showname()">
<option value="">Pilih Nama Bahan Baku</option>
<?php
$query1 = "SELECT * FROM inventori";
$result1 = mysql_query($query1) or die(mysql_error());
// build javascript array
while($row1=mysql_fetch_array($result1)){
echo '<option value="'.$row1['ID_BAHAN_BAKU'].'">'.$row1['NAMA_BAHAN_BAKU'].'</option>'; }
?>
</select>
</div>
<div class="form-group">
<label for="SATUAN">Satuan Barang</label>
<input type="text" class="form-control" readonly="" id="SATUAN" name="SATUAN" value="">
</div>
</form>
I would use AJAX to do that, i would save the value selected from the combobox and then pass it to a php through ajax so the php executes a query where the selected value is the search "key", then print the result throught php
Related
<div class="form-group"><label for="unit_of">Unit of Measure</label>
<select class="form-control-sm selectpicker" multiple="multiple" id="unit_of" name="unit_of[]" data-selected-text-format="count">
<?php $sql = "select * from unit_of";
$res = mysqli_query($db_handle, $sql);
while ($list = mysqli_fetch_assoc($res)) {
$unit_of = $list['unit_of'];
?>
<option><?= $unit_of; ?></option>
<?php
}
?>
</select>
</div>
<input type="text" class="form-control-sm" id="rates" name="rates" >
<input type="text" class="form-control-sm" id="rates1" name="rates1" style="display:none">
<input type="text" class="form-control-sm" id="rates2" name="rates2" style="display:none">
In the dropdown
Per Minute
Per Page,
Per Hour,
Per Day,
Per Month,
Per Item,
Per Contract,
Others
I want onchange multiple select hide and show input types number e.g.(name="per_page") e.g.("Enter Rate Per Page") for three input type
Thanks in Advance
If I understand correctly, there are 2 questions here really:
How to restrict a multiple select to a max of 3 selections?
There are multiple ways to achieve this, but my recommendation would be to validate this right before the form is submitted. If you're using a form validation library, try adding the code in there. If not, then you can add a custom submit event handler that will validate the selections. Maybe something like:
$("form").on("submit", function(e) {
var selectionCount = $("#unit_of option:selected").length;
if (selectionCount > 3) {
e.preventDefault();
alert("You may only select up to 3 options.");
}
});
How to add a placeholder to the multiple select?
You can add a placeholder option just before the PHP code adds the other options, like so:
<select class="form-control-sm selectpicker" multiple="multiple" id="unit_of"
name="unit_of[]" data-selected-text-format="count">
<option value="">Enter Rate Per Page</option>
<?php $sql = "select * from unit_of";
$res = mysqli_query($db_handle, $sql);
while ($list = mysqli_fetch_assoc($res)) {
$unit_of = $list['unit_of'];
?>
<option><?= $unit_of; ?></option>
<?php
}
?>
</select>
Of course, with this approach, you'll need to add extra validation code to make sure that the placeholder option is not one of the selected options.
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
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
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>
I have a problem regarding obtaining id from Combo Box populating name of customer from a database containing field id & name. I want to get the id of name selected by user from Combo Box. Following is the code i have applied to populating Combo Box:
<input type="text" class="input-field" id="registerNumber" name="register_number"
list="register_number" placeholder="Select Register No" /></label>
<!-- Populating Editable ComboBox -->
<datalist id="register_number" >
<?php
$result_set= mysqli_query( $connection, "Select id, customer_name from
service_register ");
while($result = mysqli_fetch_assoc($result_set)){
echo "<option value=\"{$result["customer_name "]}\"
id=\"{$result["id"]}\"></option>";
}
?>
You dont have to set the type of the input to text and you should wrap the input with a form tag. The form tag will have the url of the server side code that will handle the form submission. A submit button should be provided for the user. For clarity you should visit this example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
<form action="server_code.php" method="get">
<input class="input-field" id="registerNumber" name="register_number"
list="register_number" placeholder="Select Register No" /></label>
<!-- Populating Editable ComboBox -->
<datalist id="register_number" >
<?php
$result_set= mysqli_query( $connection, "Select id, customer_name from
service_register ");
while($result = mysqli_fetch_assoc($result_set)){
echo "<option value=\"{$result["customer_name "]}\"
id=\"{$result["id"]}\"></option>";
}
?>
<input type="submit">
</form>