populate one dropdown base on another dropdown using PHP and MySQL - php

I have a dropdown which gets the information from a query using mysqli_query()
now, once selecting a choice from the first dropdown I want the second dropdown to be filled with data from a difference query.
This is my code
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('.country').on('change', function() {
// Code to add country information in url
location.href = location.href.split('?')[0]
+ ['?country', $(this).val()].join('=');
});
});
</script>
PHP First dropdown:
<?php
$countries = mysqli_query($mysqli,"select source from nhws.masterkey group by source;");
echo "<select name='country' style=width:200px>";
echo "<option size =30 ></option>";
while($row = mysqli_fetch_array($countries)){
echo "<option value='".$row['source']."'>".$row['source']."</option>";
}
echo "</select>";
?>
PHP Second dropdown:
<?php
if (isset($_GET['country'])) {
$country = $_GET['country'];
echo $country;
$variables = mysqli_query($mysqli,"select variable from nhws.num_all_{$country} group by variable;");
echo "<select name='variable' style=width:200px>";
echo "<option size =30 ></option>";
while($row = mysqli_fetch_array($variables)) {
echo "<option value='".$row['variable']."'>".$row['variable']."</option>";
}
echo "</select>";
}
?>
Now, once a selection was choosen from the first dropdown nothing happens in the second dropdown.
Thanks!

I assume you can use jQuery. So add a jQuery listener like this:
<script>
$(document).ready(function() {
$('.country').on('change', function() {
// Code to add country information in url
location.href = location.href.split('?')[0]
+ ['?country', $(this).val()].join('=');
});
});
</script>
Now on php code at the top add something like this after the code you mentioned
if (isset($_GET['country']) {
$country = $_GET['country'];
// code to prevent SQL injection
// ... code to get data from DB using country name
// ... code to print a new select box based on data from DB
}

Related

mysql dropdown list when selected

I have a table with this structure and trying to use a dropdown to select a language from the list and then display the contents of respective language_id .. I am using mysql and php 5.4
My code is as follows, got stuck with looping and not sure how to get it
$sql=mysql_query("SELECT lang_id, lang_desc FROM languages ");
if(mysql_num_rows($sql))
{
$select= '<select lang_desc="select">';
while($rows=mysql_fetch_array($sql))
{
$select.='<option value="'.$rows['lang_id'].'">'.$rows['lang_desc'].'</option>';
}
}
$select.='</select>';
echo $select ;
$result = mysql_query("SELECT * FROM contents LEFT JOIN languages ON contents.lang_id = languages.lang_id WHERE contents.page_name = 'index' AND contents.lang_id = '$select'");
while ($row = mysql_fetch_array($result))
{
}
Please help
I think this want minimum 2 PHP pages 1st for show data and 2nd for creat data in hear I didn't create DB connection please add it
in 1st I use jquery for getting data from 2nd PHP
show.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="lang" onchange="setlang(this.value)">
<?PHP
$sql=mysql_query("SELECT lang_id, lang_desc FROM languages");
while($rows=mysql_fetch_array($sqL,MYSQL_ASSOC)){
echo '<option value="'.$rows['lang_id'].'">'.$rows['lang_desc'].'</option>'
}
?>
</select>
<div id='dis'></div>
<script type="text/javascript">
$( document ).ready(function() {
setlang($('#lang').val());
});
function setlang(val) {
$.ajax({
url: "data.php",
type: "POST",
data:{val:val},
success: function(result){
$("#dis").html(result);
}
});
}
</script>
data.php
<?php
$result = mysql_query("SELECT * FROM contents LEFT JOIN languages ON contents.lang_id = languages.lang_id WHERE contents.page_name = 'index' AND contents.lang_id = '".$_POST['val']."'");
$data="";
while ($row = mysql_fetch_array($result))
$data.="your row data for dis";
//
}
echo $data;
?>

Populating 3 dropdown using ajax, one after the other

