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