I have been struggling to get this to work but no success. Researched many tutorials and videos but still not working.
I have a Region Table in my DB with region_id(PK) and region_name as columns.
I also Center Table with center_id(PK), center_name and region_id(FK)
region_id is foreign key on center table
I have the register.php file that fetches the datafrom DB and Ajax.php
It's only the select dropdown of region that's working. The Centers under the selected region will not display in the Center Select dropdown.
Register.php
<?php
session_start();
require_once $_SERVER['DOCUMENT_ROOT'] . '/soap/includes/server.php';
?>
<html>
<body>
<div class="p-t-31 p-b-9">
<span class="txt1">
Region
</span>
</div>
<div class="wrap-input100 validate-input" data-validate
= "Region is required">
<span class="focus-input100"></span>
<select class='input100' name='region'>
<option value disabled selected>Select
Region</option>
<?php
$sql = mysqli_query($con,"SELECT * FROM
region");
while($row=mysqli_fetch_array($sql))
{
echo '<option
value="'.$row['region_id'].'">'.$row['region_name'].'</option>';
}
?>
</select>
</div>
<br>
<span class="error"><?php echo $regionError;?></span>
<div class="p-t-31 p-b-9">
<span class="txt1">
Center
</span>
</div>
<div class="wrap-input100 validate-input" data-validate
= "Center is required">
<span class="focus-input100"></span>
<select class='input100' name='center'>
<option value="">Select Center</option>
</select>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".region").change(function()
{
var region_id=$(this).val();
var post_id = 'id='+ region_id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(centers)
{
$(".center").html(centers);
}
});
});
});
</script>
</div>
<br>
<span class="error"><?php echo $centerError;?></span>
Ajax.php
<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/soap/includes/server.php';
if($_POST['id']){
$id=$_POST['id'];
if($id==0){
echo "<option>Select Center</option>";
}else{
$sql = mysqli_query($con,"SELECT * FROM center WHERE
region_id='$id'");
while($row = mysqli_fetch_array($sql)){
echo '<option
value="'.$row['center_id'].'">'.$row['center_name'].'</option>';
}
}
}
?>
</body>
</html>
Thanks Guys.
You pointed out my errors. I just added class='region' and 'center' to 'input100' classes on both select fields.
Thanks for helping me out. I appreciate.
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".region").change(function()
{
var region_id=$(this).val();
var post_id =region_id;
var post_id=JSON.stringify(post_id);
$.ajax
({
type: "POST",
url: "ajax.php",
data:{"id":post_id},
cache: false,
success: function(centers)
{
var centers=JSON.parse(centers);
$(".center").html(centers);
}
});
});
});
</script>
Related
code:
<script>
$(document).ready(function(){
$("#source").change(function(){
source = $(this).val();
$.ajax({
type:"POST",
data:{"source":source},
url:"get-source.php",
success:function(data){
show = JSON.parse(data);
$("#total").html(show.total);
$("#sources").html(show.sources);
$("#progress1").attr('data-percent', 5);
$("#progress1").data('percent', 5);
}
});
});
$("#tech").change(function(){
tech = $(this).val();
$.ajax({
type:"POST",
data:{"tech":tech},
url:"get-tech.php",
success:function(data){
show = JSON.parse(data);
$("#per_tech").html(show.per_tech);
$("#techno").html(show.techno);
$("#progress2").attr('data-percent', 5);
$("#progress2").data('percent', 5);
}
});
});
});
</script>
<select name="source" id="source" class="form-control">
<option>Select Source</option>
<?php
$sql = "select name from source";
$res = mysqli_query($con,$sql);
while($rows = mysqli_fetch_array($res))
{
echo "<option value='".$rows['name']."'>".$rows['name']."</option>";
}
?>
</select>
<select name="tech" id="tech" class="form-control">
<option>Select Technology</option>
<?php
$sql = "select name from course";
$res = mysqli_query($con,$sql);
while($rows = mysqli_fetch_array($res))
{
echo "<option value='".$rows['name']."'>".$rows['name']."</option>";
}
?>
</select>
<div class="bar-chart">
<div class="chart clearfix">
<div class="item">
<div class="bar">
<span class="percent"><div id="total"></div></span>
<div class="progress" id="progress1" data-percent="75">
<span class="title"><div id="sources"></div></span>
</div>
</div>
</div>
<div class="item">
<div class="bar">
<span class="percent"><div id="per_tech"></div></span>
<div class="progress" id="progress2" data-percent="">
<span class="title"><div id="techno"></div></span>
</div>
</div>
</div>
</div>
</div>
In this code I have created percent progress bar. Now in my ajax file i.e. get-source.php and get-tech.php I have calculated percentage through query which working fine and also show in progress bar but the problem is when I change any value from dropdown it shows percentage but I am unable to pass a dynamic value to data-percent through ajax. So, How can I do this? Please help me.
Thank You
In your ajax code, you have to set the data-percent value dynamically.Right now it's only pass the $("#progress2").attr('data-percent', 5); every time.
It's should be like this,
$("#tech").change(function(){
tech = $(this).val();
$.ajax({
type:"POST",
data:{"tech":tech},
url:"get-tech.php",
success:function(data){
show = JSON.parse(data);
$("#per_tech").html(show.per_tech);
$("#techno").html(show.techno);
$("#progress2").attr('data-percent', show.per_tech);//here you can pass the value
}
})
I am trying to implement dependent dropdown using ajax and php. But anyhow the response from second dropdown is not coming. after checking in console, I am able to see the id of first dropdown but no response from second dropdown. So, When i click on first dropdown, I just get a blank value in Second dropdown.
HTML Code
<div class="col-md-6">
<?php
require_once('db.php');
$varient_result = $conn->query('select * from tv_varient');
?>
<select name="varient" id="varient-list" class="form-control c-square c-theme" required>
<option value="">Select Varient</option>
<?php
if ($varient_result->num_rows > 0) {
// output data of each row
while($row = $varient_result->fetch_assoc()) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
}
?>
</select>
</div>
</br></br>
<label for="inputPassword3" class="col-md-4 control-label" style="margin-left: 15px;">Price:</label>
<div class="col-md-6">
<select name="price" id="price-list" class="form-control c-square c-theme" required>
<option value=''>Select Price *</option>
</select>
<div>
</div>
</div>
</div>
</div>
</div>
AJAX Code
<script>
$('#varient-list').on('change', function(){
var varient_id = this.value;
$.ajax({
type: "POST",
url: "get_price.php",
data:'varient_id='+varient_id,
success: function(result){
$("#price-list").html(result);
}
});
});
</script>
get_price.php
?php
require_once('db.php');
//$country_id = mysqli_real_escape_string($_POST['country_id']);
//var_dump($country_id);
//var_dump($_POST['country_id']);
$varient_id = $_POST['veriant_id'];
echo $varient_id;
//var_dump($varient_id);
var_dump($_POST['varient_id']);
if($varient_id!='')
{
$states_result = $conn->query('select * from tv_price where veriant_id='.$varient_id.'');
$options = "<option value=''>Select Price</option>";
while($row = $states_result->fetch_assoc()) {
$options .= "<option value='".$row['price']."'>".$row['price']."</option>";
}
echo $options;
}
?>
Try below code,
$(document).on('change', '#varient-list', function(e)
{
var varient_id = this.value;
$.ajax({
type: "POST",
url: "get_price.php",
data:'varient_id='+varient_id,
success: function(result){
$("#price-list").html(result);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
varient_id & veriant_id on the POST is wrong (the e & a difference).
$varient_id = $_POST['veriant_id']; should be $varient_id = $_POST['varient_id'];
I am trying to get the price of Item after selecting the item in a dropdown. I have used ajax calls but my code is not going inside $.ajax({.... What is wrong with my code?
I have used alert in the php file but nothing displays, which means my code is not calling php file.
<script type='text/javascript'>
$("#puja_name2").on('change',function()
{
var id=$(this).val();
var data = 'id='+ id;
$.ajax({
type: "POST",
url: "../ajax_price.php",
data: data,
cache: false,
success: function(html)
{
$("#puja_price2").html(data);
}
});
});
</script>
<div class="form-group">
<label>
Puja Name<span class="font-red">* </span>:
</label>
<select class="form-control" name="puja_name2" id="puja_name2" data-validetta="required">
<option value="">Select Puja Name</option>
<?php
$SQL_STATEMENT_puja = $DatabaseCo->dbLink->query("SELECT * FROM puja_type ");
while($DatabaseCo->dbRow = mysqli_fetch_object($SQL_STATEMENT_puja)){
?>
<option value="<?php echo $DatabaseCo->dbRow->puja_id; ?>" ><?php echo $DatabaseCo->dbRow->puja_name; ?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label> Price <span class="font-red">* </span>:</label>
<select id="puja_price2" >
</select>
</div>
You must change in jquery puja_name to puja_id:
$("#puja_id").on('change',function()
A couple things wrong with your code bud:
1) You have
$(document).ready(function(){
<script>
//code
</script>
}
What your code should look like is:
<script type="text/javascript">
$(document).ready(function() {
//code
});
</script>
If you need to add comments in your JS code, DO NOT use <!-- -->. Instead use // like you see in my code above.
2) You need to change in your jquery puja_name to puja_id because your <select></select> id is puja_id so:
this
$("#puja_name").on('change',function() {
turns to this
$("#puja_id").on('change',function() {
3) I'm not the greatest at SQL statements but I do feel that using the code below would help you even more (you don't HAVE to).
<?php
$SQL_STATEMENT_puja = "SELECT * FROM puja_type WHERE status='APPROVED' ORDER BY puja_name ASC";
$DatabaseCo = $conn->query($SQL_STATEMENT_puja);
$puja=$row['puja']; //This should actually be $puja=$row['puja_id'];
while($row = $DatabaseCo->fetch_assoc()) {
?>
<option value="<?php echo $row['puja_id']; ?>" <?php if($row['puja_id']==$puja) { echo "selected"; } ?>><?php echo $row['>puja_name']; ?></option>
<?php
}
?>
4) In your JQuery you have it as $("#puja_price").html(html); it should be $("#puja_price").html(data);
5) I also see that you have it as #puja_price but there's nothing in your html that has the id of puja_price so
I recommend changing this
$("#puja_price").html(html); to
$("#puja_price2").html(data);
6) Your JQuery code is
$.ajax
({
When it should be: $.ajax({
Full code:
<div class="form-group">
<label>
Puja Name<span class="font-red">* </span>:
</label>
<select class="form-control" name="puja_id" id="puja_id" data-validetta="required">
<option value="">Select Puja Name</option>
<?php
//If you already have the connection setup you don't need to add this
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$SQL_STATEMENT_puja = "SELECT * FROM puja_type WHERE status='APPROVED' ORDER BY puja_name ASC";
$DatabaseCo = $conn->query($SQL_STATEMENT_puja);
$puja=$row['puja'];
while($row = $DatabaseCo->fetch_assoc()) {
?>
<option value="<?php echo $row['puja_id']; ?>" <?php if($row['puja_id']==$puja) { echo "selected"; } ?>><?php echo $row['>puja_name']; ?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label>
Price <span class="font-red">* </span>:
</label>
<input type="text" class="form-control " id="puja_price2" name="puja_price2" disabled>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#puja_id").on('change',function() {
var id=$(this).val();
var data = 'id='+ id;
$.ajax({
type: "POST",
url: "../ajax_price.php",
cache: false,
data: data,
success: function(html) {
$("#puja_price2").html(data);
}
});
});
});
</script>
Let me know if the changes work for you
Try this in your JS code.
<script src="jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#puja_id').change(function(){
var id = $(this).val();
var data = 'id='+id;
$.ajax({
type: "POST",
url: "../ajax_price.php",
data: data,
cache: false,
success:function(res){
$('#puja_price2').html(res);
}
});
});
});
</script>
I'm trying to populate a Select Box based in the choice of the first Select Box, but I'm having some troubles doing it. Simply nothing happens.
What I have until now (this is on my footer):
<script src="./plugins/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.category").change(function(){
var selectedCategory = $(".category option:selected").val();
$.ajax({
type: "POST",
url: "../inc/get_subcat.php",
data: { category : selectedCategory }
}).done(function(data){
$("#subcategory").html(data);
});
});
});
</script>
The page with the div is located at /pages/file.php:
<div class="col-md-6">
<div class="form-group">
<label class="control-label">SubCategory</label>
<div id="subcategory"> </div>
</div> </div>
The file that does the query is in another folder (inc/get_subcat.php):
<?php
include("config.php");
if(isset($_POST['category'])){
$cat = validar($_POST['category']);
$query = "SELECT id, subcategory FROM subcategories WHERE catid = ?";
#Prepare stmt or reports errors
($stmt = $mysqli->prepare($query)) or trigger_error($mysqli->error, E_USER_ERROR);
#Execute stmt or reports errors
$stmt->bind_param("i", $cat);
$stmt->execute() or trigger_error($stmt->error, E_USER_ERROR);
#Save data or reports errors
($stmt_result = $stmt->get_result()) or trigger_error($stmt->error, E_USER_ERROR);
#Check if are rows in query
if ($stmt_result->num_rows>0) {
echo "<select class='form-control' id='subcategory' name='subcategory'>";
# Save in $row_data[] all columns of query
while($row_data = $stmt_result->fetch_assoc()) {
# Action to do
echo "<option value='$row_data[id]'>$row_data[category]</option>";
}
echo "</select>";
}
$stmt->close();
}
?>
There is someone that could help me trying to fix this error? Can't fix despite trying for some hours.
Thanks!
Edit:
This is the HTML code with all Select Box:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Category</label>
<select class='form-control' id='category' name='category'><option value='1'>Categoria 1</option><option value='2'>Categoria 2</option></select> </div>
</div>
<div class="col-md-6" id="subcategory">
</div>
</div>
In your HTML you have<select class='form-control'...etc
So the <select> has a class "form-control" only.
But your selector is $("select.category").change...etc. which means it's looking for a select with "category" in the class attribute (the dot . in the selector signifies a class). Such an element doesn't exist, hence why nothing happens.
Perhaps you meant to use the ID (in which case $("#category").change...etc)? Either that or you need to write <select class='form-control category'...etc before it will work.
May be problem in your array data or query. So please check it first.
I post here working example of depending drop down may be this will help you.
PHP code
$sub_category // Your array of Subcategory;
if ($sub_category) {
echo '<option value="">Sub Category</option>';
foreach ($sub_category as $sub_category) {
$selected = '';
if($sub_category['sub_category_id'] == $data['product']['sub_category_id'])
{
$selected = 'selected';
}
echo '<option value="' . $sub_category['sub_category_id'] . '" '.$selected.'>' . $sub_category['sub_category'] . '</option>';
}
}
JS code
<script type="text/javascript">
loadSubCategory();
jQuery(document).ready(function($) {
$(document).on('change', '.category_id', function(event) {
event.preventDefault();
loadSubCategory();
});
});
function loadSubCategory()
{
var category_id = $(".category_id option:selected").val();
$.ajax({
url: 'Your Path Of server Function',
type: 'post',
data: {category_id: category_id, product_id : "<?= $product['product_id']?>" },
cache: false,
success: function (resp) {
if(resp)
{
$('.sub_category_id').html(resp);
} else {
$('.sub_category_id').html('<option value="">Sub Category</option>');
}
}
})
}
</script>
HTML Code
<div class="form-group">
<b>Product Category </b>
<select class="form-control category_id" id="category_id" name="category_id">
<option>Category</option>
<?php
<option value="<?= $value['category_id'] ?>" <?=$selected ?> ><?= $value['category'] ?></option>
</select>
</div>
<!-- Category End -->
<!-- Sub Category Start -->
<div class="form-group">
<b>Product Sub Category </b>
<select class="form-control sub_category_id" name="sub_category_id">
<option value="">Sub Category</option>
<option value="">Sub Category</option>
<option value="20">Books Stationery</option>
<option value="21">Gaming and Accessories</option>
<option value="22">Music Musical Instruments</option>
</select>
</div>
I have 3 select menus -- product, topic, and subtopic. Selecting all three will show the FAQ for what's been selected. That part is working fine. My problem is that, once all 3 have been selected and the FAQ shows, if the user goes back and chooses another product, the menus and text below remain there. I would like for them to disappear. I've tried $(.'div').hide() in a couple locations, to no avail. I'm a bit green when it comes to AJAX. Here's my code:
$(document).ready(function() {
$('.box').hide();
$('#product').on('change', function() {
$('.box').hide();
$('#'+$(this).val()).show();
});
$('#topic').on('change', function() {
var sel = $(this).find('option:selected').text();
$.ajax({
url: "support_process.php",
type: "POST",
data: {info : sel},
success: function(data) {
$( ".divtopic" ).html(data);
}
});
});
$('body').on('change', '#subtopic', function(){
var sel = $(this).find('option:selected').text();
$.ajax({
url: "subtopic_process.php",
type: "GET",
data: {info : sel},
success: function(data) {
$( ".divsubtopic" ).html(data);
}
});
});
});
And the html:
<div class="styled-select">
<select id="product">
<option value="option0">Select product...</option>
<?php
while ($row = mysqli_fetch_array($sql))
{
$name = $row['name'];
echo "<option value=\"option$count\">" . $name . "</option>";
$count++;
}
?>
</select>
</div>
<div id="option1" class="box">
<div class="content">
<?php
$sql = mysqli_query($dbConnection, "SELECT t.id, t.topic FROM topic t JOIN product p ON p.id = t.p_id WHERE p.name='Hello'");
?>
<div class="styled-select">
<select name="topic" id="topic">
<option value="optiont0" selected="selected">Select a topic for Hello...</option>
<?php
while ($row = mysqli_fetch_array($sql))
{
echo "<option value=\"optiont$count\" name=\"topic[]\">" . $row['topic'] . "</option>";
$count++;
}
?>
</select>
</div>
<div class="divtopic"></div>
<div class="divsubtopic">
</div>
</div>
</div>
TIA for your help.
I ended up just adding an empty string to the necessary divs.
$('.divtopic').html('');
$('.divsubtopic').html('');
Did the trick. Now, when changing the topmost (product) select, the divs below clear. Maybe not the most efficient (???), but it works!