Develop Reference

Why does onChange only work once per value

Each time the web page is loaded the onchange method works, but it only works once per value. When summer is selected the classes are added, when i chose winter the class is added but then if i chosesummer again it will not work. Why is this?
const landingBGR = document.querySelector(".landing-wrapper");
const landingBTN = document.getElementById("l-btn");
function selectedSeason(season) {
switch(season) {
case "summer":
landingBTN.setAttribute("href","summer.html");
landingBGR.classList.add("summer-bgr");
break;
case "winter":
landingBTN.setAttribute("href","winter.html");
landingBGR.classList.add("winter-bgr");
break;
}
}
<select name="" id="landing-drop" onchange="oninput(this.value)">
<option value="">Ireland in the four Seasons</option>
<option value="summer">Summer</option>
<option value="winter">Winter</option>
</select>

try to delete the old class when you select a new option.
landingBGR.classList.remove("summer-bgr");
landingBGR.classList.remove("winter-bgr");
you will maybe need
if(landingBGR.classList.contains("classname"))

JS: Change select option value on being selected with prompt?

I've looked around and I don't see this being asked before.
I have a select box, like so:
<select onchange="change()">
<option value="" selected>Option 1</option>
<option value="30">Option 2</option>
<option value="90">Option 3</option>
</select>
I want to add another option...
<option value="custom">Option 4</option>
...that when chosen (clicked) an alert box will popup asking the user to type in a number (in the case 30 or 90 weren't viable options, as in the values of the option's) to replace the value of the option.
<script>
function change() {
if(value == "custom") {
value = prompt("Please enter a new number:", "60");
}
}
</script>
I wanted to know what the best way to do this is with plain old javascript - I'll use jQuery if I have to.
Any ideas? An example would be great as well.

Take a look at this code. I think this is what you're trying to do:
HTML
<select id="optionvals" onclick="change()">
<option value="" selected>Option 1</option>
<option value="30">Option 2</option>
<option value="90">Option 3</option>
<option value="custom">Option 4</option>
</select>
JS
function change() {
var oItem = document.getElementById('optionvals');
var value = oItem.options[oItem.selectedIndex].value;
if(value == "custom") {
alert("you've clicked b");
value = prompt("Please enter a new number:", "60");
oItem.options[oItem.selectedIndex].value = value;
console.log(oItem.options[oItem.selectedIndex].value)
}
}
What this does is prompt you on the change only if the selected value in the options is custom. Then after you choose a custom value, it will rewrite the value of that the custom option element to the value you just entered in the prompt. I logged the new value after assigning it to show you that it is working.
Here is a fiddle: https://jsfiddle.net/ng7xvy05/

Your onchange event is the appropriate way to handle this. This is mostly a matter of user interface (UX) design though. To do this in the prompt fashion you ought to use parseFloat:
change() {
var value = prompt('You\'ve chosen Other. Please enter a value', '60');
if(value) {
value = parseFloat(value);
// apply it to your model
} else {
// apply NULL to your model
}
}
From a UXD point of view I would use a typeahead input. It would autosearch known answers but also allow the user to input their own. This is not standard html so you would need to write this yourself or use jquery. But from a user interface design point of view, prompts suck.

make a select dependent with js

I would like to do a select option dependent of another select, i saw there's a way using array with fixed values, but my array is reloaded every time we add a new form field on the form. I would like something like when i select op1, then it just show op1 options on second select.
<select id="id1" name="optionshere">
<option relone="op1">opt one</option>
<option relone="op2">opt two</option>
</select>
<select id="id2" name="resulthere">
<option relone="op1">ans 1 op1</option>
<option relone="op1">ans 2 op2</option>
<option relone="op2">ans 1 op2</option>
</select>
Any idea?
thanks all

Here's a method without jQuery:
When you select an option in the first selectbox, it will hide everything that doesn't match its relone.
var id1 = document.getElementById("id1");
var id2 = document.getElementById("id2");
id1.addEventListener("change", change);
function change() {
for (var i = 0; i < id2.options.length; i++)
id2.options[i].style.display = id2.options[i].getAttribute("relone") == id1.options[id1.selectedIndex].getAttribute("relone") ? "block" : "none";
id2.value = "";
}
change();
<select id="id1" name="optionshere">
<option relone="op1">opt one</option>
<option relone="op2">opt two</option>
</select>
<select id="id2" name="resulthere">
<option relone="op1">ans 1 op1</option>
<option relone="op1">ans 2 op1</option>
<option relone="op2">ans 1 op2</option>
</select>

