I'm trying to create a two dropdown that are dynamics, by selecting an option, it changes the other one, just like the Country and Cities examples we see in websites nowadays, but in my case, I want by selecting a Store, it shows all the franquises. I don't know why it's not working.
Here's the code:
<div class="row wow fadeInRight">
<div class="col-sm-3 col-sm-offset-2">
<form action="#">
<div class="form-group">
<label id="drops-labels"><b id="centraliza-txt">Store</b></label>
<span data-toggle="tooltip" data-placement="top" title="Choose a Store">
<?php echo "<select class='form-control input-sm' name='store' id='store-list' onChange='pickFranch(this.value)'>";
echo "<option value='0'>---Select---</option>";
while($dadosRedes = mysql_fetch_array($buscarDadosSuperv)) {
echo "<option value='".$dadosRedes['Store']."'>".$dadosRedes['Store']."</option>";
}
echo "</select>";
?>
</span>
</div>
</form>
</div>
<div class="col-sm-3">
<label id="drops-labels"><b id="centraliza-txt">Franchise</b></label>
<select name="franch" id="franch-list" class='form-control input-sm'">
<option value="0">---Select---</option>
</select>
</div>
<script>
function pickFranch(val) {
$.ajax({
type: "POST",
url: "ajaxPickStore.php",
data: // i dont know what to put here
success: function(data){
$("#lojas-list").html(data);
}
});
}
</script>
AjaxPickStore.php
<?php session_start();
require_once("connect.php");
$db_handle = new DBController();
if(!empty($_POST["store_id"])) {
$query ="SELECT Loja FROM indicadores_rv_m1 WHERE store = '".$_POST['store_id']."' and Supervisor = '".$_SESSION['usuarioNome']."'";
$results = $db_handle->runQuery($query);
?>
<option value="0">---Select---</option>
<?php
foreach($results as $franch) {
?>
<option value="<?php echo $franch["franch"]; ?>"><?php echo $franch["franch"];?></option>
<?php
}
}
?>
I barely know Ajax, so if you could explain the synthax also, it'd help me a lot!
Ty
Related
Here is a code button code
<h2 class="single-heading">
<?php echo get_the_title(); ?>
Review
<a href="
<?php echo home_url().'/submit-review/'; ?>
" class="btn btn-light text-right pbd-title-btn" id="title" value="
<?php echo get_the_title($post->ID); ?>
" >
<i class="fa fa-plus" aria-hidden="true">
</i>Write a Review</a>
</h2>
I want that post or button value in the dropdown list as a selected value. here is a second page form code
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<label class="control-label">Select Breeder Name/Entity <span class="required">*</span></label>
<select class="category form-control" data-placeholder="Select an option" id="pbd_review_name" name="pbd_review_name_id" >
<option value="">Select an option</option>
<?php $res = get_posts(array('post_type' => 'review', 'post_status' => 'publish', 'posts_per_page' => -1));
if(!empty($res)){
foreach($res as $row){
$b_name = $row->post_title;
$b_photo = get_post_meta($row->ID,'photo',true);
$b_suburb = get_post_meta($row->ID,'suburb',true);
$b_state = get_post_meta($row->ID,'state',true);
$b_website = get_post_meta($row->ID,'website',true);
echo '<option value="'.$row->ID.'" data-name="'.$b_name.'" data-photo="'.$b_photo.'" data-suburb="'.$b_suburb.'" data-state="'.$b_state.'" data-website="'.$b_website.'" >'.$b_name.'</option>';
}
}
?>
</select>
</div>
In this dropdown list posts value is already prompted. But i want post name as a selected option value.
I hope you understand my question.
Thanks
You can try sending the value in $_REQUEST/$_POST and the compare the value in the dropdown:
<?php
$value=$_REQUEST['value']; //value with which you want to compare
//then in loop
echo '<option value="'.$row->ID.'" <?php echo ($val == $value)?"selected":"" ?> >'.$b_name.'</option>';
//$val is the value which is received in dropdown i.e $row->ID $value is the value you received in $_REQUEST
You can use method $_GET for trasport value to other page then use selected method:
<?php
$value=$_GET['VALUE1']
$othervalue=$_GET['VALUE2']
echo '<option value="$value" selected>$othervalue</option>
EDIT:
All code, in the first page a use "/submit-review.php?valueid=$ID&valuename=$NAME" for trasport value to next page :
<h2 class="single-heading">
<?php echo get_the_title(); ?>
Review
<a href="
<?php echo home_url().'/submit-review.php?valueid=$ID&valuename=$NAME'; ?>
" class="btn btn-light text-right pbd-title-btn" id="title" value="
<?php echo get_the_title($post->ID); ?>
" >
<i class="fa fa-plus" aria-hidden="true">
</i>Write a Review</a>
</h2>
And on the next page i will convert $_GET to the local variable for use it on selected box:
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<label class="control-label">Select Breeder Name/Entity <span class="required">*</span></label>
<select class="category form-control" data-placeholder="Select an option" id="pbd_review_name" name="pbd_review_name_id" >
<?php
$valueID= $_GET['valueid'];
$valueNAME= $_GET['valuename'];
echo "<option value='$valueID' selected>$valueNAME</option>";
$res = get_posts(array('post_type' => 'review', 'post_status' => 'publish', 'posts_per_page' => -1));
if(!empty($res)){
foreach($res as $row){
$b_name = $row->post_title;
$b_photo = get_post_meta($row->ID,'photo',true);
$b_suburb = get_post_meta($row->ID,'suburb',true);
$b_state = get_post_meta($row->ID,'state',true);
$b_website = get_post_meta($row->ID,'website',true);
echo '<option value="'.$row->ID.'" data-name="'.$b_name.'" data-photo="'.$b_photo.'" data-suburb="'.$b_suburb.'" data-state="'.$b_state.'" data-website="'.$b_website.'" >'.$b_name.'</option>';
}
}
?>
</select>
edit 3:
use SESSION for resolve your problem(first page):
<h2 class="single-heading">
<?php echo get_the_title(); ?>
Review
<a href="
<?php echo home_url().'/submit-review/'; ?>
" class="btn btn-light text-right pbd-title-btn" id="title" value="
<?php echo get_the_title($post->ID); ?>
" >
<i class="fa fa-plus" aria-hidden="true">
</i>Write a Review</a>
</h2>
$_SESSION['id'] = $post->ID;
$_SESSION['title'] = $post->title;
On the second page:
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<label class="control-label">Select Breeder Name/Entity <span class="required">*</span></label>
<select class="category form-control" data-placeholder="Select an option" id="pbd_review_name" name="pbd_review_name_id" >
<?php
$valueID= $_SESSION['id'];
$valueNAME= $_SESSION['title'];
echo "<option value='$valueID' selected>$valueNAME</option>";
$res = get_posts(array('post_type' => 'review', 'post_status' => 'publish', 'posts_per_page' => -1));
if(!empty($res)){
foreach($res as $row){
$b_name = $row->post_title;
$b_photo = get_post_meta($row->ID,'photo',true);
$b_suburb = get_post_meta($row->ID,'suburb',true);
$b_state = get_post_meta($row->ID,'state',true);
$b_website = get_post_meta($row->ID,'website',true);
echo '<option value="'.$row->ID.'" data-name="'.$b_name.'" data-photo="'.$b_photo.'" data-suburb="'.$b_suburb.'" data-state="'.$b_state.'" data-website="'.$b_website.'" >'.$b_name.'</option>';
}
}
?>
</select>
I made this work already but somehow it stopped working. I want to display informations from database related to the chosen data from the select box without clicking a button so I used ajax.
The button "Approve Clearance" is used for another action which is I wished to used after the display of data.
There is a div with id #records which is hidden and will show upon display of data.
<div class="card-body">
<form id="gform" action="action/actionclearance.php" method="POST">
<label>Student ID</label>
<select id="stud_id" name="stud_id" class="form-control col-md-6" required>
<option selected="selected">Select Student ID</option>
<?php
$mysqli = new mysqli ('localhost', 'u220931635_arug', 'Smarvcdsl2019', 'u220931635_arug') or die (mysqli_error($mysqli));
$resultset = mysqli_query($mysqli, "SELECT * FROM tbl_student where delete_flag = 0");
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option><?php echo $rows["stud_id"]; ?></option>
<?php } ?>
</select>
<br>
<button type="submit" class="btn btn-primary btn-md" name="gclear" id="gclear" class="gclear"><i class="fas fa-check-double"></i> Approve Clearance</button>
</form>
</div>
<div class="card-footer">
<div id="display">
<div class="row" id="heading" style="display:none;">
<tr>
<th class="text-center">
<div class="col-sm-6">
<strong>Student</strong>
</div>
</th>
</tr>
</div>
<div class="row" id="records">
<tr>
<td>
<div class="col-sm-6">
<span id="stud_fname"></span>
<span id="stud_mname"></span>
<span id="stud_lname"></span>
<span id="stud_suffix"></span>
</div>
</td>
</tr>
</div>
<div class="row" id="no_records">
<div class="col-lg-12 text-center">
Plese select Student ID to view details</div>
</div>
</div>
</div>
</div>
Below is the ajax code I used to display data without clicking a button.
<script>
$(document).ready(function(){
// code to get all records from table via select box
$("#stud_id").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'stud_id='+ id;
$.ajax({
url: 'getstudent.php',
dataType: "json",
data: dataString,
cache: false,
success: function(studentData) {
if(studentData) {
$("#heading").show();
$("#no_records").hide();
$("#stud_fname").text(studentData.stud_fname);
$("#stud_mname").text(studentData.stud_mname);
$("#stud_lname").text(studentData.stud_lname);
$("#stud_suffix").text(studentData.stud_suffix);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
});
});
</script>
This is the getstudent.php which is connected to the database where ajax gets datas to display.
<?php
include("../configAdmin.php");
if($_REQUEST['stud_id']) {
$mysqli = new mysqli ('localhost', 'u220931635_arug', 'Smarvcdsl2019', 'u220931635_arug') or die (mysqli_error($mysqli));
$resultset = mysqli_query($mysqli, "SELECT * FROM tbl_student where delete_flag = 0 AND stud_id ='".$_REQUEST['stud_id']."'");
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
}
?>
without using ajax you can do this
<select id="stud_id" name="stud_id" class="form-control col-md-6" required>
<option selected="selected">Select Student ID</option>
<?php
$mysqli = new mysqli ('localhost', 'u220931635_arug', 'Smarvcdsl2019', 'u220931635_arug') or die (mysqli_error($mysqli));
$resultset = mysqli_query($mysqli, "SELECT * FROM tbl_student where delete_flag = 0");
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["stud_id"]; ?>"><?php echo $rows["stud_id"]; ?></option>
<?php } ?>
</select>
I am unable to fetch the data in the second dropdown(which is depended upon the first dropdown). e.g. when we select country then the relevant state should be displayed but it doesn't. see my code.
my html
<?php
require 'dbconfig.php';
?>
<label class="control-label">Select Distict</label>
<div class="form-group">
<div class="col-lg-6">
<select class="form-control" name=dist id=dist>
<option value='' selected>Select</option>
<?Php
$ddObj = new USER($DB_con);
$table= "tbl_dist";
$sel = $ddObj->dropdowndist($table);
foreach ($sel as $val) {
echo "<option value=$val[dist_id]>$val[dist_name]</option>";
}
?>
</select>
</div>
</div>
<label class="control-label">Select Block</label>
<div class="form-group">
<div class="col-lg-6">
<select class="form-control" name=block id=block>
</select>
</div>
</div>
my jquery
<script>
$(document).ready(function() {
$('#dist').change(function(){
var dist_id=$('#dist').val();
$('#block').empty(); //remove all existing options
$.get('ddblock.php',{'dist_id':dist_id},function(return_data){
$.each(return_data.data, function(key,value){
$("#block").append("<option value='" + value.block_id +"'>"+value.block_name+"</option>");
});
}, "json");
});
});
</script>
ddblock.php
<?Php
$dist_id=$_GET['dist_id'];
if(!intval($dist_id)){
echo "Data Error";
exit;
}
require 'class.user.php';
$ddObj = new USER($DB_con);
$table = "tbl_block";
$result = $ddObj->fetch_block($table,$dist_id);
$main = array('data'=>$result);
echo json_encode($main);
}
?>
class.user.php
public function fetch_block($table,$dist_id){
try
{
$sel = $this->db->prepare("SELECT * FROM $table WHERE block_dist_id=:dist_id");
$sel->bindValue(':dist_id', $dist_id);
$sel->execute();
$rs = $sel->setFetchMode( PDO::FETCH_ASSOC );
return $sel;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
I currently working with voting system. Everytime a voter selects a candidate the javascript should work but nothing happens. Here is my code.
<?php while ($row = $stmt->fetch()) { ?>
<div class="form-group">
<div class="row">
<label class="control-label col-md-3 col-md-push-1" id="labelpad" for="username"><?php echo $row['position']; ?></label>
<div class="col-md-6 col-md-push-0"><br>
<?php
$stmt1 = $con->prepare("SELECT * FROM candidate WHERE position = ?");
$stmt1->bindParam(1, $row['position']);
$stmt1->execute();
while ($row1 = $stmt1->fetch())
{
?>
<label>
<input id="" class="uniform_on" name="selector[]" type="checkbox" value="<?php echo $row1['candidate_id'];?>">
</label>
<?php echo "<label>".$row1['name']."</label>"; ?><br>
<script>
$(".uniform_on").change(function(){
var max= <?php $row1['vote_limit'];?>
if( $(".uniform_on:checked").length == max {
$(".uniform_on").attr('disabled', 'disabled');
alert('5 Items allowed per borrow');
$(".uniform_on:checked").removeAttr('disabled');
}else{
$(".uniform_on").removeAttr('disabled');
}
})
</script>
<?php } ?>
</div>
</div>
Sorry if it was discussed before, but all of them doesn't really work for me. I have 5 dropdowns they are Brand, Model, Color, Engine No. and Chassis No., My question is what should I do to make the dropdown of the model is based on the selected dropdown of Brand, for example If a user selects Honda well based on my posted image in my database, the BrandID of Honda is 1 so all of the model that has the BrandID = 1. The dropdown of the model shown are only that has a brandID =1. Then the dropdown of color is based on the dropdown of the model, so the same logic like I discussed earlier. Finally the Dropdown of Engine No. and Chasis No. is based on the dropdown of the color, also the same as the logic that I discussed.
Here's my code for the brand dropdown
<label for="bName" class="control-label col-xs-4"><p class="left">Brand</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$bsql="SELECT bName, brandID FROM brand order by bName";
$bstmt=$con->prepare($bsql);
$bstmt->execute();
$bstmt->bind_result($bName, $bid);
$bstmt->store_result();
echo "<select name='brandID' class='form-control'>
<option value=''></option>";
while ($bstmt->fetch()){
echo '<option value="'.$bid.'">'.$bName.'</option>';
}
echo '</select>';
?>
</div>
</div>
Heres the code for the dropdown of the model
<label for="model" class="control-label col-xs-4">
<p class="left">Model</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$msql="SELECT model, modID FROM model order by model";
$mstmt=$con->prepare($msql);
//$mstmt->bind_param('i', $bid);
$mstmt->execute();
$mstmt->bind_result($model, $mid);
$mstmt->store_result();
echo "<select name='mID' class='form-control'>
<option value=''></option>";
while ($mstmt->fetch()){
echo '<option value="'.$mid.'">'.$model.'</option>';
}
echo '</select>';
?>
</div>
</div>
Heres the code for color dropdown
<label for="model" class="control-label col-xs-4"><p class="left">Color</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$csql="SELECT distinct(color) FROM stock order by color";
$cstmt=$con->prepare($csql);
$cstmt->execute();
$cstmt->bind_result($color);
$cstmt->store_result();
echo "<select name='color' class='form-control'>
<option value=''></option>";
while ($cstmt->fetch()){
echo '<option value="'.$color.'">'.$color.'</option>';
}
echo '</select>';
?>
</div>
</div>
Heres the code for the dropdown Engine No.
<label for="engNum" class="control-label col-xs-4">
<p class="left">Engine No</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$esql="SELECT engNum FROM stock where status='Available' order by engNum";
$estmt=$con->prepare($esql);
$estmt->execute();
$estmt->bind_result($engNum);
$estmt->store_result();
echo "<select name='engNum' class='form-control'>
<option value=''></option>";
while ($estmt->fetch()){
echo '<option value="'.$engNum.'">'.$engNum.'</option>';
}
echo '</select>';
?>
</div>
</div>
Heres the code for the dropdown Chasis No.
<label for="chassisNum" class="control-label col-xs-4"><p class="left">Chassis No</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$nsql="SELECT chassisNum FROM stock where status='Available' order by chassisNum";
$nstmt=$con->prepare($nsql);
$nstmt->execute();
$nstmt->bind_result($chassisNum);
$nstmt->store_result();
echo "<select name='chassisNum' class='form-control'>
<option value=''></option>";
while ($nstmt->fetch()){
echo '<option value="'.$chassisNum.'">'.$chassisNum.'</option>';
}
echo '</select>';
?>
</div>
</div>
Heres the Image for my brand database
Heres the Image for my model database
Heres the Image for the color, chasis no. and engine no. database
Write an onchange event on select tag
for e.g. to change the Models based on brand selected you should write
<label for="bName" class="control-label col-xs-4"><p class="left">Brand</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$bsql="SELECT bName, brandID FROM brand order by bName";
$bstmt=$con->prepare($bsql);
$bstmt->execute();
$bstmt->bind_result($bName, $bid);
$bstmt->store_result();
echo "<select name='brandID' class='form-control' **onchange='getModels(this)'**>
<option value=''></option>";
while ($bstmt->fetch()){
echo '<option value="'.$bid.'">'.$bName.'</option>';
}
echo '</select>';
//The function getModels(this) will get called whenever user will change the value of the brand option.
Now define this method in your js file
function getModels(BrandObj)
{
brandValue=BrandObj.value; // Will give you the ID of brand which is selected.
// Make A ajax call to some php file which will return models based on brand ID & bind it to your Models Dropdown
$.ajax({
url: 'getModels.php',
type: 'GET', // Method Type
data: 'brandID=brandValue',// This parameter will be sent to getModels.php
success: function(**data**) {
//called when successful the data we have returned in getModels.php will be accessible in "data" variable
// Decode the response & bind it to your dropdownList
},
error: function(e) {
//called when there is an error
//console.log(e.message);
}
});
}
// IN your getModels.php file write following code
$BrandID=#$_GET['brandID'];
//Connect to database
// Write a sql to find models having brand_id=$BrandID
// Fetch rows & create array of Models & return it using
echo json_encode(*your_array_name*)
// END getModels.php
// You can find the detailed documentation of AJAX
http://api.jquery.com/jquery.ajax/