Form fields stability when using jquery to create the form - javascript

I am using json to fill the options of select tag, when I choose the country, system synchronously fill the combobox of cities
<label class="AddressLable">الدوله</label>
<select name="country" id="countryCB">
<option >اختر</option>
<?php $cntr=0;
while($cntr < count($countries))
{
?>
<option value="<?php echo $countries[$cntr]['countryNo']?>" <?php echo $_POST['country']==$countries[$cntr]['countryNo']?'selected':''?>> <?php echo $countries[$cntr]['countryName'];?></option>
<?php
$cntr++;
}
?>
</select>
<label class="AddressLable">المدينة</label>
<select name="city" id="cityCB">
</select>
//here is the jquery script
$("#countryCB").change(function(){
var countryNo=$(this).val();
var param={"action":"getCities",
"countryNo":countryNo
};
$.getJSON("controllers/Customer.controller.php",param,function(result){
input=$("#cityCB");
$('>option',input).remove();
$("#cityCB").append('<option> اختر</option>');
$.each(result,function(i,val){
var option = $('<option />');
option.attr("value",val.cityNo);
option.text(val.cityName);
$("#cityCB").append(option);
})
});
How can I make something like this:
<?php echo $_POST['country']==$countries[$cntr]['countryNo']?'selected':''?>
in jquery?

$("cityCB option[value='your_value']").attr("selected", true);
Run it after you append all of the options.

Related

Can't set the selected value using jquery chosen plugin

I'm using the chosen plugin from jquery and I want to get the selected value option from my select menu. In my source code, it shows the option that was select previously, from the database. But the selected option doesn't appear.
This is my script:
<script type="text/javascript">
var selectedDistrict = 0;
$(document).ready(function () {
$('#class_of_my_select').chosen();
$("#class_of_my_select").change(function () {
selectedDistrict = $("#class_of_my_select").val();
$("#class_of_my_select").trigger("chosen:updated").val(selectedDistrict);
});
});
And this is my form:
form.php
<select style="width: 390px;display: inline-block;" class="input-sm form-control" name="class_of_my_select" id="class_of_my_select" type="text">
<option value=""></option>
<?php foreach ($list as $key){ ?>
<option value="<? echo $key->id; ?>" ><? echo $key->name; ?></option>
<?}?>

Type feature is not available in select dropdown

I have a select dropdown with search option that displays dynamic data,its working fine,but i need to add one more feature like if the user types anything and it is not available in the option then he should be allowed to simply type and provide an input. it should not be like this that if the user's desired value is not in dropdown then he is not able to type also
The link that i am following for dropdown is this
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
<select name="ddlCountry" id="Select1" class="selectpicker" data-live-search-style="begins" data-live-search="true">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
<?php endforeach; ?>
</select>
Can anyone please give me any suggestions,
Thanks in advance.
You can use the html5 datalist feature to achieve this functionality,
<input name="ddlCountry" id="Select1" class="selectpicker" data-live-search-style="begins" data-live-search="true" >
<datalist id="Select1">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
<?php endforeach; ?>
</datalist>
The solution requires you to capture the input as the user is typing, the other issue with the above solution, it is tricky to use select and options, instead, use input type text as in the below code.
The below code needs a bit of tweaking.
Html and PHP
<input list="select1" name="ddlCountry" class="selectpicker" data-live-search-style="begins" data-live-search="true" /><
<datalist id="select1">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?>
<?php endforeach; ?>
</datalist>
Every time the user enters the data, we need a way to capture the new entry
AJAX and Javascript
$(document).ready(function() {
$(document).on('keyup', 'input[name="ddlCountry"]', function() {
alert($('input[name="ddlCountry"]').val());
$.ajax({
url: "{PHP url}",
method: "GET",
data: {
search: $('#Select1 option:selected').val()
},
})
.done(function(data) {
//assuming the data is returned as an array
var tmp_variable = '';
data.foreach(function(item) {
tmp_variable = tmp_variable + '<option value="' + item + '">';
})
$('#select1').html(tmp_variable);
});
});
})

how to hide original dropdown list in select2

I want to use select2 for my dropdown list. The options are from a database query. What I got is there are two dropdown lists showing. The first one is the original dropdown and the second is using select2.
The select code is:
<select name="city" id="select-city" class="form-control">
<option></option>
<?php foreach ($cities as $ct) : ?>
<option value="<?php echo $ct->id ?>"><?php echo $ct->name ?></option>
<?php endforeach; ?>
</select>
And the javascript is:
<script>
$(document).ready(function () {
$("#select-city").select2();
});
</script>
I want to hide the original dropdown. How can I do this?

php html form select option to populate text field jquery

I'm editing a wordpress plugin:
It currently has a dropdown option list for a user, and based on that user, I want to fill a text field with that users email.
selection option dropdown:
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
The customer email is stored in $Customer->Customer_Email
And Im trying to fill in the following value when a user changes the selected user:
<div class="form-field">
<label for="Order_Email"></label>
<input type='text' name="Order_Email" id="Order_Email" />
</div>
I've played around with filling the Order_Email with the following script, but it just sents the value as the customer_id. How do I change the value to the email
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#Customer_ID').on('change', function () {
var selection = $(this).val();
$('#Order_Email').val(selection);
});
});
</script>
You could just add a title attribute to the options to equal whatever the email value is:
Play around with it here: http://jsfiddle.net/7BUmG/3876/
This might not be the best solution and hacky, but it should do the trick. This will also break after the plugin is updated
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option title='<?php echo $Customer->Customer_Email; ?>'value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
and
$(document).ready(function(){
$('#Customer_ID').change(function() {
var email = $(this).find("option:selected").attr("title");
$('#Order_Email').val(email);
});
});

How to pass dropdown selected item to PHP file through JavaScript

The following is the code that displays a dropdown list (database values) I need to send the selected item from dropdown list to another PHP file through JavaScript.
<?php include('db.php'); ?>
....
....
<script>
$(document).ready(function(){
$('#tag').autocomplete("autocomplete.php?",{ seleectFirst: true});
});
</script>
<body>
<select name="province" id="province">
<?php $result=mysql_query("select distinct(type) from schools");
while($row=mysql_fetch_array($result)){?>
<option value="<?php echo $row['type'];?>">
<?php }?>
</select>
<input name="tag" type="text" id="tag">
</body></html>
I have to pass the item selected in dropdown list to autocomplete.php through JavaScript.
You could probably read the value and call the other PHP link using GET parameters and have the other PHP file read the GET variable. The other method would be to do a POST. An example of the former below...
In a script tag or js file, put this function.
function loadPHP() {
var e = document.getElementById("province");
var val = e.options[e.selectedIndex].value;
location.href = "http://www.website.com/otherphp.php?sel=" + val;
}
Trigger it on the onchange event like this...
<select name="province" id="province" onchange="loadPHP()">
<?php $result=mysql_query("select distinct(type) from schools");
while($row=mysql_fetch_array($result)){?>
<option value="<?php echo $row['type'];?>">
<?php }?>
</select>

Categories