Develop Reference

Jquery help for single select country state fetch data

here is a code for multiselect which is working fine for multiselect but i need this code to be work in single select , in this Code #Country list is simply getting list from option as you can see in code and when we select #country in dropdown the #state data is fetching from data base according to country selection
( Multi select is Working fine but i need this in Single select )
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<label for="country">Country</label> ( Simple Drop Down for Country )
<?php include "fetch_country.php"; ?>
<select id="country" name="country[]" multiple class="form-control" >
<option value="India" label="India">India</option>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
<option value="China" label="China">China</option>
</select>
<div class="col-sm-6">
<label for="state">State</label> ( Fetching State data from Database )
<select id="state" name="state[]" multiple class="form-control" >
<option disabled>Select Country First</option>
</select>
<button class="myButnsbmt" type="submit" name="update" value="Update">Submit</button>
</form>
<script>
$(document).ready(function(){
$('#country').multiselect({
nonSelectedText:'?',
buttonWidth:'250px',
maxHeight: 400,
onChange:function(option, checked){
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_country.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#state').html(data);
$('#state').multiselect('rebuild');
}
})
}
}
});
$('#state').multiselect({
nonSelectedText: '?',
allSelectedText: 'All',
buttonWidth:'250px',
includeSelectAllOption: true,
maxHeight: 400,
enableFiltering:true
});
});
</script>

Html Part
<div class="container mt-5">
<div class="row">
<div class="card">
<div class="card-header">
<h2 class="text-success">Country State City Dropdown List in PHP MySQL Ajax - Tutsmake.COM</h2>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" id="country-dropdown">
<option value="">Select Country</option>
<?php
require_once "db.php";
$result = mysqli_query($conn, "SELECT * FROM countries");
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="state-dropdown">
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city-dropdown">
</select>
</div>
</form>
</div>
</div>
</div>
</div>
js part
$(document).ready(function () {
$('#country-dropdown').on('change', function () {
var country_id = this.value;
$.ajax({
url: "states-by-country.php",
type: "POST",
data: {
country_id: country_id
},
cache: false,
success: function (result) {
$("#state-dropdown").html(result);
$('#city-dropdown').html('<option value="">Select State First</option>');
}
});
});
$('#state-dropdown').on('change', function () {
var state_id = this.value;
$.ajax({
url: "cities-by-state.php",
type: "POST",
data: {
state_id: state_id
},
cache: false,
success: function (result) {
$("#city-dropdown").html(result);
}
});
});
});
states-by-country.php
<?php
require_once "db.php";
$country_id = $_POST["country_id"];
$result = mysqli_query($conn, "SELECT * FROM states where country_id = $country_id");
?>
<option value="">Select State</option>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>
cities-by-state.php
<?php
require_once "db.php";
$state_id = $_POST["state_id"];
$result = mysqli_query($conn, "SELECT * FROM cities where state_id = $state_id");
?>
<option value="">Select City</option>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>

Then try this
<label for="country">Country</label>
<select id="country" name="country" multiple class="form-control">
<option value="India" label="India">India</option>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
<option value="China" label="China">China</option>
</select>
<label for="state">State</label> ( Fetching State data from Database )
<select id="state" name="state[]" multiple class="form-control">
<option disabled>Select Country First</option>
</select>
<button class="myButnsbmt" type="submit" name="update" value="Update">Submit</button>
<script>
$(document).ready(function() {
$('#country').on('change', function() {
var countryname = this.value;
$.ajax({
url: "states-by-country.php",
type: "POST",
data: {
country: countryname
},
cache: false,
success: function(result) {
$("#state-dropdown").html(result);
$('#city-dropdown').html('<option value="">Select State First</option>');
}
});
});
});
</script>
states-by-country.php
<?php
require_once "db.php";
$country = $_POST["country"];
$result = mysqli_query($conn, "SELECT * FROM states where countryname = $country");
?>
<option value="">Select State</option>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>

Insert data that doesnt exist from selectbox

I would want a select box that can insert data if the data typed doesn't exist in the DB, could anyone help me, please?
<div class="form-group">
<label for="">Catégorie</label>
<select class="form-control select2" name="category" required>
<?php
$select = $pdo->prepare("SELECT * FROM tbl_category");
$select->execute();
while($row = $select->fetch(PDO::FETCH_ASSOC)){
extract($row)
?>
<option><?php echo $row['cat_name']; ?></option>
<?php
}
?>
</select>
</div>

