I'm getting a set of user roles from the database using PHP and they are put in a <select> tag's <option>s as follows:
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onkeyup="clearMsg('roleerr')" onchange="getRole()"/>
<option value="">Select a Role</option>
<?php while($rowrole = $resultrole->fetch(PDO::FETCH_BOTH)) { ?>
<option value="<?php echo $rowrole ['role_id']; ?>">
<?php echo $rowrole ['role_name']; ?>
</option>
<?php } ?>
</select>
<span id="roleerr" class="error">*</span>
</div>
And I want to get the selected value of the dropdown 'onchange' and for that getRole() javascript function is written. How to get this done?
When the element changes, the value of the dropdown will be set to the value attributed to the selected option. So you would just define your javascript function and have it fetch the value of the dropdown:
function getRole(){
var finalVal = document.getElementById("user_role").value;
// And then here you can do whatever you want with the information
}
You can assign value in paramater in onchange()
this should work below
function getRole(value) {
if(value != "")
alert(value)
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(this.value)"/>
<option value="">Select a Role</option>
<option value="23">select 23</option>
<option value="24">select 24</option>
<option value="25">select 25</option>
</select>
<span id="roleerr" class="error">*</span>
</div>
You could try event of onchange.
onchange="getRole(event)"
Javascript.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
I tested it with hard data.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(event)"/>
<option value="">Select a Role</option>
<option value="1">admin</option>
<option value="2">user</option>
<option value="3">support</option>
</select>
<span id="roleerr" class="error">*</span>
</div>
Related
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
I have a form in this There are two field One is Search and other is Option When i select any value from Search field the value of Option field will change.Value of Second field are different datalist defines as datalist1,datalist2,datalist3.....I want the value given in List attribute of Second filed to be same as the variable value in java script.i Tried the following code this code is not giving any output.
function random() {
var a = document.getElementById('search').value;
if (a === "sampleid") {
var datalist = datalist1;
} else if (a === "facility") {
var datalist = datalist1;
} else if (a === "user") {
var datalist = datalist3;
} else if (a === "affiliation") {
var datalist = datalist4;
} else if (a === "status") {
var datalist = datalist5;
} else if (a === "btr") {
var datalist = datalist6;
} else if (a === "type") {
var datalist = datalist7;
}
document.getElementById('option').innerHTML = datalist;
}
<form class="form-inline" method="post" action="search-sample.php">
<div class="col-md-5" align="center">
<label class="search">SEARCH BY-</label>
<select type="text" name="SEARCH" id="search" class="form-control" onchange="random()">
<option value="SELECT TYPE">SELECT TYPE</option>
<option value="sampleid">SAMPLE-ID</option>
<option value="facility">FACILITY</option>
<option value="user">USER NAME</option>
<option value="affiliation">AFFILIATION</option>
<option value="status">STATUS</option>
<option value="btr">BTR</option>
<option value="type">SAMPLE TYPE</option>
<option value="date">DATE</option>
</select>
</div>
<div class="col-md-5" align="center">
<label class="search">OPTION</label>
<input type="text" class="form-control" id="option" name="facility" list=< ?php echo "datalist" ?> />
</div>
<datalist id="datalist1">
<option value=""> </option>
<?php
$sql = "SELECT * from tblfacility order by sampleid asc";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{ ?>
<option value="<?php echo htmlentities($result->sampleid);?>"><?php echo htmlentities($result->sampleid);?></option>
<?php }} ?>
</datalist>
Here is what you need to do.
Use quotes around the IDs of the datalists
Use setAttribute of the list attribute of the input
function random() {
var a = document.getElementById('search').value,
datalist = "datalist1";
if (a === "sampleid") {
datalist = "datalist1";
} else if (a === "facility") {
datalist = "datalist1";
} else if (a === "user") {
datalist = "datalist2";
} else if (a === "affiliation") {
datalist = "datalist3";
} else if (a === "status") {
datalist = "datalist1";
} else if (a === "btr") {
datalist = "datalist2";
} else if (a === "type") {
datalist = "datalist3";
}
const inp = document.getElementById('option');
inp.value="";
inp.setAttribute("list", datalist)
}
<form class="form-inline" method="post" action="search-sample.php">
<div class="col-md-5" align="center">
<label class="search">SEARCH BY-</label>
<select type="text" name="SEARCH" id="search" class="form-control" onchange="random()">
<option value="SELECT TYPE">SELECT TYPE</option>
<option value="sampleid">SAMPLE-ID</option>
<option value="facility">FACILITY</option>
<option value="user">USER NAME</option>
<option value="affiliation">AFFILIATION</option>
<option value="status">STATUS</option>
<option value="btr">BTR</option>
<option value="type">SAMPLE TYPE</option>
<option value="date">DATE</option>
</select>
</div>
<div class="col-md-5" align="center">
<label class="search">OPTION</label>
<input type="text" class="form-control" id="option" name="facility" list="" />
</div>
<datalist id="datalist1">
<option value="A"> </option>
<option value="B"> </option>
<option value="C"> </option>
<option value="D"> </option>
</datalist>
<datalist id="datalist2">
<option value="AA"> </option>
<option value="BB"> </option>
<option value="CC"> </option>
<option value="DD"> </option>
</datalist>
<datalist id="datalist3">
<option value="AAA"> </option>
<option value="BBB"> </option>
<option value="CCC"> </option>
<option value="DDD"> </option>
</datalist>
</form>
I think what you're trying to do is assign a datalist to the "option" input based on the selected value in the select element, something like the following cut–down version of the OP:
// Select is a reference to the select element and
// is passed from the listener
function random(select) {
// Map select value to id of list to display
let map = {'sampleid': 'datalist1',
'facility': 'datalist2',
'user': 'datalist3'
};
// Get the option input
let option = document.getElementById('option');
// Clear the value
option.value = '';
// Assign the appropriate list
option.setAttribute('list', map[select.value]);
}
<form>
<label>SEARCH BY-</label>
<select name="SEARCH" id="search" onchange="random(this)">
<option value="SELECT TYPE">SELECT TYPE</option>
<option value="sampleid">SAMPLE-ID</option>
<option value="facility">FACILITY</option>
<option value="user">USER</option>
</select>
<!-- opton input to display options -->
<input list="" id="option" name="option">
<!-- datalists of options -->
<datalist id="datalist1">
<option value="datalist1 A">
<option value="datalist1 B">
<option value="datalist1 C">
</datalist>
<datalist id="datalist2">
<option value="datalist2 AA">
<option value="datalist2 BB">
<option value="datalist2 CC">
</datalist>
<datalist id="datalist3">
<option value="datalist3 AAA">
<option value="datalist3 BBB">
<option value="datalist3 CCC">
</datalist>
</form>
You should probably also disable the input if the selected value is the first one (i.e. select.selectedIndex = 0).
Use value instead of innerHTML.
document.getElementById('option').value= datalist;
I'm trying to create a form with several select and the user should rank these selects from 1-8. However, I'm having some trouble hiding/removing/disabling the select option.
Here's my form
this is just the first four of the 8 selects to be ranked
<label>Spirituality</label>\
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>School</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Family</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Friends</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
This is what I got so far for my script
$(document).ready(function () {
$("#ranks1").click(function () {
$('#ranks1 option').prop('disabled', true);
});
});
And I did this for the CSS. For the disabled option
select option[disabled] {
display: none !important;
}
More background on what the form looks like.
I think you are wanting the change event, not the click event.
Please consider the following example which disables the selected option on change.
HTML:
<select id="selectlist">
<option value="0">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Javascript:
$('#selectlist').on('change', function() {
var selectedVal = $(this).find(":selected").val();
if (selectedVal != 0) {
// disable selected value
var selectedOption = $(this).find('option[value=' + selectedVal + ']');
selectedOption.attr('disabled', 'disabled');
}
});
JSFiddle: https://jsfiddle.net/tp9urjkb/
In my html form i have 9 drop down values which if user action is Edit then it will fetch the values from database and return in the jsonencode format.as below,
JSON DATA
[{"ed_gender":"Male","ed_blood_group":"A-","ed_marital_status":"Single","ed_branch_id":"11","ed_desig_id":"1","ed_job_type":"Permanent","ed_pay_mode":"Cheque"}]
HTML
<select name="ed_gender" class="form-control">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select name="ed_marital_status" class="form-control">
<option value="">Select</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
</select>
I tried few lines of code using php its actually works but i am trying using javascript.
PHP
<select name="ed_marital_status" class="form-control">
<option value="">Select</option>
<option <?php if($ed_marital_status=="Single") echo 'selected="selected"'; ?> value="Single">Single</option>
<option <?php if($ed_marital_status=="Married") echo 'selected="selected"'; ?> value="Married">Married</option>
</select>
So here Behave i have to extract the json values and make dropdown values has "Selected" on page loads.
EDITED :
JSON DATA
[{"ed_branch_id":"11","ed_desig_id":"1"}]
HTML
<select name="ed_job_location" class="form-control">
<option value="">Select</option>
<?php
foreach($get_branches as $branches){
$branches_id = $branches->b_id;
$branches_name = $branches->b_name;
$branches_code = $branches->b_code;
echo "<option value='$branches_id||$branches_name||$branches_code'>$branches_name</option>";
}?>
</select>
<select name="ed_desig_id" class="form-control">
<option value="">Select</option>
<?php
foreach($get_designation as $designations){
$designations_id = $designations->d_id;
$designations_name = $designations->d_designation;
$designations_code = $designations->d_code;
echo "<option value='$designations_id||$designations_code'>$designations_name</option>";
}?>
</select>
Here from above json, i am getting only branch id and desig id, But here i have value with || symbol in the select option, so i need to find particular id and show it in the drop down.
Iterate through the array of json objects and fill each element value by selecting it through its name:
var json = [{"ed_gender":"Male","ed_blood_group":"A-","ed_marital_status":"Single","ed_branch_id":"11","ed_desig_id":"1","ed_job_type":"Permanent","ed_pay_mode":"Cheque"}];
$(document).ready(function(){
$.each(json[0], function(index, element) {
$("[name="+index + "]").val(element);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ed_gender" class="form-control">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select name="ed_marital_status" class="form-control">
<option value="">Select</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
</select>
EDIT:
You can explicitly set the values to cover the special case of branch values concatenation with || outside the loop, as long as the values are within the json data returned :
$(document).ready(function(){
$("[name=ed_job_location]").val(json[0].branches_id + "||" + json[0].branches_name + "||" + json[0].branches_code);
});
So, I have a 2 select tags and during the
onChange event of the second select tag; I want to pass the values of the 2 select tags
<td>District:
<div>
<select name="district" id="district" onchange="getZone(this.value)">
<option value="ALL">ALL</option>
<?php
include_once 'newcompute.php';
$computation = new newcompute();
echo $computation->getDistrict();
?>
</select>
</div>
</td>
<td>Barangay:
<div id="barangay" name="barangay">
<select onchange="loadReport(barangay.value,district.value)">
<option>Select a Barangay</option>
<option value="ALL">ALL</option>
</select>
</div>
</td>
</tr>
So, I tried doing the onchange="loadReport(barangay.value,district.value)" but I only get
a UNDEFINED value for district.value
How do I get loadReport to pass the current selected value of select tag district?
You can retrieve the other tag in the function itself. No need to pass it from here.
function loadReport(barangayValue)
{
var district = document.getElementById('district');
var districtValue = district.value;
//Your stuff
}
Try this way
<select onchange="loadReport(this.value,document.getElementById('district').value)">
<option>Select a Barangay</option>
<option value="ALL">ALL</option>
</select>