If Jquery is an option you may go with something like this:
<script type='text/javascript'>
$(function() {
$('#id1').change(function() {
var x = $(this).val();
$('option[relone!=x]').each(function() {
$(this).hide();
});
$('option[relone=x]').each(function() {
$(this).show();
});
});
});
</script>
Then to expand:
There really are many ways in which you can solve this predicament, depending on how variable your pool of answers is going to be.
If you're only interested in using vanilla javascript then let's start with the basics. You're going to want to look into the "onchange" event for your html, so as such:
<select onchange="myFunction()">
Coming right out of the w3schools website, on the Html onchange event attribute:
The onchange attribute fires the moment when the value of the element
is changed.
This will allow you to make a decision based on this element's value. Then inside your js may branch out from here:
You may use Ajax and pass to it that value as a get variable to obtain those options from a separate file.
You may get all options from the second div through a combination of .getElementbyId("id2") and .getElementsByTagName("option") then check for their individual "relone" attribute inside an each loop, and hide those that don't match, and show those that do.
Really, it's all up to what you want to do from there, but I personally would just go for the Jquery approach

JavaScript - dynamic link depending on multiple DropDown Selections or Checkboxes

New to Javascript. Here is the story:
I need to create a dynamic link to redirect to one of the 6 different courses, depending on the options chosen by the user. This can be done via 3 dropdown menus or via 3 sets of checkboxes:
img. 1: http://i.imgur.com/oi8WYYv.png
or
img. 2: http://i.imgur.com/tRIdxBv.png
I tried to combine codes from several examples from stackoverflow, but it's a mess... Any idea is highly appreciated.
[edit 06.04.2015]
Thanks for your suggestions, but the story is a little more complicated:
The links are fixed, i.e. they are quite complicated to write it via a "generate" function (they are something like: base_url + id_1 + base_url_2 + id_2 + base_url_3)
There are 6 different courses, each one with its own link:
a) regular user - in English b) regular user - in German c) user with access to confidential data - in English d) user with access to confidential data - in German e) user manager - in English f) user manager - in German
To select the proper course, you would need to meet criteria from more than one form. I think there should be a lot of "if" statements in place in order to select the proper course via the questions. Or the questions are not the correct ones...

This is fairly trivial; all you have to do is check the values of each select tag, and set the href of the anchor accordingly.
Here's a tiny mockup:
window.onload = function(){
var select = document.getElementById('language');
var anchor = document.getElementById('next');
select.onchange = function(){
anchor.href = select.value;
}
}
Which is your preferred language?
<select id="language">
<option value="#">--------------</option>
<option value="http://stackoverflow.com/questions/tagged/javascript">JavaScript</option>
<option value="http://stackoverflow.com/questions/tagged/python">Python</option>
<option value="http://stackoverflow.com/questions/tagged/c%2b%2b">C++</option>
</select>
<br>
<a id ="next" href="#">Next</a>
Basically, I'm listening to onchange on the select element, and can therefore update the link whenever the chosen option changes.
If you aren't using an <a> anchor tag, but something else, for the Next page button, you can always just check the values before redirecting the user:
window.onload = function(){
var select = document.getElementById('color');
var next = document.getElementById('next');
next.onclick = function(){
switch (select.value){
case '1':
window.location.href = "http://blog.xkcd.com/2010/05/03/color-survey-results/";
break;
case '2':
window.location.href = "http://www.omglasergunspewpewpew.com/";
break;
default:
break;
}
}
}
What is your least favourite colour?
<select id="color">
<option value="1">puke</option>
<option value="2">The best color in the world!</option>
</select><br>
<button id="next">Next</button>
Basically, whatever you're doing, you can just check select.value, and perform an action accordingly.

