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()
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 have a drop down that is enabled by default and shows options populated from the database. When an option is selected that is now blank it enables the drop down to the side if it.
echo '
<script>
function check(){
if(document.getElementById("company").value!="")
document.getElementById("stores").disabled=false;
else
document.getElementById("stores").disabled=true;
}
</script>
<label class="form-control-label" for="input-last-name">Company</label>
<select type="text" id="company" name="company" class="form-control form-control-alternative" onchange="check()">
<option></option>';
$sql = "SELECT * FROM companies WHERE CompanyID != '4'";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<option value='.$row['CompanyID'].'>'.$row['CompanyName'].'</option>';
}
}
echo'
</select>
<label class="form-control-label" for="input-last-name">Store </label>
<select id="stores" name="stores" class="form-control form-control-alternative" disabled>
<option></option>';
$sql = "SELECT * FROM stores";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<option value='.$row['storeid'].'>'.$row['storename'].'</option>';
}
}
echo '
</select>';
As you can see selecting an item from the companies dropdown enables the stores dropdown to be enabled. However at the moment it shows all stores - not stores assigned to that company the SQL needs to be
SELECT * FROM store WHERE StoreID = $SelectedCompanyID
and not
SELECT * FROM store
I cannot work out a way to populate a variable to complete the query and reload the drop down correctly with correct stores without reloading the page and loosing the rest of the inputs already completed in the form.
Any help would be appreciated.
Created a new page called fetch_data.php with the following code below
<?php
if(isset($_POST['get_option']))
{
include('includes/config.php');
$companies = $_POST['get_option'];
$sql = "SELECT * FROM stores WHERE companyid = '$companies'";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<option value='.$row['storeid'].'>'.$row['storename'].'</option>';
}
}
exit;
}
?>
Changed my HTML / PHP to look like this
echo '
<script>
function check(){
if(document.getElementById("company").value!="")
document.getElementById("stores").disabled=false;
else
document.getElementById("stores").disabled=true;
}
</script>
<label class="form-control-label" for="input-last-name">Company</label>
<select type="text" id="company" name="company" class="form-control form-control-alternative" onchange="check()">
<option></option>';
$sql = "SELECT * FROM companies WHERE CompanyID != '4'";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<option value='.$row['CompanyID'].'>'.$row['CompanyName'].'</option>';
}
}
echo'
</select>
<label class="form-control-label" for="input-last-name">Store </label>
<select id="stores" name="stores" class="form-control form-control-alternative">
</select>';
Then finally implemented in the JavaScript to do it.
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: "post",
url: "fetch_data.php",
data: {
get_option:val
},
success: function (response) {
document.getElementById("stores").innerHTML=response;
}
});
}
</script>
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>
I have combobox
<select name="search_category[]" id="search_category_id">
<option value="" selected="selected"></option>
<?php
$query = "SELECT * FROM t_category ORDER BY category_name ASC";
$results = mysql_query($query);
while ($rows = mysql_fetch_assoc(#$results))
{?>
<option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
<?php
}?>
</select>
<span id="show_sub_categories" align="center">
And here is the JS
jQuery(document).ready(function($){
$('#loader').hide();
$('#show_heading').hide();
$('#search_category_id').change(function(){
$('#show_sub_categories').fadeOut();
$('#loader').show();
$.post("get_chid_categories.php", {
parent_id: $('#search_category_id').val(),
}, function(response){
setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
});
return false;
});
function finishAjax(id, response){
$('#loader').hide();
$('#show_heading').show();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function alert_id()
{
if($('#sub_category_id').val() == '')
alert('Please select a sub category.');
else
alert($('#sub_category_id').val());
return false;
}
How about if I have multiple combobox with different id?
Example:
<select name="search_category[]" id="search_category_id1">
<option value="" selected="selected"></option>
<?php
$query = "SELECT * FROM t_category ORDER BY category_name ASC";
$results = mysql_query($query);
while ($rows = mysql_fetch_assoc(#$results))
{?>
<option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
<?php
}?>
</select>
<select name="search_category[]" id="search_category_id2">
<option value="" selected="selected"></option>
<?php
$query = "SELECT * FROM t_category ORDER BY category_name ASC";
$results = mysql_query($query);
while ($rows = mysql_fetch_assoc(#$results))
{?>
<option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
<?php
}?>
</select>
I want the function running for that 2 combobox. But when tried to run the code, the function only run for first combobox. (The function is populate second combobox based on first combobox).
You need to load the second select in the $.post.success handler. Example (untested):
$.post("get_chid_categories.php",
{ parent_id: $('#search_category_id1').val() },
function (response){
loadSelect("search_category_id2", response);
}
);
function loadSelect(id, response){
$('#loader').hide();
$('#show_heading').show();
var target = $('#' + id);
target.html(decodeURIComponent(response));
if (!target.is(":visible")) {
target.fadeIn();
}
}
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);
}