I am trying to populate drop down lists one after the other. These drop down lists contain categories and subcategories. I would like to continue creating drop down lists until there are not more subcategories for a particular category.
I am populating my drop down lists with results from MySQL.
I have searched all over and could not find any references to cascading drop down lists using more than two lists.
My code works for two lists, but not for more.
partRequest.php
<HTML>
<HEAD>
<script type="text/javascript" src="..\jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#1").change(function(e) {
e.preventDefault();
getNextCategory("1");
});
$("#2").change(function(e) {
e.preventDefault();
getNextCategory("2");
});
$("#3").change(function(e) {
e.preventDefault();
getNextCategory("3");
});
});
function getNextCategory(htmlID) {
var categoryID = ""
var newHTMLID = 0
var newCategory = ""
categoryID = $("#" + htmlID ).val();
newHTMLID = Number(htmlID) + Number(1)
newCategory = "category" + newHTMLID
$.ajax({
type: "POST",
url: "findNextCategory.php",
data: "ID=" + categoryID + "&Number=" + newHTMLID,
success: function(output){
$("#" + newCategory).html(output);
}
});
}
</script>
</HEAD>
<BODY>
<form name="partSubmissionForm" id="partSubmissionForm" action="" method="POST">
<table width=147 cellpadding=0 cellspacing=0>
<tr><td><select id="1">
<?PHP
$query = "SELECT Name, ID FROM categories WHERE ParentID = 0";
$result = mysql_query($query);
while ($row=mysql_fetch_array($result)){
?>
<option value="<? echo $row['ID'];?>"> <? echo $row['Name'];?></option>
<?}?>
</select>
</td>
<td>
<div id="category2">
test2
</div>
</td>
<td>
<div id="category3">
test3
</div>
</td>
</tr>
<tr><td><input type="submit" name="submit" id="submit" value="GO"></td></tr>
</table>
</form>
</BODY>
</HTML>
findNextCategory.php
<?PHP
define('INCLUDE_CHECK',true);
include ('..\db.php');
$categoryID = $_POST['ID'];
$categoryFieldNum = $_POST['Number'];
echo $categoryID;
echo $categoryFieldNum;
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
echo $query;
echo "<select id=$categoryFieldNum>";
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
$result = mysql_query($query);
while ($row=mysql_fetch_array($result)){
$optionValue = $row['ID'];
$optionText = $row['Name'];
echo "<option value='$optionValue'> $optionText </option>";
}
echo "</select>";
?>
The problem is that your click function definitions only apply to items that are already on the page at page load. Because you do not yet have a select object on the page with an id of "2", your $("#2").change function does not ever get attached.
What you need to do to get around this is to apply that click definition after you add the select to the page. Try changing your success function to this:
success: function(output){
$("#" + newCategory).html(output);
$("#" + newHTMLID).change(function(e) {
e.preventDefault();
getNextCategory(newHTMLID);
});
}
Related
I want to show only those data. which is selected in the dropdown list.
<select name="select" id="select">
<?php
$conn = mysqli_connect("localhost","root","","select");
$query = mysqli_query($conn,"select * from users");
while( $row = mysqli_fetch_array($query)){
?>
<option value="<?= $row['id'];?>"><?php echo $row['first_name'];?></option>
<?php } ?>
</select>
And then I want to only selected data from the dropdown in that table.
<table border="1">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Jobtitle</th>
<th>DOB</th>
</tr>
</thead>
<tbody id="data" >
</tbody>
</table>
This is the ajax code. but I don't know what can I write in the success: function() to show the data in tabular form.
<script>
$('#select').change(function(){
var LocateId = $('#select').val();
$.ajax({
url: 'getSelect1.php',
type: 'post',
data : {id: LocateId},
success:function(data)
{
}
});
});
</script>
And This is the getSelect1.php page. which fetch the data from the database and returns it JSON format.
<?php
$conn = mysqli_connect("localhost","root","","select");
$id = $_POST['id'];
$query = "select * from users where id = '$id'";
$cm = mysqli_query($conn,$query);
$data = array();
while( $rows = mysqli_fetch_assoc($cm) ) {
$data[] = $rows;
}
echo json_encode($data);
?>
You need to append html data like below:
<script>
$('#select').change(function() {
var LocateId = $('#select').val();
$.ajax({
url: 'getSelect1.php',
type: 'post',
data: {
id: LocateId
},
success: function(data) {
$("#data").html("");
$.each(data, function(k, v) {
if (v.state_id == $("state").val()) {
$("#data").append(`<tr>
<td>` + data.name + `</td>
<td>` + data.name + `</td>
<td>` + data.name + `</td>
<td>` + data.name + `</td>
</tr>`);
}
});
}
});
});
</script>
make sure you need to pass state_id column in you ajax response to match with state drop down id.
Please make sure before adding question on stack, you are clear on your question.
I have a form where there are select option and a textbox. All I want to do is when I select specific option, it will pass the id to query the same table to get another column's value based on ID of selected option and then display the value in a textbox before insert/update the table.
This code will works if both field in my form using select field. So in my opinion, maybe my script for storing value in input text field is totally wrong. Please correct me if I do wrong.
My form code :
<form name="inserform" method="POST">
<label>Existing Customer Name : </label>
<select name="existCustName" id="existCustName">
<option value="">None</option>
<?php
$custName = $conn->query("SELECT * FROM customers");
while ($row = $custName->fetch_assoc())
{
?><option id="<?php echo $row['customerID']; ?>" value="<?php echo $row['customerID']; ?>"><?php echo $row['customerName']; ?></option><?php
}
?>
</select>br>
<label>Current Bottle Balance : </label>
<input type="int" id="currentBal" name="currentBal"></input><br>
<input name="insert" type="submit" value="INSERT"></input>
</form>
My script code :
<script type="text/javascript">
$(document).on("change", 'select#existCustName', function(e) {
var existCustID = $(this).children(":selected").attr("id");
$.ajax({
type: "POST",
data: {existCustID: existCustID},
url: 'existingcustomerlist.php',
dataType: 'json',
success: function(json) {
var $el = $("input#currentBal");
$el.empty();
$.each(json, function(k, v) {
$el.append("'input[value='" + v.currentBal + "']").val();
});
}
});
});
</script>
existingcustomerlist.php code:
<?php
include 'config/config.php';
$result = $conn->query("SELECT * FROM customers WHERE customerID = '" .$_POST['existCustID'] . "'");
$results = [];
while ($row = $result->fetch_assoc()) {
$results[] = $row;
}
header('Content-Type: application/json');
echo json_encode($results);
?>
I need help to solve this.
I assume you are trying to show the results as input text element next to the #currentBal element. Try by changing the script tag inside the success callback as shown below.
$.each(json, function (k, v) {
$el.after("<input type='text' class="currentBalTemp" value='" + v.currentBal + "' />");
});
Make sure to remove the .currentBalTemp elements on change event of select otherwise duplication will be shown. Add the below code on change event.
$('.currentBalTemp').remove();
I have multiple checkboxes displayed from MySQL table. I'm trying to pass all checked values to <div> using ajax. Currently, my code only passes one checked value to <div>. I want to display all checked values in a <div>.
What I have thus far:
<?php
$sql="SELECT * FROM options WHERE cat_id='".$id."' AND opg_id='".$group."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){ ?>
<input type="checkbox" name="<?php echo $row['op_id']; ?>" onClick="showPrice(this.name)" value="<?php echo $row['price']; ?>"/>
<!-- Display all prices from mysql table in checkbox. Pass `id` to ajax from name attribute. -->
<?php
} ?>
ajax
<script>
function showPrice(name) {
$.ajax({
url: 'ajax_price.php',
type: 'GET',
data: {option : name},
success: function(data) {
document.getElementById('c').innerHTML =data;
}
});
}
</script>
ajax_price.php
<?php
include ("../supplier/DB/db.php");
$id = $_REQUEST['option'];
<?php
$sql="SELECT * FROM options WHERE op_id='".$id."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
?>
<div class="oder">
<div class="odercol2"><?php echo $row['opt']; ?></div>
<div class="odercol3"><?php echo $row['price']; ?></div>
</div>
<?php
}
?>
This is the display with only one checked value in the <div>. I want to display all the checked values in my <div>.
checkboxes
Results display in this div (div id is "c")
Just change your AJAX function to concat the innerHTML of DIV, like this:
<script>
function showPrice(name) {
$.ajax({
url: 'ajax_price.php',
type: 'GET',
data: {option : name},
success: function(data) {
document.getElementById('c').innerHTML += data;
}
});
}
</script>
Notice this line document.getElementById('c').innerHTML += data;
Hope it works. Thanks
Add a class value in the checkbox
<?php
$sql="SELECT * FROM options WHERE cat_id='".$id."' AND opg_id='".$group."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){ ?>
<input type="checkbox" class="sundarCheckBox" name="<?php echo $row['op_id']; ?>" onClick="showPrice(this.name)" value="<?php echo $row['price']; ?>"/>
<!-- Display all prices from mysql table in checkbox. Pass `id` to ajax from name attribute. -->
<?php
} ?>
Loop using the class name input elements
<script>
$(document).ready(function(){
function showPrice(value){
$.each($('.sundarCheckBox'), function(index, element){
if($(element).is(':checked')){
alert($(element).prop('value'));
}
});
}
});
</script>
I have database with fields branch, name, code_member, status etc.
I am trying to fetch Names in dropdown menu with branch by group mysql query. And Then Show Details Of NAME Selected In Dropdown List. But No Results are shown.
Selection Of Branch, Name And Auto Entering of Name In Search Box is working perfectly. But After That ID, Name, Branch,Code Number etc. data is not getting displayed.
There are three pages used. index.php, findName.php and searchfinal.php
Code I tried Is As Follows :
index.php :
<html>
<head>
<script type="text/javascript">
$(document).ready(function()
{
$(".branch").change(function()
{
var branch=$(this).val();
var dataString = 'branch='+ branch;
$.ajax
({
type: "POST",
url: "findName.php",
data: dataString,
cache: false,
success: function(html)
{
$(".getname").html(html);
}
});
});
});
</script>
<script>
$(document).ready(function()
{
$('#getname').change(function() {
$('#name').val($(this).val());
});
});
</script>
</head>
<body>
Branch :
<select name="branch" class="branch">
<option selected="selected">--Select Country--</option>
<?php
$sql=mysql_query("select branch from mutualbs group by branch");
while($row=mysql_fetch_array($sql))
{
$branch=$row['branch'];
echo '<option value="'.$branch.'">'.$branch.'</option>';
} ?>
</select> <br/><br/>
Name :
<select name="getname" id="getname" class="getname">
<option selected="selected">--Select Name--</option>
</select>
<br><br>
<hr>
<form method="get">
<label for="name">Name To Search :</label>
<input type="text" id="name" name="name" />
<button class="btnSearch">Search</button>
</form>
<br><br>
<table id="resultTable" style="color:#ff0000;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>MBS Number</th>
<th>Branch</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody> //** Results Are Not Getting Shown
</table>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
$jQuery(document).ready(function($) {
$('.btnSearch').click(function(){
makeAjaxRequest();
});
$('form').submit(function(e){
e.preventDefault();
makeAjaxRequest();
return false;
});
function makeAjaxRequest() {
$.ajax({
url: 'searchfinal.php',
type: 'get',
data: {name: $('input#name').val()},
success: function(response) {
$('table#resultTable tbody').html(response);
}
});
}
});
</script>
</body>
</html>
Till Search Button Everything working OK... But After Clicking Search Button, No Results i.e. ID, Name, Code Number, Branch And Status Shown..
Other Codes :
searchfinal.php
<?
require_once 'Connection.simple.php';
$conn = dbConnect();
if (isset($_GET['name'])) {
$data = "%".$_GET['name']."%";
$sql = "SELECT * FROM mutualbs WHERE name like ?";
$stmt = $conn->prepare($sql);
$results = $stmt->execute(array($data));
$rows = $stmt->fetchAll();
}
if(empty($rows)) {
echo "<tr>";
echo "<td colspan='4'>There were not records</td>";
echo "</tr>";
}
else {
foreach ($rows as $row) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['code_number']."</td>";
echo "<td>".$row['branch']."</td>";
echo "<td>".$row['status']."</td>";
echo "</tr>";
}
}
?>
Need Help....
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!