php html form select option to populate text field jquery - javascript

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

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>
<?}?>

How to fill input field automatically when name is selected from database?

I have a form that need to be filled up, one of its field is employee name, I selected its value from a database table called tbl_employee, each name has codename that stored in the same table, but I have a problem, because I dont know what code to be used to automatically filled the input field called codename. the following is my html code
<div class="form-group">
<label>Employee Name</label>
<select name="employee" onchange="getEmp(this.value)" class="form-control">
<option value="">Select Employee</option>
<?php foreach($emps as $emp) : ?>
<option value="<?php echo $emp["employee_id"]; ?>"><?php echo $emp["surname"] . ', ' . $emp["firstname"]; ?></option>
<?php endforeach; ?>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Code Name</label>
<input class="form-control" name="codenamer" type="text"/>
<div class="help-block with-errors"></div>
</div>
your response is highly appreciated
To give the input a value, you add the "value" attribute to it:
<input class="form-control" name="codenamer" type="text" value="<?php echo $emp["codename"]; ?>" />
You can use jQuery here:
First of all pass codename column in option value:
<select name="employee" onchange="getEmp(this.value)" class="form-control">
<option value="">Select Employee</option>
<?php foreach($emps as $emp) : ?>
<option value="<?php echo $emp["codename "]; ?>"> // use codename column in value here.
<?php echo $emp["surname"] . ', ' . $emp["firstname"]; ?>
</option>
<?php endforeach; ?>
</select>
Second, add a ID attribute on your input field:
<input class="form-control" name="codenamer" type="text" id="codenamer" />
Than, you can use jQuery to add the value on your input field:
<script type="text/javascript">
function getEmp(codename){
$("#codenamer").val(codename); // add value to codenamer field.
}
</script>
If you want to do this without reloading the page, you need Javascript.
First, add the codename into the option attributes that you generate with PHP:
<option data-codename="<?= $emp['codename'] ?>" value="<?= $emp["employee_id"]; ?>"><?= $emp["surname"] . ', ' . $emp["firstname"]; ?></option>
Then in JS, check whenever the selected option changes, extract the codename from the selected option and write its data-codename into the value of your codenamer input.
Something like this (using Jquery):
$('#employee-selector').change(function() {
var selected = $(this).find('option:selected');
var codename = selected.attr('data-codename');
//if the above fails, you may have to use this: (note the [0])
//var codename = selected[0].attr('data-codename');
$('#codenamer').val(codename);
});
This requires you to put id='employee-selector' on your select element and id='codenamer' on your codenamer input field.
this issue is already solve. i've just rephrase the codes given above.
<script type="text/javascript">
function getEmp(codename){
var res = codename.split(" ", 1 );
document.getElementById("codenamer").value=res;
}
</script>
and caller to my input field
id="codenamer"
thanks to all respondent.

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 do I disable a HTML tag [duplicate]

This question already has answers here:
Script to enable/disable input elements?
(5 answers)
Closed 6 years ago.
I have numerous html input tags, which takes the user input and post it to a variable, code :
<form method = "post" action=""select.php>
<input id="nol" style="width: 280px;" type="text" name="searchdisease" placeholder="type diagnosis one">
<input id="nol" style="width: 280px;" type="text" name="searchdisease1" placeholder="type diagnosis two">
<input id="nol" style="width: 280px;" type="text" name="searchdisease2" placeholder="type diagnosis three">
</form>
then this variable i append it to SQL query to retrieve data LIKE user input code:
$search_disease = $_POST['searchdisease'];
$search_disease1 = $_POST['searchdisease1'];
$search_disease2 = $_POST['searchdisease2'];
$query="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease%'";
$result= $con->query($query);
$query1="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease1%'";
$result1= $con->query($query1);
$query2="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease2%'";
$result2= $con->query($query2);
, then echo the results to a select tag.
code:
<select id="disease" style="width: 40%;" name="tdisease">
<option value="">Select Disease</option>
<?php
while ($row=$result->fetch_array(MYSQLI_ASSOC)) {
?>
<option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option>
<?php } ?>
</select>
<select id="disease" style="width: 40%;" name="tdisease1">
<option value="">Select Disease</option>
<?php
while ($row=$result1->fetch_array(MYSQLI_ASSOC)) {
?>
<option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option>
<?php } ?>
</select>
<select id="disease" style="width: 40%;" name="tdisease2">
<option value="">Select Disease</option>
<?php
while ($row=$result2->fetch_array(MYSQLI_ASSOC)) {
?>
<option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option>
<?php } ?>
</select>
So i want to know how can i use JavaScript to disable or hide the select tags when the user input is empty?
You can simply add event listener on your tags, which will add attribute to selected one "disabled".
It will look like:
const target = document.querySelector('<yourtag>');
target.value.length > 0 ? 'it is ok' : target.setAttribute('disabled', 'disabled');
ID should be different for every inputs.then,
var val=$('#id-of-element').val;
check as: if(val==" ") or if(val==null)
it will be blank when the input is nothing.
you can use below line of code to disable an item:
document.getElementById("id-of-selected-element").disabled="true";
To hide:
document.getElementById("id-of-selected-element").style.display="none";

Form fields stability when using jquery to create the form

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.

Categories