Use select2 plugging. It's facilitated to search and add new value which is not in dropdowns.
Click here Select2
<div class="form-group">
<label for="">Catégorie</label>
<select class="form-control select2" name="category" required id="category">
<?php
$select = $pdo->prepare("SELECT * FROM tbl_category");
$select->execute();
while($row = $select->fetch(PDO::FETCH_ASSOC)){
extract($row)
?>
<option><?php echo $row['cat_name']; ?></option>
<?php
}
?>
</select>
</div>
$("#category").select2({
tags: true
});

Combobox based on another combobox

I'm trying to do the following. I am selecting an item from a combobox then I want the values of the next combobox to be the result of a query based on the first selection. This is what I have so far.... HTML
<fieldset>
<div class="form-group">
<select class="custom-select" name="serviciuSelect" id="serviciuSelect" onchange="arataAngajat()">
<option selected="">Selecteaza serviciul dorit</option>
<?php foreach ($servicii as $item): ?>
<option value="<?php echo $item['denumire']; ?>"><?php echo $item['denumire']; ?></option>
<?php endforeach;?>
</select>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<select class="custom-select" name="angajatSelect" id="angajatSelect" style="visibility: hidden">
<option selected="">Selecteaza angajatul dorit</option>
<!-- <?php foreach ($angajati as $item): ?>
<option value="<?php echo $item['nume']; ?>"><?php echo $item['nume']; ?></option>
<?php endforeach;?> -->
</select>
</div>
</fieldset>
JavaScript
<script>
function arataAngajat() {
document.getElementById("angajatSelect").style.visibility = "visible";
var e = document.getElementById("serviciuSelect").value;
document.cookie = "selectSer = " + e;
}
</script>
PHP
<?php
function getSelectServiciu(){
$selectServiciu= $_COOKIE['selectSer'];
$query = "SELECT COD_A FROM angajat WHERE COD_A IN (
SELECT COD_A FROM angajat_serviciu WHERE COD_S='".
$selectServiciu."')";
$result = $this->db->query($query)->result_array();
return $result;
}
?>
I got stuck when I had to call the PHP function getSelectServiciu(). Also, If there's a better way of doing this, please let me know.
Thanks,
Tibi

this script is get data from server under a service display as a combobox options
services.php
<?php
//i'm using array u can use mysql array
$services=array();
$services[]=array('name'=>'Flowers');
$services[]=array('name'=>'Fruits');
//data under services
$data=array();
$data['Flowers']=array('Rose','Belly');
$data['Fruits']=array('Banana','Mango');
//check the the client is requested for data under a service
if(isset($_GET['get_data'])){
$current_service=$_GET['get_data'];
$data_array=$data[$current_service];
echo '<option selected="">Select</option>';
foreach($data_array as $op){
echo '<option value="'.$op.'">'.$op.'</option>';
}
}else{
?>
<fieldset>
<div class="form-group">
<select class="custom-select" name="Services" id="Services" onchange="Getnext_option(this.value)">
<option selected="">Select</option>
<?php foreach ($services as $item): ?>
<option value="<?php echo $item['name']; ?>"><?php echo $item['name']; ?></option> <?php endforeach;?>
</select>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<select class="custom-select" name="Loaded_data" id="Loaded_data" style="display: none"> </select>
</div>
</fieldset>
<script>function Getnext_option(id){
var load_to=document.getElementById('Loaded_data');
load_to.style.display="none";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
load_to.innerHTML=
this.responseText;
load_to.style.display="block";
}
};
xhttp.open("GET","services.php?get_data="+id, true);//get data from server
xhttp.send();
}</script>
<?php } ?>

I am trying achive validation for dropdown error is form is sumbmitting without validation