I currently have this code that populates one dropdown using the value from previous dropdown, my problem now is how will I populate the 3rd dropdown using the result from the 2nd dropdown that was provided by the first dropdown?
This the current code.
accounttype will be the first dropdown.
accountcode will be the second dropdown based on the result of accounttype.
accounttitle should be the third dropdown based on the result of accountcode .
<div class="">
<label>accounttype :</label>
<select name="accounttype" id="accounttype">
<option value=''>------- Select --------</option>
<?php
$sql = "SELECT DISTINCT accounttype from earningsamendmentaccount";
include 'query/sqlsrv_query-global.php';
if(sqlsrv_num_rows($query) > 0) {
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)) {
echo "<option value='".$row['accounttype']."'>".$row['accounttype']."</option>";
}
}
?>
</select>
<label>accountcode :</label>
<select name="accountcode" id="accountcode"><option>------- Select --------</option></select>
<label>accounttitle :</label>
<select name="accounttitle" id="accounttitle"><option>------- Select --------</option></select>
</div>
This is currently my ajax. This is within the same pag as my <div>
<script>
$(document).ready(function() {
$("#accounttype").change(function() {
var accounttype = $(this).val();
if(accounttype != "") {
$.ajax({
url:"earnings_amendment-employee_select.php",
data:{accountcode:accounttype},
type:'POST',
success:function(response) {
var resp = $.trim(response);
$("#accountcode").html(resp);
}
});
} else {
$("#accountcode").html("<option value=''>------- Select --------</option>");
}
});
});
</script>
This is my earnings_amendment-employee_select.php .
<?php
include 'includes/session.php';
if(isset($_POST['accountcode'])) {
$accountcode=$_POST['accountcode'];
$sql = "select accountcode, accounttitle from earningsamendmentaccount where accounttype='$accountcode'";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
if(sqlsrv_num_rows($query) > 0) {
echo "<option value=''>------- Select --------</option>";
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)) {
echo "<option value='".$row['accountcode']."'>".$row['accountcode']."</option>";
}
}
} else {
header('location: ./');
}
?>
What would be the best approach to do this to populate my third dropdown column? I tried creating a separate ajax for accounttitle but it didn't work.
have you tried
$('#your_second_dropdown').on('change', ()=> {
// your code here...
})

Jquery show/hide element based on mysql selection

I wanted to show/hide element based on MySql Value
$(document).bind('DOMNodeInserted', '#composeHeaderTable0', function(event) {
if ($('#data_parent_type0').val() == 'Leads') {
$("#email_template0 option[value='151ddf5a-3fe8-84bd-50db-533545893c67']").hide();
$("#email_template0 option[value='15a6040b-bbad-1a89-d62b-537de2b73832']").show();
}
if ($('#data_parent_type0').val() == 'Contacts') {
$("#email_template0 option[value='1b560788-07b2-0798-6b09-5335520bd9df']").hide();
$("#email_template0 option[value='f15bf4b4-d174-f0d6-6f09-537c8d3e9693']").show();
}
return false;
});
Above script works, but I need to show hide based on Mysql call:
I have partial php corresponding file
<?php
mysql_connect('mysql', 'admin', '123');
mysql_select_db('mydb');
$Leads0emailAddress0 = mysql_real_escape_string($_POST['Leads0emailAddress0']);
$result = mysql_query('select id from email_templates where description = 'Customers' and deleted = 0;');
...............
?>
Use a hidden form element, set its value to the result obtained from mysql. Assign a specific ID to that form element. From jQuery, refer that form element using the ID. That should do the trick.
Your mysql script has error
$result = mysql_query('select id from email_templates where description = 'Customers' and deleted = 0;');
change it to
$result = mysql_query(
"SELECT id FROM
email_templates
WHERE
description = 'Customers'
AND deleted = 0"
);
To list the result
$options = '';
while($row = mysql_fetch_assoc($result)) {
$options .= '<option value="'.$row['id'].'">'.$row['id'].'</option>' . "\n";
}
//display the options list in html where you want
<select id="email_template0">
<?php echo $options; ?>
</select>
now from jQuery handle event on dropdown change
$(function() {
$("#email_template0").change(function() {
alert( $('option:selected', this).val() );
//do your hide and select here
});
});

