I'm using JS to dynamically populate a select list from the option of another select list. The population is working correctly, however once the second option is picked I want the user to be navigated to the girl URL. What am I missing?
< script type = "text/javascript" >
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "Chevy") {
var optionArray = ["|", "http://www.example.com|Camaro", "http://www.example.com|Corvette", "impala|Impala"];
} else if (s1.value == "Dodge") {
var optionArray = ["|", "http://www.example.com|Avenger", "http://www.example.com|Challenger", "http://www.example.com|Charger"];
} else if (s1.value == "Ford") {
var optionArray = ["|", "http://www.example.com|Mustang", "http://www.example.com|Shelby"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
< /script>
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<select id="slct2" name="slct2" onchange="form.submit()"></select>
Assuming your form looks like this:
<form name='form' id='exampleForm' action='whatever'>...</form>
your onchange event should look like this:
onchange="document.form.submit()"
or
onchange="document.getElementById('exampleForm').submit()"
Alternatively, you don't even need a form. You could do:
onchange="window.location.href='my.url'"
...or put it in a function:
onchange="foo()"
...
function foo() {
var s2 = document.getElementById('slct2');
window.location.href = "my.url?model=" + s2.options[s2.selectedIndex].value;
}
Related
I'm trying to insert two dropdown boxes in my website where the selected option in the first dropdown influences the options in the second dropdown box. I can't understand why it won't work as when I click 'Car' in option 1 it has no effect on the options in the second dropdown box rather than fetching the relevant data.
< script type = "text/javascript" >
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = " ";
if (s1.value = "Car") {
var optionArray = ["|", "honda|Honda", "bmw|Bmw", "fiat|Fiat"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
S2.options.add(newOption);
}
} <
/script>
<form action="https://www.carlink.co.uk/products.php">
<select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
<option disabled selected="Vehicle Type">Vehicle Type</option>
<option value="Car">Car</option>
<option value="Van">Shotgun</option>
<option value="Bike">Air rifle</option>
<option value="Train">Air pistol</option>
</select>
<select name="slct 2" id="slct 2">
<option disabled selected="make">Make</option>
</select>
I tested your code in JS Fiddle and the console logs an error:
Uncaught ReferenceError: S2 is not defined
Your S2.options... should be s2.options...
Easy fix!
Try this. You had a couple of errors in your code. You should also try using a 3d array instead of spliting by | later on.
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
if (s1.value == "Car") {
var optionArray = [["", ""], ["honda", "Honda"], ["bmw","Bmw"], ["fiat", "Fiat"]];
}
s2.innerHTML = "";
for (let option in optionArray) {
var newOption = document.createElement("option");
newOption.value = optionArray[option][0];
newOption.innerHTML = optionArray[option][1];
s2.options.add(newOption);
}
}
<form action="https://www.carlink.co.uk/products.php">
<select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
<option disabled selected="Vehicle Type">Vehicle Type</option>
<option value="Car">Car</option>
<option value="Van">Shotgun</option>
<option value="Bike">Air rifle</option>
<option value="Train">Air pistol</option>
</select>
<select name="slct 2" id="slct 2">
<option disabled selected="make">Make</option>
</select>
</form>
There's 2 main issues with your code
Instead of using lower case s2 you are accessing S2.options
You are using s1.value = "Car" which is simply invalid, it does not compare s1.value with "Car" you should be using the == or === operator(s)
Here is a working version
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = " ";
if (s1.value == "Car") { // You were using = instead of ==
var optionArray = ["|", "honda|Honda", "bmw|Bmw", "fiat|Fiat"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption); // Here you are using S2
}
}
<form action="https://www.carlink.co.uk/products.php">
<select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
<option disabled selected="Vehicle Type">Vehicle Type</option>
<option value="Car">Car</option>
<option value="Van">Shotgun</option>
<option value="Bike">Air rifle</option>
<option value="Train">Air pistol</option>
</select>
<select name="slct 2" id="slct 2">
<option disabled selected="make">Make</option>
</select>
This question already has answers here:
Why JS function name conflicts with element ID?
(3 answers)
Closed 2 years ago.
its working fine until i put the tag on select category can someone help me a bit , after i put the tag its just not working..
function category(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "letters") {
var optionArray = ["a|a", "b|b"];
} else if (s1.value == "numbers") {
var optionArray = ["1|1", "2|2"];
} else if (s1.value == "soon") {
var optionArray = ["|", "|", "|"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
<form>
<select id="category" onchange="category('category','subcategory')">
<option value=""></option>
<option value="letters">Letters</option>
<option value="numbers">Numbers</option>
</select>
<br>
<select id="subcategory"> </select>
<br>
</form>
To be compatible with older browsers, whenever you give an ID to some HTML element it's registered in a global scope under window so your category doesn't refer to the function but to the select element. Just name the function differently
I have three parameters namely model, destination and criteria. Whenever the user chooses a model from the dropdown list, where the destination and criteria is dependent, dynamic checkboxes for the destination is shown. And when a user tick a destination, its specific criteria will show. This is a follow up question: How to display multiple list of checkboxes dynamically on dropdown list
<script type="text/javascript">
function populate(model, destination) {
var mod = document.getElementById(model);
var des = document.getElementById(destination);
des.innerHTML = "";
if (mod.value == "model-a") {
var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
} else if (mod.value == "model-b") {
var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"];
} else if (mod.value == "model-c") {
var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"];
}
for (var option in optionArray) {
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
des.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
des.appendChild(label);
des.appendChild(document.createElement("br"));
}
}
}
</script>
<!DOCTYPE html>
<html>
<body>
SELECT MODEL:
<select id="model" name="model" onchange="populate(this.id, 'destination')">
<option value=""></option>
<option value="model-a">MODEL-A</option>
<option value="model-b">MODEL-B</option>
<option value="model-c">MODEL-C</option>
</select>
<hr />
SELECT DESTINATION:
<div id="destination"></div>
<hr />
</body>
</html>
Can you help me with adding such events. Iam new and still learning javascript.
you can use below code to attach event to the dynamically created element
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
checkbox.id = "desCheckBox";
des.appendChild(checkbox);
//eventname is name of the event
// here id is "desCheckBox"
document.addEventListener('eventname', function (e) {
if (e.target && e.target.id == 'id') {
// do something
}
});
You may try my solution:
<!DOCTYPE html>
<html>
<head>
<script>
function populate(model, destination) {
var mod = document.getElementById(model);
var des = document.getElementById(destination);
des.innerHTML = "";
if (mod.value == "model-a") {
var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
} else if (mod.value == "model-b") {
var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"];
} else if (mod.value == "model-c") {
var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"];
}
for (var option in optionArray) {
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
//I added the below statement
checkbox.onclick=updateCriteria;
//I added the above statment
des.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
des.appendChild(label);
des.appendChild(document.createElement("br"));
}
}
}
function updateCriteria()
{
switch(this.value)
{
case "Model-A.1":alert(this.value+" is a dog.");
break;
case "Model-A.2":alert(this.value+" is a cat.");
break;
}
this.checked=false;
}
</script>
</head>
<body>
SELECT MODEL:
<select id="model" name="model" onchange="populate(this.id, 'destination');">
<option value=""></option>
<option value="model-a">MODEL-A</option>
<option value="model-b">MODEL-B</option>
<option value="model-c">MODEL-C</option>
</select>
<hr />
SELECT DESTINATION:
<div id="destination"></div>
<hr />
</body>
</html>
You could assign a class className to the checkbox you're creating and write an event applying to that class name. checkbox.className = "class_Name"
You can write this code at the level of your populate method.
$(".class_Name").unbind();
$(".class_Name").on("change", function () {
//this will give you access to the checkbox item being changed
});
I am trying to create the select application using Javascipt only. I got to know about this code on internet and it uses the split method to return value and .innerHTML. Now say if I do not want to use the split method and just return with .innerHTML into html element with no value, how to do that using for loop as used in this code ?
<!DOCTYPE html>
<html>
<head>
<title>Select Options</title>
</head>
<body>
<h2>Choose your car</h2>
<hr>
Choose Car Make:
<select id="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Hyundai">Hyundai</option>
<option value="Honda">Honda</option>
<option value="Maruti">Maruti</option>
</select>
<hr>
Choose Car Model
<select id="slct2" ></select>
</body>
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Hyundai") {
var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"]
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement('option');
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
</html>
You have to be aware, that using for... in loop over an array, won't return you the elements actually, but their indexes. I would suggest you to use simple for loop instead.
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var optionArray = ["i10", "i20", "Verna"];
for (var i = 0; i < optionArray.length; i++) {
var newOption = document.createElement('option');
newOption.value = optionArray[i];
newOption.innerHTML = optionArray[i];
s2.appendChild(newOption);
}
}
<h2>Choose your car</h2>
<hr> Choose Car Make:
<select id="slct1" onchange="populate('slct1','slct2')">
<option value=""></option>
<option value="Hyundai">Hyundai</option>
<option value="Honda">Honda</option>
<option value="Maruti">Maruti</option>
</select>
<hr> Choose Car Model
<select id="slct2"></select>
Removing or simply commenting (may be you would require it in future) few lines should do what you want:
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Hyundai") {
var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"]
}
for(var option in optionArray){
var pair = optionArray[option]; //.split("|");
var newOption = document.createElement('option');
newOption.value = pair; //[0];
newOption.innerHTML = pair; //[1];
s2.options.add(newOption);
}
}
</script>
With above code, you are no using .split() and just assigning the whole object to the new element.
Left value to "" to keep it empty.
for(var option in optionArray){
var text = optionArray[option];
var newOption = document.createElement('option');
newOption.value = "";
newOption.innerHTML = text;
s2.options.add(newOption, null);
}
Here is a gender dropdown menu which determines the uniform cost.
<p>Gender:
<select required name="gender" onchange="calc(this.id, 'uniform')" id="gender">
<option value="0" >Select...</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select> <p>
Cost of uniform drop down menu
<p>Cost of Uniform:
<select required name="uniform" id="uniform">
</select><p>
Here is my javascript code for the dependable Gender and uniform
<script>
function calc(u1,u2){
var u1 = document.getElementById(u1);
var u2 = document.getElementById(u2);
u2.innerHTML = "";
if (u1.value == "male"){
var optionArray = ["|","24300|N24,300"];
}
else if (u1.value == "female"){
var optionArray = ["|","26400|N26,400"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
u2.options.add(newOption);
}
}
</script>
Class (Year) drop down menu.
<p>Class:
<select required name="childClass" onchange="childClass(this.id, 'schoolFees')" id="childClass">
<option value="0" >Select...</option>
<option value="prenursery">Pre Nursery</option>
<option value="nursery">Nursery</option>
<option value="reception">Reception</option>
<option value="year1">Year One</option>
<option value="year2">Year Two</option>
<option value="year3">Year Three</option>
<option value="year4">Year Four</option>
<option value="year5">Year Five</option>
<option value="year6">Year Six</option>
</select>
<p>
School fees dropdown menu which depends on students class selected
<p>School Fees:
<select required name="schoolFees" id="schoolFees">
</select>
Javascript for the class and school fees dependable dropdown. I am sure there is a shorther method but this still works.
<script>
function childClass(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "prenursery"){
var optionArray = ["|","145000|N145,000"];
}
else if (s1.value == "nursery"){
var optionArray = ["|","145000|N145,000"];
}
else if (s1.value == "reception"){
var optionArray = ["|","147000|N147,000"];
}
else if (s1.value == "year1"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year2"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year3"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year4"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year5"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year6"){
var optionArray = ["|","149000|N149,000"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
How can I make the class(year) and gender dropdown determine the value in uniform dropdown. For example. If I select female and year 4 I should get a different value in dropdown.
check this https://jsfiddle.net/egq427g0/3/
I've modified the childClass to act accordingly the selection of Gender and Class
At the end of childClass calling calc function to reset uniform if 0 is selected in Class