Changing property of input field using java script

Changing property of input field using java script - javascript

function random() {
document.querySelector('[name="stationerytype[]"]').value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
}
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("keyup", function() {
calculatingMinimunQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0, step1 = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// getting the quantity input field
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
}
<div class="col-sm-6">
<label for="purpose">Purpose</label>
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
<option ></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
</div>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off" required>
<datalist id="datalist1" >
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
<option value="PENCIL">PENCIL</option>
</datalist>
<datalist id="datalist2" >
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
</datalist>
</td>
<td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
I have a form that has two fields stationerytype and stationeryrqstqty.The stationeryrqstqtyfield of the form accepts the number. The minimum number which can be entered in this field(QTY) depends upon the value of the stationerytype field i.e. If the stationerytype field value is 'pencil' then the minimum value property of the stationeryrqstqty field should be 5 and if it is 'notepad' then the minimum property of the stationeryrqstqty field should be 10. I am doing it by the given code but it's not working.it gives always 1,2,3.......
<td><input type="text" name="slno" value= "<?php echo $i; ?>" class="form-control " readonly ></td>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off" required>
<datalist id="datalist1" >
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
<option value="PENCIL">PENCIL</option>
</datalist>
<datalist id="datalist2" >
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
</datalist>
</td>
<td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
<script>
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("keyup", function() {
calculatingMinimunQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0, step1 = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// getting the quantity input field
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
}
</script>

I wont get in to details, of your workaround or anything, just hints on how to set min, max on an input,
using vanilla js, you can do this:
document.querySelector("input[name='stationeryqtyrqst[]']").setAttribute("min",10)
change the selector to whatever you want to, and update it accordingly,
this should work for input type=number, for inputs of other types, you should implement some value check on input/keydown/keyup event.
you can set max the same way.

The below lines are setting the attributes to the datalist tag and not the input tag.
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
I changed it to select the correct tag and set default value as minimum:
let quantity_field = document.getElementById("stationeryqtyrqst");
if(quantity_field){
quantity_field.setAttribute("min", minimum);
quantity_field.setAttribute("step", step1);
quantity_field.value = minimum;
}
Attaching snippet for reference:
function random() {
document.querySelector('[name="stationerytype[]"]').value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
}
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("keyup", function() {
calculatingMinimunQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0, step1 = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// updated the below code to get the correct field and set default values.
let quantity_field = document.getElementById("stationeryqtyrqst");
if(quantity_field){
quantity_field.setAttribute("min", minimum);
quantity_field.setAttribute("step", step1);
quantity_field.value = minimum;
}
}
<div class="col-sm-6">
<label for="purpose">Purpose</label>
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
<option ></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
</div>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off" required>
<datalist id="datalist1" >
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
<option value="PENCIL">PENCIL</option>
</datalist>
<datalist id="datalist2" >
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
</datalist>
</td>
<td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>

Related

Open Another Input Text when the user selects an option

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

Calculate between two value of selected dropdown?

How to calculate value from two selected drop down and show up in text box?
And also i would like to calculate auto not buy click on button..
Html code
Insurance :
<select class="form-control" name="insurance" onchange="calcVals()" id="insurance">
<option disabled="" selected="" ></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
Manpower:
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
Textbox :
<input name="totalAmount" id="totalAmount" type="text" readonly>
javascript:
function calcVals() {
var e = document.getElementById("manpower");
var selFrst = e.options[e.selectedIndex].text;
var f = document.getElementById("insurance");
var selScnd = f.options[f.selectedIndex].text;
var totalCal = selFrst + selScnd;
document.getElementById("totalAmount").value = totalCal;
}

Firstly, add id="insurance" to the insurance select
Secondly, you want the value, if you want to add the values
function calcVals() {
var e = document.getElementById("manpower");
var f = document.getElementById("insurance");
var selFrst = e.options[e.selectedIndex].value;
var selScnd = f.options[f.selectedIndex].value;
var totalCal = +selFrst + +selScnd;
document.getElementById("totalAmount").value = totalCal;
}
<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
Manpower:
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
Textbox :
<input name="totalAmount" id="totalAmount" type="text" readonly>

Try with below you are missing somethings and we have to use parseInt to convert string to integer.
function calcVals() {
var e = document.getElementById("manpower");
var selFrst = e.options[e.selectedIndex].value;
var f = document.getElementById("insurance");
var selScnd = f.options[f.selectedIndex].value;
var totalCal = parseInt(selFrst) + parseInt(selScnd);
document.getElementById("totalAmount").value = totalCal;
}
<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">
<option disabled="" selected="" ></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
<input name="totalAmount" id="totalAmount" type="text" readonly>

there are no selecter of id "insurance" so you have to use "getElementsByName" instead of getElementsById.
please try this code:
<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
Manpower:
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
Textbox :
<input name="totalAmount" id="totalAmount" type="text" readonly>
<script>
function calcVals() {
var e = document.getElementById("manpower");
var selFrst = e[0].value;
var f = document.getElementsByName("insurance");
var selScnd = f[0].value;
var totalCal = parseInt(selFrst) + parseInt(selScnd);
document.getElementById("totalAmount").value = totalCal;
}
</script>

how to use a javascript variable inside html tag

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;

Update multiple input values on option change

I want to change multiple input values every time the <option> changes, but the if statement only evaluates the first condition and changes the values to '200' and '300'; it doesn't evaluate the other conditions, so it won't change the values when other options are selected. How can I fix this in jQuery?
$(function() {
$('input, #city').change(function(){
if ($('#a-city').attr('id') == 'a-city') {
$('#price1').val('200');
$('#price2').val('300');
} else if ($('#b-city').attr('id') == 'b-city') {
$('#price1').val('400');
$('#price2').val('500');
} else {
$('#price1').val('600');
$('#price2').val('700');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
<option>Select a city</option>
<option id="a-city">Citya</option>
<option id="b-city">Cityb</option>
<option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>

$("input, #city").change(function() {
const id = $(this).children(":selected").attr("id");
let priceOne, priceTwo;
switch (id) {
case "a-city": {
priceOne = 200;
priceTwo = 300;
break;
}
case "b-city": {
priceOne = 400;
priceTwo = 500;
break;
}
case "c-city": {
priceOne = 600;
priceTwo = 700;
break;
}
default: {
priceOne = 0;
priceTwo = 0;
}
}
$("#price1").val(priceOne);
$("#price2").val(priceTwo);
});

I am assuming you mean:
<select id="city">
<option>Select a city</option>
<option value="a-city">Citya</option>
<option value="b-city">Cityb</option>
<option value="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>
$(function() {
$('#city').on('change', function(){
if ($(this).val('id') == 'a-city') {
$('#price1').val('200');
$('#price2').val('300');
} else if ($(this).val('id') == 'b-city') {
$('#price1').val('400');
$('#price2').val('500');
} else {
$('#price1').val('600');
$('#price2').val('700');
}
})
});
If the city changes then the price changes, you won't need to pass in the input tag since then are not watching for the change event and you have them tagged as readonly.

Here is one way to do it.
$(function() {
$('input, #city').change(function() {
var selectedId = $(this).children(":selected").attr('id'),
$price1 = $('#price1'),
$price2 = $('#price2');
switch (selectedId) {
case 'a-city':
$price1.val('200');
$price2.val('300');
break;
case 'b-city':
$price1.val('400');
$price2.val('500');
break;
default:
$price1.val('600');
$price2.val('700');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
<option>Select a city</option>
<option id="a-city">Citya</option>
<option id="b-city">Cityb</option>
<option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>

The condition you're checking,
$('#a-city').attr('id') == 'a-city'
asks whether #a-city's ID is, in fact, a-city. This will always be true, and none of the other branches will ever run. To get the ID of the selected <option>, use
$('#city :selected').attr('id')
You can implement this without any conditionals at all:
$(function () {
const cities = {
'a-city': {
'#price1': 200,
'#price2': 300
},
'b-city': {
'#price1': 400,
'#price2': 500
},
'c-city': {
'#price1': 600,
'#price2': 700
}
};
$('#city').change(function () {
const selectedCityID = $('#city :selected').attr('id');
const city = cities[selectedCityID];
for (let priceID in city) {
$(priceID).val(city[priceID]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city">
<option disabled selected>Select a city</option>
<option id="a-city">Citya</option>
<option id="b-city">Cityb</option>
<option id="c-city">Cityc</option>
</select>
<input type="text" id="price1" value="50" readonly>
<input type="text" id="price2" value="100" readonly>
Instead of the city ID being an if condition or switch case, here it's the key to an object containing that city's prices. We then iterate over that object and set both prices.
Also, only #city needs to be monitored for changes, and since "Select a city" isn't actually a city, I made it disabled.

Change option values as per the input value

I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help

I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});

Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});

Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>

Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())

Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/

And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>

Develop Reference

JavaScript is the programming language of the Web.

Changing property of input field using java script - javascript

Related

Open Another Input Text when the user selects an option

Calculate between two value of selected dropdown?

how to use a javascript variable inside html tag

Update multiple input values on option change

Change option values as per the input value

Categories

Resources