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
});
Related
I have a page with a dropdown list which has two dependents (dep1, dep2). However, I managed to create dynamic checkboxes but with only one dependent showing (dep1)
source is: How to create list of checkboxes dynamically with javascript.
I don't know javascript to well and I have tried using multiple conditions in a for loop and if conditons.
How can I display dep1 and dep2 at the same time based on the selected data from the dropdown? Please help!
javascript:
<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-A1", "Model-A2", "Model-A3"];
} else if (mod.value == "Model-B") {
var optionArray = ["Model-B1", "Model-B2", "Model-B3"];
}
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>
Model:
<select id="model" name="model" onchange="populate(this.id, 'destination')">
<option value="select">--Select Model--</option>
<option value="model-A">Model-A</option>
<option value="model-B">Model-B</option>
</select>
<hr />
Destination:
<div id="destination"></div>
<hr />
Criteria:
<div id="criteria"></div>
<hr />
</body>
</html>
I have slightly modified your code. Hope you are expecting this.
var mappingData = {
"model-A": {
"destination": ["Destination A1", "Destination A2", "Destination A3"],
"criteria": ["Criteria A1", "Criteria A2", "Criteria A3"]
},
"model-B": {
"destination": ["Destination B1", "Destination B2", "Destination B3"],
"criteria": ["Criteria B1", "Criteria B2", "Criteria B3"]
}
};
function populate(model, destination) {
var mod = document.getElementById('model');
var des = document.getElementById('destination');
var criteria = document.getElementById('criteria');
des.innerHTML = "";
criteria.innerHTML = "";
mappingData[mod.value].destination.forEach(function(item) {
createCheckBox(item, des)
});
mappingData[mod.value].criteria.forEach(function(item) {
createCheckBox(item, criteria)
});
}
function createCheckBox(value, parent) {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = value;
checkbox.value = value;
var label = document.createElement('label')
label.htmlFor = value;
label.appendChild(document.createTextNode(value));
parent.appendChild(checkbox)
parent.appendChild(label)
parent.appendChild(document.createElement("br"))
}
<!DOCTYPE html>
<html>
<body>
Model:
<select id="model" name="model" onchange="populate(this.id, 'destination')">
<option value="select">--Select Model--</option>
<option value="model-A">Model-A</option>
<option value="model-B">Model-B</option>
</select>
<hr /> Destination:
<div id="destination"></div>
<hr /> Criteria:
<div id="criteria"></div>
<hr />
</body>
</html>
I am creating a select option for Birthdate which includes Month and Date for testing purposes for now. Everything works fine but the problem is when i select January for instance then it will give days upto 31 but if i 31 remains selected and when i select Febraury it adds previous array with new array i.e. January's 31 days + Febraury 28 days. Please help me how do I clear previous array first then add new one.
Here's The Javascript:
function change(){
var s1 = document.getElementById('select1');
var s2 = document.getElementById('select2');
var i;
var optionIndex = [];
if(s1.value === 'January'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 31; i = i + 1){
optionIndex.push(i);
}
}else if(s1.value === 'February'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 28; i = i + 1){
optionIndex.push(i);
}
}
var option;
for(option in optionIndex){
if(optionIndex.hasOwnProperty(option)){
var pair = optionIndex[option];
var createOption = document.createElement('option');
createOption.innerHTML = pair;
s2.appendChild(createOption);
}
}
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Selector</title>
</head>
<body>
<select id = "select1" name = "select1" onchange="change()">
<option>Select Year...</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select id = "select2" name = "select2" style = "display:none;">
</select>
</body>
</html>
I tried array.pop(), array.splice() but still doesn't work! Please help me!
your issue in not with array - it is good - the problem is that you don't clear s2 when you trigger change. Try
function change(){
var s1 = document.getElementById('select1');
var s2 = document.getElementById('select2');
var i;
var optionIndex = [];
if(s1.value === 'January'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 31; i = i + 1){
optionIndex.push(i);
}
}else if(s1.value === 'February'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 28; i = i + 1){
optionIndex.push(i);
}
}
s2.innerHTML = ""; // You need this
var option;
for(option in optionIndex){
if(optionIndex.hasOwnProperty(option)){
var pair = optionIndex[option];
var createOption = document.createElement('option');
createOption.innerHTML = pair;
s2.appendChild(createOption);
}
}
}
<select id = "select1" name = "select1" onchange="change()">
<option>Select Year...</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select id = "select2" name = "select2" style = "display:none;">
</select>
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;
}