I have two divs. One is input type text (Searching for city) and another is select option (Select area based on city search. ). If I type city name in first div then related city show in dropdown and when I select any city then related area in second div should be show.
My fronend is:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group mb-15">
<input type="text" name="selectcity" id="selectcity" class="selectcity tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group mb-15" >
<select required id="selectarea" class="form-control" name="selectarea">
<option value="">Select Area</option>
</select>
</div>
</div>
Now script is:
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function() {
$('input.selectcity').typeahead({
name: 'selectcity',
remote: 'search.php?key=%QUERY',
limit: 10
}).on('typeahead:selected', function(e){
var selectedcity = $(this).val();
$.ajax({
type: "POST",
url: "process-request.php",
data: "selectcity=" + selectedcity,
}).done(function(data) {
$("#selectarea").html(data);
});
});
});
search.php is:
<?php
include("connection.php");
$key=$_GET['key'];
$array = array();
$query=mysql_query("select * from location_master where status1='1' AND location LIKE '%{$key}%'");
while($row=mysql_fetch_array($query))
{
$array[] = $row['location'];
}
echo json_encode($array);
?>
process-request.php is
<?php
include("connection.php");
if(isset($_POST["selectcity"])){
$selectcity = $_POST["selectcity"];
$query1=mysql_query("select * from location_master where parent_id='$selectcity'") or die (mysql_error());
if($selectcity !== 'Select City'){
echo"<option value=''>Select Area</option>";
while($value = mysql_fetch_array($query1)) {
?>
<option value="<?php echo $value['id'];?>" ><?php echo $value['location'];?></option>
<?php
}
}
}
?>
But in search.php $array[] = $row['location']; display accurate city. But it gives null id for area.
If I $array[] = $row['id']; then I type city in text box, then ID is showing in dropdown and gives accurate area in area option.
But I need display city in dropdown but ID should be pass of related city for area option.
Related
I need to retain selected value of the dropdown after page refreshes on click.
What is happening:
After I select an item from the dropdown the page reloads by itself and the value of the dropdown go to starting position though the value displays on the end of the url.
This is my code:
<script>
function refreshPage(passValue){
window.location="index.php?cat_page=admin_post&sw_cat=sw_catn="+passValue;
}
</script>
<div class="form-group col-md-4">
<label for="inputState">Your health proplem</label>
<select name="illness_id_cat" class="form-control" onchange="refreshPage(this.value);" >
<?php
while(mysqli_stmt_fetch($stmt)){
echo "<option value='{$illness_id_cat}'>{$illness_name_cat}</option>";
}
?>
</select>
</div>
This option doesn't work too:
<script>
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
</script>
<div class="form-group col-md-4">
<label for="inputState">Your health proplem</label>
<select name="illness_id_cat" class="form-control" id="dropdown" >
<?php
while(mysqli_stmt_fetch($stmt)){
echo "<option value='{$illness_id_cat}'>{$illness_name_cat}</option>";
}
?>
</select>
</div>
This I don't know how to implement, what is a "itemname":
<script>
var text = localStorage.getItem("itemname");
if(text !== null) {
$("select option").filter(function() {
return this.text == text;
}).attr('selected', true);
}
</script>
A more conventional way to do this would be using PHP, and getting the querystring value you're passing in via the window.location command:
<script>
function refreshPage(passValue){
window.location="index.php?cat_page=admin_post&sw_cat="+passValue;
}
</script>
<div class="form-group col-md-4">
<label for="inputState">Your health problem</label>
<select name="illness_id_cat" class="form-control" onchange="refreshPage(this.value);" >
<?php
while(mysqli_stmt_fetch($stmt)){
echo "<option";
//get the category value from the querystring and check it against the current category value in the loop. If it matches, pre-set the option as selected
if (isset($_GET["sw_cat"])) {
if ($_GET["sw_cat"] == $illness_id_cat) echo " selected";
}
echo " value='{$illness_id_cat}'>{$illness_name_cat}</option>";
}
?>
</select>
</div>
I am fetching acno from table when i select a party name in option.I have so far tired i get the acno from the table but it is not place in the option box.
My controller code:
public function get_states2()
{
$name = $this->input->post('name');
$result = $this->db->query("SELECT TAcNo FROM tipup_payment LEFT OUTER JOIN parmaster on parmaster.pcode = tipup_payment.TName WHERE PName='$name' ")->result_array();
echo json_encode($result);
}
My View page code:
<div class="col-md-6">
<div class="form-group form-group-xs">
<div class="col-lg-9">
Party Name:
<select class="form-control countries" name="City">
<option></option>
<?php foreach ($PName as $row ): ?>
<option value="<?php echo trim($row['PName']); ?>"><?php echo trim($row['PName']); ?></option><?php endforeach ?>
</select>
</div>
</div>
<div class="form-group form-group-xs">
<div class="col-lg-9">
AcNo:
<select multiple="multiple" style="height: 85px;" id="Name" class="form-control states">
<option value=""></option>
</select>
<?php echo form_error('Area', '<div class="text-danger">', '</div>'); ?>
</div>
</div>
<div id="item">
<input type="checkbox" name="item">With Details</center></div>
</div>
</div>
My Script Code:
<script type="text/javascript">
$(document).ready(function(){
$('.countries').change(function(){
var name = $('.countries').val();
$.ajax({
type: "POST",
url: "<?php echo base_url();?>Tieup/get_states2",
data:{name:name},
datatype: 'json',
success: function (data) {
/*get response as json */
alert(data);
var result = jQuery.parseJSON(data);
var no = result.TAcNo;
$("#Name").val(no);
/*ends */
}
});
});
});
</script>
This is my view page when i select a party name it should display the acno in acno option box( it down the party name).
give a class or id to ur dropdown
ur html
<select class="product">
</select>
ur jquery code
loop through all ur value and set it in ur option value one by one and at the end inject all ur html to ur select option using .html()
var value = [{"TAcNo":"341"}]
var options = '<option value="">Select</option>';
$(value).each((index, item) => { //loop through your elements
console.log(item)
options += '<option value="'+item.TAcNo+'">'+item.TAcNo+'</option>';
});
$('.product').html(options);
Hope it helps
Solution
you need to trigger change like this to update select value
$("#Name").val(no).change();
Fetch selected value from dropdown which is in one form and onClick of the button outside the form send the value to php page
<div class="drpvendorname">
<font style="color: white;">
<label>Distribution Point:</label>
</font>
</div>
<select class="form-control" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option onClick="distribution('.$result['pointshortname'].')" value="' .$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
</form><!--form1 ends here-->
<form action="../customer/form.php"><!--form2 starts here-->
<button class="btn pos7" name="abc" method="GET" style="margin-left:5%;">New Customer</button>
</form><!--form2 ends here-->
<div class="dailybreakupbtn">
<input class="btn" type="submit" id="dailybreakupbutn" name="dailybreakup" value="Enter Daily Breakup" onClick="distribution(<?=$pointname?>)"/>
</div>
<?php
if(isset($pointname)){
?>
<script type="text/javascript">
function distribution(pointname){
var pointname;
window.location.href="dailybreakup.php?query=" +pointname;
}
</script>
<?php
}
?>
I have tried this sending selected dropdown box value to next page using function name distribution
I ended sending undefined to the next page.
can any one help me sending the selected value to the next page with out putting the button in the <form>
May this will be help you :)
Html code:
<form action= "" method= "post">
<select class="form-control drpvendor" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option value="'.$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
</form>
JQuery Code:
$(doucment).on('change','.drpvendor',function(){
var data=$(this).attr('selected','selected');
$.ajax({
url: "dailybreakup.php",
data:'query='+ data,
type: "POST",
success: function(data) {
window.location.href='customer/form.php';
}
});
});
Use code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> // please link the path or use cdn
<script type="text/javascript">
function call_me(){
var pointname=document.getElementById("drpvendor").value;
alert(pointname); // comment it after testing
window.location.href="dailybreakup.php?query=" +pointname;
}
</script>
<form>
<select class="form-control" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option value="' .$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
<input type="button" onclick="call_me()"/>
</form><!--form1 ends here-->
Note : 1) Code is not tested
2) use your select id instead of your_select_id
3) check variable
I saw few pages but tried all and none worked for me.
This is what i want:
on my html:
<form class="form-horizontal" role="form" method="POST" action="">
<select name="customer_id" id="customer_id" class="form-control">
<option>Select customer</option>
<?php foreach($customers AS $customer): ?>
<option value="<?php echo $customer->id;?>"><?php echo $customer->name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label for="category" class="col-xs-4 control-label">Category</label>
<div class="col-sm-4 col-xs-8">
<input type="text" class="form-control" name="category" id="category" placeholder="Category" disabled="disabled">
</div>
</div>
Then i have a script to auto fill the category field depending on the customer selected, ass on the database each customers fall into different categories.
<script type="text/javascript">
$(document).ready(function() {
$('#customer_id').change(function() {
var customer_id = $("#customer_id").val();
$.ajax({
type: "POST",
url: <?php echo base_url(). 'customer/getCustomerCat' ; ?>,
data: form_data,
success: function(cat)
{
$("#category").val(cat);
}
});
});
});
</script>
Then on my controller i have:
public function getCustomerCat(){
$id = $this->input->post('customer_id');
$category = $this->customer_model->getCustomerCat($id)[0]->category;
echo $category;
}
On my Model i have:
public function getCustomerCat($id){
$query ="SELECT category FROM customers WHERE id=$id";
$query = $this->db->query($query);
return $query->result();
}
I am not so good with ajax but expected the categoory field to be populated after selecting a customer without reloading the page.
I try to update text box value according to 2 dropdown. 1 drop down contain price1 and other drop down contain price 2, now I want that when user select price from both drop down then textbox display like that "price1 + price2 = total" How can I marge both value in single textbox value ? my price comes from database. Here is FIDDLE
PHP CODE
<div class="three columns">
<div class="picker">
<select name="city" required>
<option value="" disabled>Select</option>
<?php
$result = mysqli_query($con,"SELECT * FROM area");
while($row = mysqli_fetch_array($result))
{
?>
<option value="New"><?php echo $row['city']."( $ ".$row['area'].")";; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="four columns">
<div class="picker">
<select name="position" required>
<?php
$result = mysqli_query($con,"SELECT * FROM pricing");
while($row = mysqli_fetch_array($result))
{
?>
<option value="<?php echo $row['position']; ?>"><?php echo $row['position']."( $ ".$row['price'].")"; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="row">
<div class="two columns">
Total
</div>
<div class="ten columns">
<div class="field">
<input class="input" type="total" id="total" placeholder="" name="total" disabled/>
</div>
</div>
</div>
add a class on both combo and write one event this way:
$('.combo').change(function() {
$('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
FIDDLE DEMO
or you can do this way:
$('.combo').change(function() {
$('#firstvalue').val($('#combo').val() +"+"+$('#combo1').val()+"=");
$('#firstvalue1').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
SECOND DEMO
use this..
$(document).ready(function() {
$('.combo').change(function() {
$('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
$('#combo1').change(function() {
$('#firstvalue1').val($('#combo1').val());
});
});
you can do it by using variables:
if you wanted to sum of two dropdown options then you have to give integer value of the seond dropdown not the string(like a3,a4 should be 3,4). see demo html.
$(document).ready(function() {
price1=0;
price2 =0;
$('#combo').change(function() {
price1= this.value;
$('#firstvalue').val(parseInt(price1)+parseInt(price2));
});
$('#combo1').change(function() {
price2 = this.value;
$('#firstvalue').val(parseInt(price1)+parseInt(price2));
});
});
demo