I'm experiencing trouble with 2 level dependent dropdown.
When I select 1st dropdown, i have a PARSERERROR alert and second dropdown is not pouplated
Please, any advice about what's wrong?
Here is my code:
HTML
<div class="form-group">
<label>CLASSIFICATION<span class="text-danger">*</span></label>
<select name="document_classification" id="document_classification" class="select-search" data-placeholder="">
<?php
$sql = "SELECT * FROM rm_document_classification_id";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
echo "<option></option>";
echo "<option value='".$row['classification_id']."'>".$row['classification_description']."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>SUBJECTS<span class="text-danger">*</span></label>
<select name="document_subject" class="form-control" style="width:350px">
</select>
</div>
SCRIPT
$( "select[name='document_classification']" ).change(function () {
var class_id = $(this).val();
//alert(class_id);
if(class_id) {
$.ajax({
url: "ajax.php",
type: "GET",
dataType: 'json',
data: {'classification_id':class_id},
success: function(data) {
$('select[name="document_subject"]').empty();
$.each(data, function(key, value) {
$('select[name="document_subject"]').append('<option value="'+ key +'">'+ value +'</option>');
});
},
error: function (request,status, error) {
console.log(error);
alert(status);
}
});
}else{
$('select[name="document_subject"]').empty();
}
});
PHP
<?
include_once "../config.php";
$sql = "SELECT * FROM rm_document_subject_id
WHERE subject_classification_id LIKE '%".$_GET['classification_id']."%'";
$result = $mysqli->query($sql);
$json = [];
while($row = $result->fetch_assoc()){
$json[$row['subject_id']] = $row['subject_description'];
}
echo json_encode($json);
?>
Thanks all. HID
Thanks all. HID
Thanks all. HID
Please, remove in your php file:
$json = [];
Related
I have fetched some car brand names in a while loop and then for each brand name I make a select menu for the car names in another while loop by using the "brand id" as foreign key. And then I want to show the car names in a box each time someone changes the dropdown select options. Here's my code below :
$query = "SELECT * FROM brands";
$result = $db->query($query);
// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
$brand_id = $row->id;
?>
<div id="result"></div> <!-- The Ajax result will be shown here -->
<div><?php echo $row->brand_name ?></div>
<?php
$query2 = "SELECT * FROM cars WHERE brand_id = ?";
$result2 = $db->prepare($query);
$result2->execute(array($brand_id));
<select name="car" id="car">
// Inner while loop
while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
?>
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
<?php
} // Closing Inner while loop
?>
</select>
<!-- Ajax -->
<script>
$(document).ready(function(){
$('#car').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result').html(data);
}
});
});
});
</script>
<?php
} // Closing outer while loop
In the ajax.php I have written the following code to echo the car name
$carName = $_POST['car'];
echo $carName;
But the issue is - it is just executed for the first option selected inside first inner loop of the first outer loop. I mean the ajax code only runs for the first iteration of the both loops.
I also tried to make the select menu and the result div unique by adding the "brand id" as follow :
<div id="result<?php echo $brand_id ?>"></div>
and
<select name="car" id="car<?php echo $brand_id ?>">
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
</select>
and also the ajax as following :
$('#car<?php echo $brand_id ?>').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result<?php echo $brand_id ?>').html(data);
}
});
But it didn't work. Please suggest your best possible solutions. Thank you.
Try my code
$query = "SELECT * FROM brands";
$result = $db->query($query);
// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
$brand_id = $row->id;
?>
<div id="result<?php echo $brand_id;?>"></div> <!-- The Ajax result will be shown here -->
<div><?php echo $row->brand_name ?></div>
<?php
$query2 = "SELECT * FROM cars WHERE brand_id = ?";
$result2 = $db->prepare($query);
$result2->execute(array($brand_id));
// Inner while loop
while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
?>
<select name="car[]" id="car<?php echo $row2->id ?>">
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
</select>
<!-- Ajax -->
<script>
$(document).ready(function(){
$('#car<?php echo $row2->id ?>').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
console.log(data);
$('#result<?php echo $brand_id;?>').html(data);
}
});
});
});
</script>
<?php
}
}
The select and ajax code should be out of while loop. just check the code below
<?php $query = "SELECT * FROM brands";
$result = $db->query($query);
// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
$brand_id = $row->id;
?>
<div id="result"></div> <!-- The Ajax result will be shown here -->
<div><?php echo $row->brand_name ?></div>
<?php
$query2 = "SELECT * FROM cars WHERE brand_id = ?";
$result2 = $db->prepare($query);
$result2->execute(array($brand_id)); ?>
<select name="car" id="car">
<?
// Inner while loop
while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
?>
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
<?php
} // Closing Inner while loop
?>
</select>
<!-- Ajax -->
<script>
$(document).ready(function(){
$('#car').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result').html(data);
}
});
});
});
</script>
<?php
} // Closing outer while loop
?>
``
You need not call ajax() in a while loop.
Simply you can call .change() on
<select name="car" onchange="getCar(this.value)">
<script type="text/javascript">
function getCar(car) {
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result').html('');
$('#result').html(data);
}
});
}
</script>
<div id="result"></div>
I have problem with POST data from array in dynamically generating inputs fields.
I am using jquery for generate and would like to send from ajax, i know how to do it probably.
Everytime when i POST data, i had only one value in array. Could you help me with that?
Many thanks.
<div class = "col-md-4">
<div class="form-group multiple-form-group input-group">
<select class = "form-control" name = "cargos[]" required>
<option value = "#" selected disabled>Wybierz ładunek</option>
<?php
$sql = mysqli_query($conn, "SQL Code");
while($row = mysqli_fetch_assoc($sql)){ ?>
<option value = "<?php echo ?>"><?php echo ?></option>
<?php } ?>
</select>
<input type="number" name="values[]" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
</div>
Code from jQuery to generating multiple fields
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$(this)
.toggleClass('btn-success btn-add btn-danger btn-remove')
.html('–');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('Phone');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var selectFormGroup = function (event) {
event.preventDefault();
var $selectGroup = $(this).closest('.input-group-select');
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$selectGroup.find('.concept').text(concept);
$selectGroup.find('.input-group-select-val').val(param);
}
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
}); })(jQuery);
For importing data to database i am using:
$cargo = $_POST['cargo'];
$tonnages = $_POST['tonnages'];
for($x = 0; $x < count($cargos); $x++) {
mysqli_query($conn, "INSERT INTO cargos_specialOrder (specialOrder_ID, cargo_ID, tonnages) VALUES ('$index', '$cargos[$x]', '$tonnages[$x]')");
}
$("form").submit(function(e) {
e.preventDefault();
var formData = new FormData($("form")[0]);
$.ajax({
type: 'POST',
url: 'php/newSpecialOrder.php',
data: formData,
success: function(response) {
if(response == 'done') {
$.confirm({
title: 'Gotowe',
content: 'Zgłoszenie zostało wysłane',
type: 'green',
typeAnimated: true,
buttons: {
close: function(){
location.href = "index.php"
}
}
});
}
},
cache: false,
contentType: false,
processData: false
});
});
you have a problem in this section of the code:
<?php
$sql = mysqli_query($conn, "SQL Code");
while($row = mysqli_fetch_assoc($sql)){ ?>
<option value = "<?php echo ?>"><?php echo ?></option>
<?php } ?>
echo must have a parameter to be printed on screen, so fix this part and you should be able to submit.
The title says my goal here. I'm trying to change the second select tag's values on change of the first tag. Here is what I've tried. The values are coming from the database. So this will involve some php selects.
<div class="row">
<div class="col-md-5">
<label for="project">From Project</label>
<select class="form-control"id="project"onchange="dropDrown(this.value)" name="project">
<?php
$sql = $db->prepare("SELECT * FROM tbl_project WHERE projectStatus = 1");
$sql->execute();
while($result=$sql->fetch(PDO::FETCH_ASSOC)){
$value = $result['projectID'];
$projectName = $result['projectName'];
echo"
<option value='$value'> $projectName </option>
";
}
?>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5">
<select class="form-control" id="village" name="village"></select>
</div>
</div>
The AJAX:
<script type="text/javascript">
function dropDown(id){
var theID = id;
// assign your data to a varaible
var dataString= {theID:id};
$.ajax({
url: "includes/getVillage.php",
type: "POST",
data: dataString,
cache: false,
success: function (data){
$("#village").html(data);
}
});
}
getVillage.php
<?php
include '../../connection';
$village = $_POST['theID'];
$sql = "SELECT * FROM tbl_village WHERE projectID = '$village'";
$query = $db->prepare($sql);
$results = $query->execute();
while($results=$sql->fetch(PDO::FETCH_ASSOC)){
$value = $results['villageID'];
$text = $results['villageName'];
echo "<option value'$value'>$text</option>";
}
It seems you are not passing data through your ajax call.
function dropDown(id){
var theID = id;
// assign your data to a varaible
var dataString= {theID:id};
$.ajax({
url: "includes/getVillage.php",
type: "POST",
data: dataString,
cache: false,
success: function (data){
$("#village").html(data);
}
});
}
Alternatively you can pass the values in the below format
var dataString= "theID="+id;
It turns out that I made a wrong connection. After evaluating the getVillage.php file alone. I received a lot of errors regarding my connection.php. Thanks guys.
I have two files, one index.php and the other get_content.php, unfortunately I can not show anything on get_content.php, I am confused about where my fault lies either in index.php or get_content.php?
Full Code
Click here
index.php
AJAX :
$("#id_content").click(function() {
var id_content = $("#id_content").val();
$.ajax({
type:"POST",
url:"get_content.php",
data: "id_content="+id_content,
cache:false,
success:function(msg){
$("#result_of_ajax").html(msg);
}
})
})
PHP :
<select id='id_content' name='id_content'>
<option value='ID Content'>Content</option>
<?php
$sql = "select id_content from content where status = 'setuju'";
$hasil = mysqli_query($konek, $sql);
while($data = mysqli_fetch_assoc($hasil)) {
echo "<option value='$data[id_content]'>$data[content]</option>";
}
?>
</select>
and here is get_content.php
get_content.php
echo $_POST['id_content'];
why in get_content.php does not show anything ???
Sorry it is not an answer yet. But I believe you should change your jQuery+AJAX code a bit like:
$("#id_content").on('change', function() {
var id_content = this.value;
$.ajax({
type:"POST",
url:"get_content.php",
data: { id_content: id_content },
cache:false,
success:function(msg){
$("#result_of_ajax").html(msg);
}
})
})
You have done mistake here `echo "<option value='$data[id_content]'>$data[content]</option>";`
Change to
<option value=<?echo $data['id_content'];?>><?echo $data['content'];?></option>
And one more change was there.. check below..
<select id='id_content' name='id_content'>
<option value='ID Content'>Content</option>
<?php
$sql = "select id_content from content where status = 'setuju'";
$hasil = mysqli_query($konek, $sql);
while($data = mysqli_fetch_assoc($hasil))
{?>
<option value=<?echo $data['id_content'];?>><?echo $data['content'];?></option>
<?}
?>
</select>
<br>
<div id="result_of_ajax">
</div>
$("#id_content").on('change', function() {
var id_content = $('#id_content').val();
$.ajax({
type:"GET",
url:"get_content.php?id_content="+id_content,
cache:false,
success:function(msg){
$("#result_of_ajax").html(msg);
}
})
})
get_content.php
<?echo $_GET['id_content'];?>
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!