my form consists this below div:
$("#signup").click(function()
{
$("#showMessage").html('');
if($("#accountType").val()=='')
{
$("#accountType").css({"border-style": "solid", "border-color": "red" });
$("#showMessage").html('Please Select Account Type');
$("#accountType").focus();
return false;
}
else
{
$("#accountType").css({"border-style": "solid","border-color": "#E9E9E9"});
}
}
<form method="post" id="SignUpForm" class="form-horizontal text-center">
<div class="form-group">
<label for="accountType" class="col-sm-4 control-label">Select Account Type</label>
<div class="col-sm-8">
<select class="form-control" id="accountType">
<option>- Select -</option>
<?php
$query = mysql_query("SELECT * FROM r_participant_type")or die(mysql_error());
while ($result = mysql_fetch_assoc($query)) {
?>
<option value='<?php echo $result['id_participant_type'] ?>' s><?php echo $result['name'] ?></option>
<?php } ?>
</select>
</div>
</div>
</form>
I have few different fields like email and password but this dropdown validation is not working when calling it by id please help me out from this.

Actually i am fetching values in botoom feilds but i am getting it by doing this
<option value="0" >- Select -</option>

Ajax Php dependent dropdown select - How to post name of city instead id into database (submit from data)?

Few days I try to solve problem but no luck.
Problem is next:
Web form with dependent dropdown select box where user can select his
city, zip and street and that work but.
When I submit form in my database no city_name (text) - only city_id (number/value).
So, question is - How to post city_name in database? User is from Rome and I Rome (text) is submited not city_id (number).
Select input:
<div class="form-group">
<label class="col-md-4 control-label" for="grad">City:*</label>
<div class="col-md-4">
<select type="text" name="city_name" id="city_name" class="form-control input-sm">
<option value=""></option>
<option value="999">---Enter city yourself---</option>
<?php $sql_query="SELECT * FROM city_table order by city_id asc";
$result=mysqli_query($dbconfig,$sql_query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<option value="<?php echo $row['city_id'].'_'.$row['city_name'];?>"><?php echo $row['city_name'];?></option>
<?php }?>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="post_no">ZIP code:*</label>
<div class="col-md-4">
<select name="zip_name" id="zip_name" class="form-control input-sm" onchange="recalculate_price();">
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="address">Street:*</label>
<div class="col-md-4">
<select name="street_name" id="street_name" class="form-control input-sm" onchange="recalculate_price();">
</select>
</div>
</div>
get_zip_php
<?php
include('db_config.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql_query="SELECT * FROM zip_table where city_id='$id' order by zip_name asc";
$result=mysqli_query($dbconfig,$sql_query);
?>
<option selected="selected">Select ZIP code :</option><?php
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
?>
<option value="<?php echo $row['zip_id']; ?>-<?php echo $row['limousine']; ?>-<?php echo $row['kombi']; ?>-<?php echo $row['mini_van']; ?>"><?php echo $row['zip_name']; ?></option>
<?php
}
}
?>
get_street_php
<?php
include('db_config.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql_query="SELECT * FROM street_table where zip_id='$id' order by street_name asc";
$result=mysqli_query($dbconfig,$sql_query);
?>
<option selected="selected">Select street please :</option><?php
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
?>
<option value="<?php echo $row['street_id']; ?>"><?php echo $row['street_name']; ?></option>
<?php
}
}
?>
Ajax:
<script>
$(document).ready(function()
{
$("#city_name").change(function()
{
var id=$(this).val();
var data = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_zip.php",
data: data,
cache: false,
success: function(html)
{
$("#zip_name").html(html);
recalculate_price();
}
});
});
$("#zip_name").change(function()
{
var id=$(this).val();
var data = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_street.php",
data: data,
cache: false,
success: function(html)
{
$("#street_name").html(html);
recalculate_price();
}
});
});
});
</script>
If I make some changes on "select city part" (Im beginner and really Im lost in all this) I can`t pass zip.
So, please tell me where to make all changes to pass all that things and post city_name, zip (name...I make it as "xxxx - city") and street name. Please help me, I googled and read here about problems few days and can`t continue work on my project until I fix this. Thanks in advance.

Use bellow select tag. It may useful for you
<select type="text" name="city_name" id="city_name" class="form-control input-sm">
<option value=""></option>
<option value="999">---Enter city yourself---</option>
<?php
$sql_query="SELECT * FROM city_table order by city_id asc";
$result=mysqli_query($dbconfig,$sql_query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
echo "<option value='".$row['city_id']."'>".$row['city_name']."</option>";
}
?>
</select>

Concatenate the id with value like this using delimiter like this
<option value="<?php echo $row['city_id'].'_'.$row['city_name'];?>"><?php echo $row['city_name'];?></option>
In php use explode()
The explode() function breaks a string into an array.
$ss = explode('_','6_Rome');
print_r($ss);
echo $ss[0]; //6 pass the value into query
In jquery use split()
Split a string into an array of substrings:
use split()
$vv = variable_name.split("_");

fetch city name from database on the basis of city id in your POST array before INSERT Query.
SELECT `city_name` FROM `city_table` WHERE `city_id`='".$_POST['city_name']."'
then use that city name in your insert query.