Ok, so I've checked the net and the other questions on here and I'm stumped. I've tried a javascript solution from a question posted on here but I think it's not liking MySQL populating the <option>s. I'll copy all the code I've got including the javascript I have.
SCRIPT:
<script>
$(function() {
$('#groups').on('change', function() {
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function() {
if (
$(this).attr('data-group') === val || $(this).attr('data-group') === 'SHOW'
) {
$(this).show();
} else {
$(this).hide();
}
});
});
$('#groups').trigger('change');
});
</script>
PHP 1st dropdown:
<select class="form-control" id="groups">
<?php
$sql = "SELECT BoilerBrand FROM boilerbrands";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option value='".$row['ID']."'>".$row['BoilerBrand']."</option>";
}
?>
</select>
PHP 2nd dropdown
<select class="form-control" id="sub_groups">
<option data-group='SHOW' value="0">Model</option>
<?php
$sql = "SELECT * FROM boilermodels";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option data-group='".$row['BoilerBrand']."' value='".$row['BoilerGC']."'>".$row['BoilerModel']."</option>";
}
?>
</select>
Any help with this would be greatly appreciated!
Thanks :)
The way I normally do this is instead of hiding/showing the options I remove/add them. I believe if you hide the options then the select input can still have that value.
SCRIPT:
<script>
$(function(){
<?php
$sql = "SELECT * FROM boilermodels";
$result = mysql_query($sql);
$models = array();
while ($row = mysql_fetch_array($result)) {
$models[$row['BoilerBrand']][] = $row;
}
/* should look like
$models = [];
$models[1][] = ['ModelID'=>'1','BoilerBrand'=>'1','BoilerModel'=>'240E','BoilerGC'=>'47-777-77','BoilerImage'=>'47-777-77.jpg' ];
$models[1][] = ['ModelID'=>'3','BoilerBrand'=>'1','BoilerModel'=>'290D','BoilerGC'=>'11-111-11','BoilerImage'=>'11-111-11.jpg' ];
$models[2][]= ['ModelID'=>'2','BoilerBrand'=>'2','BoilerModel'=>'250E','BoilerGC'=>'47-777-77','BoilerImage'=>'47-777-77.jpg' ];
*/
?>
var _boilermodels = '<?php echo json_encode($models); ?>';
var jsonBoilerModels = JSON.parse(_boilermodels);
console.log(jsonBoilerModels);
$('#groups').on('change', function(){
var $this = $(this);
var val = $this.val();
var sub = $('#sub_groups');
sub.find('option').remove();
var appendList = [];
$.each(jsonBoilerModels[val],function(key,value){
appendList.push('<option value="'.concat(value['BoilerGC'], '">', value['BoilerModel'], '</option>'));
});
sub.append(appendList);
});
$('#groups').trigger('change');
});
</script>
1st Dropdown:
<select class="form-control" id="groups">
<?php
$sql = "SELECT ID ,BoilerBrand FROM boilerbrands";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option value='".$row['ID']."'>".$row['BoilerBrand']."</option>";
}
?>
</select>
2nd Dropdown:
<select class="form-control" id="sub_groups">
<option value="">Select A Model</option>
</select>
Related
I am using below admin pannel:
https://github.com/harsh4870/phpcoreadmin
I have below code in the form (\forms\customer_form.php) where I can see static array ( <?php $opt_arr = array("India", "Middle East", "Nepal", "South Indian"); ?>), I would like to replace this static array to be picked from the MySql database (Table name: CUSTOMER| Column_name: STATE).
Thanks in advance
<div class="form-group">
<label>State</label>
<?php $opt_arr = array("Maharashtra", "Kerala", "Madhya pradesh"); ?>
<select name="state" class="form-control selectpicker" required>
<option value=" ">Please select your state</option>
<?php
foreach ($opt_arr as $opt) {
if ($edit && $opt == $customer['state']) {
$sel = 'selected';
} else {
$sel = '';
}
echo '<option value="'.$opt.'"' . $sel . '>' . $opt . '</option>';
}
?>
</select>
</div>
You'll need to start a MySQL connection and then submit a query.
Here's a quote from W3Schools.
The SELECT statement is used to select data from one or more tables:
SELECT column_name(s) FROM table_name
or we can use the * character to select ALL columns from a table:
SELECT * FROM table_name
Below is an example.
<?php
// Connection Info
$host = "localhost";
$user = "myuser";
$pass = "mypass";
$db = "mydb";
// Start Connection
$link = new mysqli($host, $user, $pass, $db);
// Check Connection
if ($link->connect_error) {
// Error Handler
die("MySQL Connection Error: ".$link->connect_error);
}
// Prepare Query
$query = "SELECT 'AREA_NAME' FROM 'REIGONAL_AREA'";
// Submit Query
$result = $link->query($query);
// Check for Errors
if ($result) {
// Set counter
$i = 0;
// Set data variable
$opt_arr = [];
// Loop through data
while($current = $result->fetch_assoc()) {
$output[$i] = $current[0];
$i++;
}
?>
<!DOCUMENT html>
<html>
<head>
<!-- Header Elements Go Here -->
</head>
<body>
<div class="form-group">
<label>State</label>
<?php $opt_arr = array("Maharashtra", "Kerala", "Madhya pradesh"); ?>
<select name="state" class="form-control selectpicker" required>
<option value=" ">Please select your state</option>
<?php
foreach ($opt_arr as $opt) {
if ($edit && $opt == $customer['state']) {
$sel = 'selected';
} else {
$sel = '';
}
echo '<option value="'.$opt.'"' . $sel . '>' . $opt . '</option>';
}
?>
</select>
</div>
</body>
</html>
<?php
} else {
// Error Handler
die("MySQL Error: ".$link->error);
}
?>
I want to have the datalist from "Serienummer" change based on what "Product" is chosen.
<td>Product</td>
<td>
<Select name="ProductID" placeholder="Productnaam" required>
<?php
$query2 = "SELECT DISTINCT ProductID FROM HW_Serial WHERE Prefix = '$prefix'";
$result2 = mssql_query($query2);
$numRows = mssql_num_rows($result2);
while($row = mssql_fetch_array($result2))
{
$DisProductID=$row["ProductID"];
$query3 = "SELECT ProductID, ProductName FROM Products WHERE ProductID = '$DisProductID' order by ProductName";
$result3 = mssql_query($query3);
$numRows = mssql_num_rows($result3);
while($row = mssql_fetch_array($result3))
{
$xProductID=$row["ProductID"];
$xProductName=$row["ProductName"];
if ($ProductID == $xProductID) {
echo "<OPTION value =\"$xProductID\">$xProductName</OPTION>";
} else {
echo "<OPTION value =\"$xProductID\">$xProductName</OPTION>";
}
}
}
?>
</select>
</tr>
<tr>
<td>Serienummer</td>
<td>
<input list="devicesn" name="devicesn" autocomplete="off" placeholder="Serienummer" required>
<datalist id="devicesn">
<?php
$query2 = "SELECT devicesn FROM HW_Serial WHERE ProductID = '$ProductID' order by devicesn";
$result2 = mssql_query($query2);
$numRows = mssql_num_rows($result2);
while($row = mssql_fetch_array($result2))
{
$xdevicesn=$row["devicesn"];
if ($devicesn == $xdevicesn) {
echo "<OPTION value =\"$xdevicesn\">$xdevicesn</OPTION>";
} else {
echo "<OPTION value =\"$xdevicesn\">$xdevicesn</OPTION>";
}
}
?>
My guess is that this has to be done by use of JavaScript but I'm a complete beginner when it comes to that.
Thanks in advance
You can redirect to current page with parameter when <select> changed. And receive the parameter in your php code in datalist section.
For example:
<select name="ProductID" placeholder="Productnaam" required onchange="location.href='?product' + this.value">...</select>
Then I just say sorry, I do not know how to receive url parameters like yourpage?p=project in PHP.
I have a form with one Select option and 3 input text box. I fetch the value of select option from database. I want to change data of the 3 input field based on what i select. I try many ways but faild.
<Select onchange="update(this)">
<?php
$query = "SELECT * FROM wheel1 ORDER BY chair_no ASC";
$run = mysqli_query($connect, $query);
$i = 0;
while ($chair = mysqli_fetch_assoc($start)) {
$i++;
?>
<option value="<?php echo $chair['chair_no'];?>"><?php echo $i ?></option>
<?php
$name = $chair['name'];
$phone = $chair['phone'];
$detail = $chair['detail'];
}
?>
It fetch data perfectly for Select menu, But only store the last value for name phone and detail variable. Here is javascript code.
function update( elem ) {
var name = "<?php echo $name; ?>";
var phone= "<?php echo $phone; ?>";
var detail = "<?php echo $detail; ?>";
document.getElementById("name").innerHTML = name;
document.getElementById("phone").innerHTML = phone;
document.getElementById("detail").innerHTML = detail;
}
Any help is appricated. Thanks in advance.
Set diffirent attribute in options for name, phone and detail
Demo: https://jsfiddle.net/sjhhv4pw/
<select onchange="update(this)">
<?php
$query = "SELECT * FROM wheel1 ORDER BY chair_no ASC";
$run = mysqli_query($connect, $query);
$i = 0;
while ($chair = mysqli_fetch_assoc($start)) {
$i++;
?>
<option data-name="<?php echo $chair['name']; ?>" data-phone="<?php echo $chair['phone']; ?>" data-detail="<?php echo $chair['detail']; ?>" value="<?php echo $chair['chair_no'];?>"><?php echo $i ?></option>
<?php
}
?>
</select>
jQuery:
function update( elem ) {
var name = $(elem).find("option:selected").attr("data-name");
var phone= $(elem).find("option:selected").attr("data-phone");
var detail = $(elem).find("option:selected").attr("data-detail");
}
Try below code
<Select onchange="update(this)">
" data-phone="" data-chair-detail="" value="">
javascript code, considering you are using jQuery
function update( elem ) {
var name = ele.data('chair-name');
var phone= ele.data('phone');
var detail = ele.data('chair-detail');
}
I have here autocomplete script with not allowing value that not in the option list. But the problem is the script isn't working. When I tried to input, the only comes out in textbox is []. Why my script isn't working properly?
Script in Mainpage
<script>
$(function() {
$("#autocomplete").autocomplete('autocomplete.php?', { mustMatch: true });
});
function changeAutoComplete (val) {
$( "#autocomplete" ).autocomplete({
source: 'autocomplete.php?selected='+val
});
}
$('input#autocomplete').result(function(event, data, formatted) {
//$("#result").html(!data ? "No match found!" : "Selected: " + formatted);
}).keyup(function() {
$(this).search();
$(this).css("background-color", "#D6D6FF");
});
</script>
Html in Mainpage
Drop1
<?php
$mysqli = new mysqli("localhost", "root", "", "2015");
$combo = $mysqli->query("SELECT * FROM category GROUP BY cat_code ORDER BY id");
$option = '';
while($row = $combo->fetch_assoc())
{
$option .= '<option value = "'.$row['cat_code'].'">'.$row['category'].'</option>';
}
?>
<select id="main" name="main" onchange="changeAutoComplete(this.value)">
<option value="" selected="selected">Choose</option>
<?php echo $option; ?>
</select>
<input id="autocomplete" />
Here's my ajax in autocomplete.php
$mysqli = new mysqli("localhost", "root", "", "2015") or die("Database Error");
$auto = $mysqli->real_escape_string($_GET["term"]);
$selected = $mysqli->real_escape_string($_GET["selected"]);
$sql = $mysqli->query("SELECT * FROM code WHERE item LIKE '%$auto%' AND cat_code='$selected' GROUP BY id ORDER BY item" );
if($sql)
{
$str = array();
while($row=mysqli_fetch_array($sql))
{
$str[] = $row['item'];
}
echo json_encode($str);
}
Why my script doesn't work? I need to hide the sem dropdown when branch dropdown is select ALL. I try script below but it doesn't work.
And this is my script
<script>
$(document).ready(function () {
$('#branch').change(function () {
if (this.value != "ALL") {
$('#sem').show();
} else {
$('#sem').hide();
}
});
});
</script>
</head>
<body onload=showCourses(str="ALL")>
<select name="branch" id="branch" onchange="showCourses()">
<option value="ALL" selected='ALL'>ALL</option>
<?php
$mysqli = new mysqli("localhost", "root", "", "app");
$result = $mysqli->query("SELECT * FROM app GROUP BY app_cn ORDER BY app_cn");
while($row = $result->fetch_assoc())
{
echo '<option value="'.$row['app_cn'].'">'.$row['app_cn'].'</option>';
}?>
</select>
<select name="sem" id="sem" onchange="showCourses()">
<?php
$mysqli = new mysqli("localhost", "root", "", "app");
$result = $mysqli->query("SELECT * FROM app GROUP BY app_plan_no ORDER BY app_plan_no");
while($row = $result->fetch_assoc())
{
echo '<option value="'.$row['app_plan_no'].'">'.$row['app_plan_no'].'</option>';
}?>
</select>
check for this in if statement:
$('option:selected', this).val()