first draft, not working but that's the best I got so far:
<script type="text/javascript">
window.onload = function(){
var language = document.getElementById('lang');
var confidential = document.getElementById('conf');
var manager = document.getElementById('mgr');
var next = document.getElementById('next');
next.onclick = function(){
switch (true){
case language === "isEnglish":
window.open('link/regular_user_in_English', '_blank');
break;
case language === "isGerman":
window.open('link/regular_user_in_German', '_blank');
break;
case language === "isGerman" && confidential === "isConf":
window.open('link/conf_in_German', '_blank');
break;
default:
break;
}
}
</script>
Which language would you prefer to do the training in?
<select id="lang">
<option value="isEnglish">English</option>
<option value="isGerman">German</option>
</select><br />
Are you a confidential data handler?
<select id="conf">
<option value="notConf">No</option>
<option value="isConf">Yes</option>
</select><br />
Are you a people manager?
<select id="mgr">
<option value="notManager">No</option>
<option value="isManager">Yes</option>
</select>
<br />
<button id="next">Next</button>

Javascript multiple select boxes

I tried searching for an answer to this for a while, but to no avail.
I'm trying to do a simple online calculator (that calculates some photovoltaic panels energy), but I'm stuck in something simple (I'm new to Javascript although I worked with Flash's ActionScript 3.0 for a while).
What I need done is a html select that defines which other select group appears in the page. Something like this (obviously this doesn't work, just setting an example):
HTML
<html>
<body>
<select id="test1" onclick="checkField()">
<option>Selected A Group</option>
<option>Selected B Group</option>
</select>
<script>//insert second group here</script>
</body>
</html>
Javascript
function checkField(){
var temp = document.getElementById('test1').value;
if(temp === "Selected A Group"){
//insert code to "echo" the first optional select group
} else {
//insert code to "echo" the second optional select group
}
}
Sorry if its a bit confusing, but I cant really explain all that well.
Here is an example of what I would want, where selecting a option makes the other fields change accordingly: http://www.toshiba.eu/innovation/download_drivers_bios.jsp

you are almost there, actually javascript doesn't "echo" values directly, it does log values using console.log(your value); to a debug console, similar to AS2 trace() if my memory isn't failing.
To "output" information to the document you should have a look into document.write
When you use document.write it will directly write to the documents end.
The "correct" way would be to create a DOM element, with the elements you want inside it, and then append it to the desired element. Have a look at the comments
<!-- Be Aware to use the onchange trigger on select boxes, if you use onclick the function will run, even
if you didn't really chose any option -->
<select id="test1" onchange="checkField()">
<!-- Is good to have a first non-value option, better to trigger the onchange event, if you have
Select A Group as first option and you click on it, it didn't really "Change", you would have to
pick B Group and then A Group again to trigger the onchange event correctly. -->
<option value="">-- select an option --</option>
<!-- You can have a value attribute on the options, so it's easy to process when programming
while displaying a more detailed description to the users -->
<option value="A">Selected A Group</option>
<option value="B">Selected B Group</option>
</select>
<!-- We create an empty element where we are gonna place the new Select -->
<div id="newSelect"></div>
<!-- By Placing the Javascript on the end of <body>, we ensure that all the DOM elements loaded before running the script -->
<script>
function checkField(){
var newSelect = document.getElementById('newSelect'); //targeting container;
var temp = document.getElementById('test1').value;
//Some tasks we do always the option chose is not the first custom one, so we don't have to repeat it
//on the two If's below
if(temp !== ""){
// We remove the select if we placed one already before, so we can add the new one,
// For example if we chose B Group but changed our mind and Chose A Group later.
if(oldChild = newSelect.getElementsByTagName('select')[0]){
oldChild.remove();
}
var select = document.createElement("select");
select.setAttribute('id', 'newSelect');
}
if(temp === "A"){
//you could do JUST:
//body.innerHTML = "all the html you want in here" instead of all the code following;
//but all those code is supposed to be the "correct way" of adding elements to the HTML,
//Google a bit about that for detailed explanations
var option1 = document.createElement("option");
option1.value = 1;
option1.text = "Option 1";
var option2 = document.createElement("option");
option1.value = 2;
option2.text = "Option 2";
select.appendChild(option1);
select.appendChild(option2);
newSelect.appendChild(select);
} else {
var option1 = document.createElement("option");
option1.value = 3;
option1.text = "Option 3";
var option2 = document.createElement("option");
option1.value = 4;
option2.text = "Option 4";
select.appendChild(option1);
select.appendChild(option2);
newSelect.appendChild(select);
}
}
</script>
Of course there are ways to make this slightly shorter, using loops if your data to ouput has a pattern, but lets do it the "simple" way so you get a grasp of Javascript.
Hope all this helped you!!

Demo here:
http://jsfiddle.net/3GkrX/
Just about the same as Mevins.... changed to switch/case though
html:
<select id="test1" id="name" onchange="checkField()">
<option>----</option>
<option>Selected A Group</option>
<option>Selected B Group</option>
</select>
<div id="optional">Please select!</div>
JS:
function checkField(){
var temp = document.getElementById('test1').value;
switch(temp){
case "Selected A Group":
document.getElementById("optional").innerHTML="<select name='optionalA'><option>1</option><option>2</option></select>";
break;
case "Selected B Group":
document.getElementById("optional").innerHTML="<select name='optionalB'><option>3</option><option>4</option></select>";
break
default:
document.getElementById("optional").innerHTML="Please select!";
break;
}
}
Also added the second group as a real option, and a default as "please select". may or may not be necessary in your case

Here is the demo http://codepen.io/anon/pen/izAHo
your doing it almost right.
You should put the onclick event on the option tag to trigger changes based on the option selected.
HTML
<html>
<body>
<select id="test1">
<option onclick="checkField()">Selected A Group</option>
<option>Selected B Group</option>
</select>
<select id="test2">
<option onclick="check2Field()">Selected C Group</option>
<option>Selected D Group</option>
</select>
<script>//insert second group here</script>
</body>
</html>
JS
function checkField(){
var temp = document.getElementById('test1').value;
if(temp === "Selected A Group"){
document.getElementById('test2').innerHTML="<option>Selected halloooo Group</option>";
} else {
//insert code to "echo" the second optional select group
}
}
Check out my demo for more clarity.