I have a form where when I select the select option in the input (jurusan) it is also filled in based on the value. Here I want to change the value of the value obtained by selecting the option, how do I do it?
Suppose I select select A will appear 1
So how do you change the number 1 to another value? suppose I want to turn it into a car.
<html>
<head>
<meta charset="utf-8">
<title>Latihan Ajax</title>
</head>
<body>
<h2>Latihan Ajax 1</h2>
<select id="nama" name="fakultas" onchange="fakultas()">
<option value="0">-Pilih-</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input type="text" name="jurusan" id="jurusan">
<script type="text/javascript">
function fakultas(){
var data = document.getElementById("nama").value;
document.getElementById("jurusan").value = data;
}
</script>
</body>
</html>
Essentially, you are already setting the value in your function and as another commenter pointed out you can change that value to anything you wish. In the snippit below, I use an array to show you how you can use the options value => a number, which could represent an index for the array, to get the value of the array.
const camaros = ['Choose', 'Camaro RS', 'Camaro SS', 'Camaro SS 1LE', 'Camaro ZL1']
function fakultas() {
var data = document.getElementById("nama").value;
document.getElementById("jurusan").value = camaros[data];
}
<html>
<head>
<meta charset="utf-8">
<title>Latihan Ajax</title>
</head>
<body>
<h2>Latihan Ajax 1</h2>
<select id="nama" name="fakultas" onchange="fakultas()">
<option value="0">-Pilih-</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input type="text" name="jurusan" id="jurusan">
</body>
</html>
You could also use an array of objects that use words as keys to retrieve a value with that key and then set the inputs value.
const obj = [{
car: 'Devel Sixteen',
boat: 'Westinghouse J34',
plane: 'X-15',
spaceship: 'Millennium Falcon'
}]
function fakultas() {
var data = document.getElementById("nama").value;
document.getElementById("jurusan").value = obj[0][data];
}
<html>
<head>
<meta charset="utf-8">
<title>Latihan Ajax</title>
</head>
<body>
<h2>Latihan Ajax 1</h2>
<select id="nama" name="fakultas" onchange="fakultas()">
<option value="">-Pilih-</option>
<option value="car">A</option>
<option value="boat">B</option>
<option value="plane">C</option>
<option value="spaceship">D</option>
</select>
<input type="text" name="jurusan" id="jurusan">
</body>
</html>
Related
I am trying to get user input data in index.html. Then once user clicks on next, it should show the input data in the getapart.html page(second page). I am trying to use session storage for same. There are no errors, but it doesn't show the value. Not sure what I am doing wrong.
HTML
<html>
<head>
<script src = "showdata.js">
</script>
</head>
<body>
<fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
<form action="getapart.html">
<legend>Check for your part!</legend><br>
<label>Year:<br />
<select id="Year" onchange="show_yeardata()">
<option> - Select Year - </option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</select>
<br>
<label>Make:<br />
<select id="Make" onchange= show_makedata()">
<option> - Select Make - </option>
<option value="Chevrolet">Chevrolet</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
<option value="Toyota">Toyota</option>
</select>
<br>
<br><br>
<input type="text" id="showyear"><br>
<input type="text" id="showmake"> <br>
<input type="Submit"; value="Next" />
</form>
</fieldset>
</body>
</html>
getapart.html (second page to retrieve the user input and display the data)
<html>
<head>
<script src = "showdata.js">
</script>
</head>
<body>
Home
<br><br><br>
<div onload= "show_yeardata()" >
Year: <span id="ss_showyear"> </span><br>
Make: <span id="ss_showmake"> </span><br>
</div>
</body>
</html>
JS script (showdata.js)
function show_yeardata()
{
var year = document.getElementById("Year");
var year1 = year.options[year.selectedIndex].text;
document.getElementById("showyear").value=year1;
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
}
function show_makedata()
{
var make = document.getElementById("Make");
var make1 = make.options[make.selectedIndex].text;
document.getElementById("showmake").value=make1;
sessionStorage.setItem("key_showmake",make1);
document.getElementById("ss_showmake").innerHTML = sessionStorage.getItem("key_showmake");
}
Looks like you are using same function for setting and getting the data. This increases complexity in many cases and brokes the system in your case.
Edit: Placement of the onload event is also invalid. You should put that to the body tag. See: How to add onload event to a div element
In the first page you successfully get data from selection and set to the session storage. However, when you trigger the same function again in the second page, year1 becomes undefined since there is no element with id "Year".
Then with these line you first put undefined to session storage then get it back immediately.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
Solution is simple. You split setter and getter functions like this.
function set_year_data() {
var year = document.getElementById("Year");
var year1 = year.options[year.selectedIndex].text;
document.getElementById("showyear").value=year1;
sessionStorage.setItem("key_showyear",year1);
}
function get_year_data() {
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
}
And in the first html:
...
<select id="Year" onchange="set_year_data()">
...
And in the secondhtml:
...
<body onload="get_year_data()" >
...
Trying to create a function using the dropdown values in html like so
<html>
<head>
<title>Taxi Fare</title>
<center><h1>Taxi Fare</h1>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
function myAddition(){
var NorthAvenue = 0;
var QuezonAvenue = 4;
var GMAKamuning = 5;
var $sum = (40) + (place2 - place1) * (14);
window.alert("The sum is: " + $sum);
}
</script>
</head>
<body class="bg-warning">
<center>
<form method="post">
<select id="place1" name="place1">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
</form>
<form method="post">
<select id="place2" name="place2">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
<button type="button" onclick="myAddition(place2,place1)">Compute Fare</button>
</body>
</html>
but it always returns "the sum is NaN" just confused as to what is wrong here
In your script function put two parameters like this function myAddition(place2,place1) and change value of select tags from text to number like this
<select id="place1" name="place1">
<option value="0">North Avenue</option>
<option value="4">Quezon Ave</option>
<option value="5">GMA Kamuning</option>
</select>
<select id="place2" name="place2">
<option value="0">North Avenue</option>
<option value="4">Quezon Ave</option>
<option value="5">GMA Kamuning</option>
</select>
<button type="button" onclick="myAddition(document.getElementById('place2').value,document.getElementById('place1').value)">Compute Fare</button>
Please try your code in this way
You were placing a html select object into a expression , what you have to do is to place the value of that html element that is select element using value property(place1.value and place2.value) and when it will be evaluated in a expression it will be acting as a string untill you evaluate it by using the eval function.Your code can be improved.Refer to other answers to improve the code , i have solved it in your way.
<html>
<head>
<title>Taxi Fare</title>
<center><h1>Taxi Fare</h1>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
function myAddition(){
var NorthAvenue = 0;
var QuezonAvenue = 4;
var GMAKamuning = 5;
var $sum = (40) + (eval(place2.value) - eval(place1.value)) * (14);
window.alert("The sum is: " + $sum);
}
</script>
</head>
<body class="bg-warning">
<center>
<form method="post">
<select id="place1" name="place1">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
</form>
<form method="post">
<select id="place2" name="place2">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
<button type="button" onclick="myAddition()">Compute Fare</button>
</body>
</html>
Selectbox used for city name in application form
<select id="city" class="custom-select form-control" name="jobman-field-7[]">
<option value="" selected></option>
<option value="Other">Other Please Specify</option>
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
</select>
Input field shows when 'OTHER' selected from a Selectbox above
<div class="form-group" id="other-city">
<label>Enter your city here</label>
<input name="other-city" value="" type="text" class="form-control">
</div>
Javascript to toggle the fields
$(document).ready(function () {
toggleFields();
$("#city").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#city").val() == 'Other') {
$("#other-city").show();
} else {
$("#other-city").hide();
}
}
Here your approach doesn't look meaningful I guess. You have options in your select box being retrieved from DB, appending user input as an option does not make your new data reflected in DB. Better try to trigger an ajax call to insert data into city column in your DB table when the form is submitted. This could be one way to solve your requirement so next time when a user visits page, the new result will be retrieved and shown in the select box again.
//I NEED SOMETHING LIKE THIS BUT OTHER and the NEW CITY get selected Can we only select one city when added?
<select multiple id="city">
<option value="PickCity"></option>
<option value="Other">Other Please Specify</option>
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
</select>
<input type="text" id="other-city">
$().ready(function() {
$('#other-city').change(function() {
var option = new Option($('#other-city').val(), "value");
$('#city option:selected').append(option);
});
});
Note: I havent added the saving to db part; Hope u can handle that;
I have focused on passing value from input box to dropdown;
Please see if this helps you
<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="city-form" onsubmit="return addCitytoDropDown()" method="POST">
<div class="form-group" id="other-city">
<label>Enter your city here</label>
<input name="other-city" type="text" class="form-control" id="inputBox">
</div>
</form>
<select id="city" class="custom-select form-control" name="jobman-field-7[]">
<option value="PickCity" selected>Pick a City</option>
<option value="Other">Other Please Specify</option>
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
</select>
<script type="text/javascript">
function addCitytoDropDown(){
var x = document.getElementById("city");
var option = document.createElement("option");
var newCity = document.getElementById("inputBox").value;
option.text = newCity;
option.selected = true;
x.add(option);
return false;
}
</script>
</body>
</html>
I am new to AJAX and PHP, and I have this code:
<head>
<script type="text/javascript">
function crimeselect(){
var select = document.getElementById("crime").value;
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
What I want is, when I choose "Crimes VS Person", the select option with an id of "CVPerson" would only be the one to appear and the select option with an id of "CVHO" would not be appeared. Same also if i choose "Crimes VS Moral and Orders".
I don't know how to do it. Any tips please.
<head>
<script type="text/javascript">
function crimeselect(){
document.getElementById(document.getElementById("crime").value).style.visibility = 'visible';
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="" style="visibility:hidden;">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="" style="visibility:hidden;">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
Is there a way I can get the length of list options in a select-dropdown HTML input tag? The list changes dynamically and I need to calculate the total number of options within the drop-down. The total options are generated dynamically, so I need a way to calculate number of option tags within an html select tag. I also need to do this in pure JS because the app I am working with will not allow me to use JQuery. (Please don't argue that with me unless there is absolutely no way to do this in pure JS.)
Needs only to be compatible with Internet Explorer.
I assume this will have to do with accessing the DOM, but I am not sure how exactly the syntax will work out.
Since you didn't specify that you could use jQuery, try this:
HTML:
<select id="test">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
JavaScript:
document.getElementById("test").options.length
example
Select the options from the select input, then count them with length
$("#input1 option").length
i did this Using JQuery
$(document).ready(function() {
$("button").click(function(){
var optionLength = $("#user option").length;
alert("length of options is : "+optionLength);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get length of list Options</title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<body>
<select id="user" multiple="" size="5" class="form-control" id="participants" name="participants" style="height: 98px !important;">
<option value="1">S RAJ</option>
<option value="2"> SHARMA</option>
<option value="3">SINGH</option>
<option value="4"> ROY</option>
<option value="5">VERMA</option>
<select>
<button type="button">Get Users</button>
</body>
</html>
Try this:
In the HTML file:
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
In the JavaScript file:
document.getElementById("mySelect").length;
<select id="lister-sort-by-options" name="sort" class="lister-sort-by">
<option value="0" selected="selected">
Movies
</option>
<option value="1">
TV Shows
</option>
<option value="2">
Morning Shows
</option>
<option value="3">
Moonlight
</option>
<option value="4">
Music
</option>
</select>