Retain selected value of the dropdown after page refreshes - javascript

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>

Related

How i get the values in select option using javascript

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();

show data in another dropdown, related first dropdown data

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.

How to filter multicolumn mysql data and display on the webpage using php and ajax

Recently i have asked same question but this is improved one.
i have some select options on my webpage and as someone selects option i want to get data from database for the same. i tried to do but i am geting data for only one select . what if i want to get data with combination of 3 select fields . how can i achieve this. please help !!!
here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
</head>
<body>
<div id="rooms"></div>
<div class="container main-section" id="main">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="location">Location:</label>
<select name="location" id="location" class="form-control">
<option value="">Select</option>
<option value="candolim">Candolim</option>
<option value="calangute">Calangute</option>
<option value="baga">Baga</option>
<option value="anjuna">Anjuna</option>
<option value="morjim">Morjim</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="stay_type">Property Type:</label>
<select name="stay_type" id="stay_type" class="form-control">
<option value="">Select</option>
<option value="hotel">Hotel</option>
<option value="villa">Villa</option>
<option value="studio">Studio</option>
<option value="resort">Resort</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="room_type">Room Type:</label>
<select name="room_type" id="room_type" class="form-control">
<option value="">Select</option>
<option value="standard">Standard</option>
<option value="deluxe">Deluxe</option>
<option value="suit">Suit</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group"><br>
<input type="submit" name="submit" value="Search" class="btn btn-success">
</div>
</div>
</div>
</div>
<div class="display">
</div>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
and this is my script --
$(document).ready(function(){
getAllRooms();
function getAllRooms(){
$.ajax({
url:'action.php',
method: 'POST',
data:{rooms:1},
success:function(response){
$('.display').html(response);
}
});
}
$('#location').change(function(){
var location = $(this).val();
$.ajax({
url:'action.php',
method: 'POST',
data:{location:location},
success:function(response){
$('.display').html(response);
}
});
});
});
and finally here is my action.php
<?php
$conn=mysqli_connect('localhost','cms_user','12345','rooms');
if (isset($_POST['rooms']) || isset($_POST['location'])){
if (isset($_POST['rooms'])){
$query_all = "SELECT * FROM rooms ORDER BY rand() ";
}
if(isset($_POST['location'])){
$location = $_POST['location'];
$query_all = "SELECT * FROM rooms WHERE location = '$location' ORDER BY rand() ";
}
$query_run = mysqli_query($conn,$query_all);
if (mysqli_num_rows($query_run)>0){
while ($row = mysqli_fetch_array($query_run)){
$room_id = $row['id'];
$room_name = $row['name'];
$location = $row['location'];
$stay_type = $row['stay_type'];
$room_type = ucfirst($row['room_type']);
$image = $row['image'];
$price = $row['price'];
echo "
<div class='container rooms'>
<div class='row'>
<div class='col-md-4'>
<img src='img/$image' alt='room' width='100%'>
</div>
<div class='col-md-6'>
<h2>$room_name</h2>
<p>$stay_type</p>
<h4 class='text-success'>$location</h4>
</div>
<div class='col-md-2'>
<br><br><br><br>
<h4 class='text-primary'>$room_type</h4>
<h4>Rs : $price </h4>
<a href='#'><input type='submit' name='book' value='Book Now' class='btn btn-success'></a>
</div>
</div></div>
";
}
} else {
echo "<center><h3>No Properties available</h3></center>";
}
}
?>
Thanks !
In your jquery, you should have a .change function for all 3 select boxes - when any of the select boxes change, grab and send all 3 values to your php page.
$(document).ready(function(){
getRooms();
function getRooms(){
var location = $('#location').val();
var stay_type = $('#stay_type').val();
var room_type = $('#room_type').val();
$.ajax({
url: 'action.php',
method: 'POST',
data: {
"location" : location,
"stay_type" : stay_type,
"room_type" : room_type,
},
success:function(response){
$('.display').html(response);
}
});
}
$('#location').change(function(){
getRooms();
}
$('#room_type').change(function(){
getRooms();
}
$('#stay_type').change(function(){
getRooms();
}
});
In your php page, get the value of all 3 possible post variables and start building your query based on those values. It helps to split up the sql statement into parts and then just combine them at the very end.
# setting parameters from the post
$room_type = isset($_POST['room_type']) ? $_POST['room_type'] : '';
$location = isset($_POST['location']) ? $_POST['location'] : '';
$stay_type = isset($_POST['stay_type']) ? $_POST['stay_type'] : '';
# defaults
$select = "SELECT * FROM rooms";
$where = " WHERE 1 = 1"; # to have a default where that is always true
$order_by = " ORDER BY rand()"; # you can always change the order by this way
if ($room_type != '') {
$where .= " AND room_type = '$room_type'";
}
if ($location != '') {
$where .= " AND location = '$location'";
}
if ($stay_type != '') {
$where .= " AND stay_type = '$stay_type'";
}
$sql = $select . $where . $order_by;
/* execute query using the $sql string and output results here */
This will also not require you to set a rooms value since it will still execute a query for all items.
If you want PHP to treat $_GET/$_POST['select2'] as an array of options just add square brackets to the name of the select element like this:
Then you can access the array in your PHP script
<?php
header("Content-Type: text/plain");
foreach ($_GET['select2'] as $selectedOption)
echo $selectedOption."\n";
$_GET may be substituted by $_POST depending on the

php codeigniter - get back the default value using ajax

I am working on a module where two drop downs will be available for the user to select, the values of second drop down will be auto-populated based on the first drop down and for fetching the values from db I am using AJAX.
Initially on page load there will be a text box in readonly mode in the place of second drop down (inside the span tag with id="model_inner_list"), this is the case when first drop down value is 0.
When first dropdown's value changes to other than 0 the span tag id="model_inner_list" text box will be replaced by second drop down (populated with values from db)
Now the problem is when I change back the first drop down value to 0 the second drop down in span tag with id="model_inner_list"is not getting replaced with default text box. i.e. when ever the value of first drop down is 0 the second drop down should be replaced by default text box. Below are the code level details of what I am trying
Look of drop downs
HTML version on drop downs (included in View file)
<div class="form-group input-group barnch_emp">
<span class="input-group-addon mylable">Make</span>
<select name="bv_vech_name_id" id="bv_vech_name_id" required="" class="form-control user-success" onchange="javascript:get_model_list(this.value)">
<option value="0">Select Vehicle Make</option>
<option value="1">HERO</option>
<option value="2">TVS</option>
<option value="3">SUZUKI</option>
<option value="4">BAJAJ</option>
<option value="5">HONDA</option>
<option value="6">YAMAHA</option>
<option value="7">MAHINDRA</option>
<option value="8">ROYAL ENFIELD</option>
</select>
</div>
<div class="form-group input-group barnch_emp">
<span class="input-group-addon mylable">Model</span>
<span id="model_inner_list">
<input type="text" class="form-control" value="Please Select Make" readonly="">
</span>
</div>
I am using the below javascript function to call the php function using AJAX
function get_model_list(vm_vechile_id) {
document.getElementById('model_inner_list').innerHTML = '<img src="<?php echo base_url();?>assest/img/loader_small.gif"/>';
var url = '<?php echo base_url();?>index.php/order/get_model_list_ajax?vm_vechile_id=' + vm_vechile_id;
$.post(url, function(result) {
document.getElementById('model_inner_list').innerHTML = result;
});
}
Controller function called by AJAX
function get_model_list_ajax($vm_vechile_id = "", $ba_city = "") {
if ($vm_vechile_id == '0') {
echo '<input type="text" class="form-control" value="Please Select Make" readonly>';
} else {
$this->load->model('Order_model');
if (!isset($_REQUEST['vm_vechile_id']))
$_REQUEST['vm_vechile_id'] = $vm_vechile_id;
if (!isset($_REQUEST['ba_city']))
$_REQUEST['ba_city'] = "";
$result = $this->Order_model->get_option_list_state('vechile_model', 'vm_vechile_id', $_REQUEST['vm_vechile_id']);
$cat1[''] = 'Select Model';
if ($result) {
foreach ($result as $item) {
$cat1[$item->vm_id] = $item->vm_model_name;
}
}
if ($vm_vechile_id)
return form_dropdown('bv_vech_model_id', $cat1, $ba_city, 'id="bv_vech_model_id" class="form-control"');
else
echo form_dropdown('bv_vech_model_id', $cat1, $_REQUEST['ba_city'], 'id="bv_vech_model_id" class="form-control"');
}
}`
Model function called by above Controller
public function get_option_list_state($table_name = "", $field_name = "", $id = "") {
$res = array();
if ($id)
$this->db->where($field_name, $id);
$q = $this->db->get($table_name);
if ($q->num_rows() > 0) {
foreach (($q->result()) as $row) {
$data[] = $row;
}
return $data;
}
}
You can change the get_model_list function like this:
function get_model_list(vm_vechile_id) {
if ( vm_vechile_id > 0 ) {
//ajax request goes here
}
else {
document.getElementById('model_inner_list').innerHTML = '<input type="text" class="form-control" value="Please Select Make" readonly="">';
}
}

PHP + Jquery Change Value of Textbox according to two Dropdown

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

Categories