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.
Related
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";
I'm running an online store for contact lenses using OpenCart 2.2.
I would need to modify the product page a little in the following way :
When you buy a contact lenses you have 2 dropdown lists where you select the diopter (power) for each eye. What I want to do is, if you select the power on for one eye only, the minimum quantity for purchase of the product to be 1, but if both eyes are selected, the minimum quantity should be 2.
So I'm thinking of a if-else-elseif function, because there are only 3 cases possible - 1 - Only left eye selected; 2 - Both eyes selected; 3 - Only right eye selected. This is how the product page looks now.
Qty = 1 is by default, but I want to make it switch instantly to 2, if something is selected in both dropdown lists.
I suppose I would need some AJAX to do this? I have very minimum knowledge of AJAX.
I DON'T expect someone to do it for me, I'm just trying to find out what I would need to make it happen..
The real boner and what makes me lost is that the select options are named "option[XXX]" by default from OpenCart and the number ([xxx]) is different for each product on the store and each option..
Could anyone give me any clues if that is even possible?
Edit :
Here is how I display my select tags :
<div id="product">
<?php if ($option['type'] == 'select') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
<select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($option['product_option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</option>
<?php } ?>
</select>
</div>
<!-- ... -->
<?php } ?>
<!-- ... -->
</div>
Thanks for the answers! Here is the quantity HTML code as well:
<div class="form-group">
<label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
<input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
<br />
<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>
</div>
I don't see any reason to use AJAX for this, it can be done just using jQuery/JavaScript:
(function($) {
'use strict';
$(document).on('ready', function() {
var optionNames = ['power - right eye', 'power - left eye'];
var $qtyInput = $('#product input[name=qty]');
var $options = $('#product select').filter(function() {
var text = $.trim($(this).prev('label').text().toLocaleLowerCase());
return $.inArray(text, optionNames) > -1;
});
$options.on('change', function() {
var selectedTotal = $options.filter(function() {
return !!$(this).val();
}).length;
if (selectedTotal > 0) {
$qtyInput.val(selectedTotal).prop('min', selectedTotal);
}
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="product">
<div class="form-group required">
<label class="control-label" for="input-option1">power - left eye</label>
<select name="option[1]" id="input-option1" class="form-control">
<option value="">-- Please Select --</option>
<option value="1">First</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="input-option2">power - right eye</label>
<select name="option[2]" id="input-option2" class="form-control">
<option value="">-- Please Select --</option>
<option value="1">First</option>
</select>
</div>
<div class="form-group">
<input type="number" name="qty" value="1" min="1" required />
</div>
</div>
</div>
You may need to change the selectors to match what you have because you didn't show us your quantity input field.
A couple other things to consider with this code:
The quantity is always set to 2 or 1, regardless of whether or not the user has already entered 6 for example. You may want to add in logic to stop this happening.
Also, OpenCart uses an option_id as well as a product_option_id for each option, with the option_id being the same ID regardless of what product you're on. It may be worth adding this to the select HTML so you can look up the elements more efficiently than checking the label's text value as I have done.
I need to attribute the selected value from my dropdown list into a variable that I can use in my sql query.
I know that I have to use Ajax or jQuery but I can't because I don't learn it yet
Picture 1 :
Picture 2 :
<!-- Début PHP Catégories -->
<?php
$resCat=mysqli_query($conne,$reqCat);
?>
<div class="form-group">
<label class="col-md-3 control-label">Catégorie</label>
<div class="col-md-9">
<select class="form-control select" name="categorie" id="categorie" ">
<?php
while ($rowCat= mysqli_fetch_row($resCat)) {
?>
<option value="<?php echo $rowCat[1] ?>"><?php echo $rowCat[0] ?></option>
<?php
}
$categorie = $_POST['categorie'];
?>
</select>
</div>
</div>
<!-- Fin PHP Catégories -->
Thanks
For your case you can simply use a form and when you validate the button after having selected your option you just have to recover the value of the option and make your request
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);
});
});
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.