How do I get a VAR from jquery passed to a php query request

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function() {
var $article = null;
$('#category').change(function() {
var $categoryName = $('#category').val();
if ($article == null) {
$article = $('<h4>Select a business you wish to view.</h4><select id="business" name="business" class="business"><option value="0">Select A Business To View Listing</option></select>').appendTo('.query');
}
$("#business").load("php.php");
});
});
</script>
This is what I am currently doing, I am loading the php.php script, instead I want to pass the value of $categoryName to the WHERE clause in my query so it's like this:
<?php
$con = mysqli_connect(,,,,);
// Check connection
if (mysqli_connect_errno())
{
echo "<option>Failed to connect to MySQLi</option>" ;
}
$result = mysqli_query($con,"SELECT Bname, Category FROM Business WHERE Category='$categoryName'");
while($row = mysqli_fetch_array($result)) {
echo "<option value='".$row['Bname']."'>".$row['Bname']."</option>";
}
// Free result set
mysqli_free_result($result);
mysqli_close($con);
?>
The way this should work is, the first select box is populated by php on my server showing a list of categories. A user selects a category from that box and onchange, a second select box is created, added to the form, and will query, to populate all of the business name's listed in my database that share a category(i.e the selectedindex from the first box) Can you help me change this to work how I need it to?
UPDATE: This is the updated code, now the second select box never loads.
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
var $article = null;
$('#category').change(function () {
var categoryName = $('#category').val();
if ($article == null) {
$article = $('<h4>Select a business you wish to view.</h4><select id="business" name="business" class="business"><option value="0">Select A Business To View Listing</option></select>').appendTo ('.query');
$("#business").load( "php.php",
data:{myVar:$categoryName}
);
}
});
});
</script>
Heres the php.php
<?php
$con = mysqli_connect(,,,,);
// Check connection
if (mysqli_connect_errno())
{
echo "<option>Failed to connect to MySQLi</option>" ;
}
$myVar = $_GET["myVar"];
$result = mysqli_query($con,"SELECT Bname, Category FROM Business WHERE Category='$myVar'");
while($row = mysqli_fetch_array($result)) {
echo "<option value='".$row['Bname']."'>".$row['Bname']."</option>";
}
// Free result set
mysqli_free_result($result);
mysqli_close($con);
?>
As seen below you can make a data object with one parameter myVar
JS:
$('#category').change(function() {
var $categoryName = $('#category').val();
if ($article == null) {
$article = $('<h4>Select a business you wish to view.</h4><select id="business" name="business" class="business"><option value="0">Select A Business To View Listing</option></select>').appendTo('.query');
}
$("#business").load("php.php",
data:{myVar:$categoryName}
);
});
Then get the variable in PHP like this
PHP:
$con = mysqli_connect(,,,,);
$myVar = $_GET["myVar"];
// Check connection
if (mysqli_connect_errno())
{
echo "<option>Failed to connect to MySQLi</option>" ;
}

split output value via ajax,

Inside my page I have an input ("Model") with a datalist attribute and a select menu ("Brand"). When a user select one of the options of the datalist from the Model, it will dynamically change the options value from the Brand select menu. Both options value from Model and Brand are called from the database. This is what I code so far;
<input type="text" name="type" id="type" list="datalist1" onchange="fw();"/>
<datalist id="datalist1">
<?php
$query9 = "SELECT DISTINCT model FROM server ORDER BY model ASC";
$result9 = mysql_query($query9);
while($row9 = mysql_fetch_assoc($result9))
{
echo '<option value="'.$row9['model'].'">';
} ?>
</datalist>
<select name="brand" id="test2"><option value="">-- Select Brand--</option></select>
Script;
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function fw()
{
var selname = $("#type").val();
$.ajax({ url: "getBrand.php",
data: {"brand":brand},
type: 'post',
success: function(output) {
document.getElementById('test2').options.length = 0;
document.getElementById('test2').options[0]=new Option(output,output);
// document.getElementById('test2').options[1]=new Option(output,output);
}
});
}
</script>
getBrand.php
<?php
define('DB_HOST1', 'localhost');
define('DB_NAME1', 'standby');
define('DB_USER1', 'root');
define('DB_PASS1', '');
$link = mysql_connect(DB_HOST1, DB_USER1, DB_PASS1);
if(!$link)
{
exit('Cannot connect to server "' . DB_HOST1 . '"');
}
mysql_select_db(DB_NAME1, $link) or die('Cannot use database "' . DB_NAME1 . '"');
if (isset($_POST['brand'])) {
$selname = $_POST['brand'];
$query = "SELECT * FROM server WHERE model='$brand'";
$res = mysql_query($query);
$aBrand= array();
while($rows = mysql_fetch_assoc($res)) {
$brand= $rows['brand'];
$aBrand[] = $brand;
echo $aBrand[0];
echo $aBrand[1];
}
} ?>
From what I have coded, I have succesfully change the select menu dynamically but there is one problem. When there is more one data is called from getBrand.php, the 'output' in the select menu will combine all of the data into one line. For example, if the data is "M3000" and "M4000", it will display as "M3000M4000". Now, how do I split it and make it as a normal select options?
I'm still learning Javascript and I hope anyone here can guide me.
NOTE : The code only works in Firefox because of the datalist attribute
Send your data from getBrand.php as
echo implode(";", $aBrand);
this will generate a string like M3000;M4000;M5000;M6000
and in your java script code break the string into array using this code.
StrArr = Str.split (";");
here 'Str' is your output given by getBrand.php, and 'StrArr' is the array which contains your brands.
add a special character in the string returned form php
PHP
elementcount=0;
while($row9 = mysql_fetch_assoc($result9))
{
if(elementcount>0)
echo '$<option value="'.$row9['model'].'">';//place a $ sign in start or you can for any special character
else
echo '<option value="'.$row9['model'].'">';
}
now in javascript
success: function(output) {
output = output.split("$");
document.getElementById('test2').options.length = 0;
//here now loop through the elements and add
for(var i=0,i<output.length-1)
document.getElementById('test2').options[0]=new Option(output[i],output[i]);
// document.getElementById('test2').options[1]=new Option(output,output);
}

Categories