We Keep Coding

Automatically generating dropdown list

I try to create an infinite dropdown list. With this I mean if you click something on the first dropdown list, the second dropdown list will pop up. If you choose something on the second the third one will pop up...
The only difference between the dropdown lists is that only the first one will be required to fill in.
My dropdown list:
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onclick="myFunction()" required>
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
The new coming dropdown lists:
<div id="myDIV" style="display:none">
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onselect="myFunction()">
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
</div>
The Java Script:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I also searched for another function than onclick, because that's not for the dropdown lists I think, at least it's buggy. I tried some others but than it doesn't do anything
How can I make an automatically infinite generating dropdownlist?

If i understood you correctly the following is what you want to do.
var addDropDown = function (e) {
e.currentTarget.removeEventListener(e.type, addDropDown);
var clone = e.currentTarget.cloneNode(true);
clone.setAttribute('id', "dropdown-" + document.getElementsByTagName("select").length)
e.currentTarget.parentNode.insertBefore(clone, e.currentTarget.nextSibling);
clone.addEventListener("change", addDropDown);
}
document.getElementById("dropdown-0").addEventListener("change", addDropDown);
<select id="dropdown-0" name="dropdown">
<option value="">make a selection</option>
<option value='1'>Option1</option>
</select>

HTML Dropdown - Error Message

I currently have a working HTML dropdown option, with a submit button that displays text based upon the options selected (Thanks to SO member Paul Redmond for creating it).
<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>
<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol">1.4 Petrol</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>
<button id="process">Update</button>
<p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p>
CodePen Link:
http://codepen.io/paulcredmond/pen/jrdowR
I was wondering how I can hide the text at the bottom of the HTML file and only display it once the user presses 'Update'.
I was also wondering how I can add an IF statement to the JS code, so that if one or both dropdown is not used/selected then it would prompt the user by editing the text at the bottom of the HTML code.
My apologies if the answer is very obvious, I have very limited knowledge of HTML and JS and my efforts throughout the morning seemed futile.
Thanks for reading and thanks for any guidance.
Edit (Update):
Here is my attempt at editing the JS, but i'm not too sure on how to remove the block of HTML text and simply display the text from my IF statement.
$('#process').on('click', function() {
var car = $('#car :selected').text();
var engine = $('#engine :selected').text();
if (car == "Ford"){
$('p .car').text("Error");
$('p .engine').text("Error");
} else{
$('p .car').text(car);
$('p .engine').text(engine);
}
});

I have managed to get a workaround for this, it:
1.) Displays the text below only when the button is pressed.
2.) Hides the text if a specific value is selected from the dropdown box and should instead display an error message.
HTML Code:
<!--Credit to StackOverflow member Paul Redmond-->
<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>
<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol 1.4">1.4 Petrol1</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>
<button id="process">Update</button>
<a id="displayText" style="display: none"><p>Please Select Another Option</p></a>
<div id="toggleText" style="display: none"><h1><p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p></h1></div>
JS Code
$('#process').on('click', function() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
var car = $('#car :selected').text();
var engine = $('#engine :selected').text();
if (car == "Fiat"){
ele.style.display = "none";
text.style.display = "block";
} else{
ele.style.display = "block";
text.style.display = "none";
$('p .car').text(car);
$('p .engine').text(engine);
}
});
Please let me know if there is a simpler way to achieve this or if there is error that you spot.

Two Drop down menu's when "other" is selected in either dropdown open a text box

I need two drop down menu's that when "other is selected from either menu a text box appears to allow the user to type their answer.
I can create both drop down menu's and can get one of them to open a text box but I can't seem to get both to complete the same action. I have tried many options and can't get it to work. Can anyone please help.
Thank you
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('association');
var optOtherReason = document.getElementById('association_detail');
eSelect.onchange = function() {
if(eSelect.selectedIndex === 5) {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
}
</script>
</head>
<body>
<p>
<label>Stakeholder association (How you are affiliated with EMWIN):</label>
<select id = "association" name="association" >
<option value="na">Select:</option>
<option value="AR">Academic Research</option>
<option value="EM">Emergency Management</option>
<option value="EV">Equipment Vender</option>
<option value="RB">Re-broadcast</option>
<option value="Other">Other</option>
</select>
</p>
<div id="association_detail" style="display: none;">
<input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
</div>
<p>
<label>Stakeholder association (How you are affiliated with EMWIN):</label>
<select id = "select_use" name="select_use" >
<option value="na">Select:</option>
<option value="sat">Satellite</option>
<option value="int">Internet</option>
<option value="vhf">VHF Radio Rebroadcast</option>
<option value="Other">Other</option>
</select>
</p>
<div id="Use" style="display: none;">
<input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
</div>
</body>
</html>

A few issues I noticed:
Your "other" text boxes both have the same id/name; this does not conform the HTML standard. You need to ensure each element has a unique id.
You're only listening to eSelect changes; if you want to also toggle the visibility of the Use div, you'll need to listen to when the select-use changes (ie you need to construct another handler).

You'll need to get the second select box (id="select_use") and add another onchange handler to it. In this second onchange handler, you will need to select your second textbox (id="use") to show/hide it.
Here is an updated version of your code:
var eSelect = document.getElementById('association');
var eSelect2 = document.getElementById('select_use');
var optOtherReason = document.getElementById('association_detail');
var optOtherReason2 = document.getElementById('Use');
eSelect.onchange = function() {
if(this.options[this.selectedIndex].value === 'Other') {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
eSelect2.onchange = function() {
if(this.options[this.selectedIndex].value === 'Other') {
optOtherReason2.style.display = 'block';
} else {
optOtherReason2.style.display = 'none';
}
}
Try it here: https://jsfiddle.net/ve9fg0tc/2/
Also in your onchange handler, it would be better to show/hide your textbox based on the selected value ('other') rather than the index. This is because you may add/remove more items in your menu in the future so the index will change and the condition won't work anymore.

How to color border when error is displayed?

1Departing & Arriving
<fielset class="col-sm-6">
<label for="FDestination" >From</label>
<select name="Location" id = "Location" onchange="checkforblank()" >
<option value = "Please Select" >Please Select </option>
<option value="Newport">Newport</option>
<option value="Mahdi">London</option>
<option value="Cardiff">Cardiff</option>
<option value="Cilo">Brazil </option>
</select>
<fielset class="col-sm-6">
<label for="FDestination">To</label>
<select name="LocationTo" id = "LocationTo" onchange="checkforblank()">
<option value = "Please Select">Please Select </option>
<option value="Cardiff">Cardiff</option>
<option value="Mahdi">London</option>
<option value="Newport">Newport</option>
<option value="Cilo">Brazil</option>
</select>
<script>
function checkforblank() {
var location = document.getElementById('Location');
var invalidFrom = location.value == "Please Select";
var locationTo = document.getElementById('LocationTo');
var InvalidTo = locationTo.value == "Please Select";
if (invalidFrom || InvalidTo) {
alert('Please enter first name');
location.className = 'error';
InvalidTo.className = 'error';
}
else {
location.className = '';
}
return !invalid;
}
</script>
.error {
border: solid 5px #FF0
}
I want borders for the selected option to be coloured when user chooses wrong option ("Please Choose") in either box. What happens now is that when I click submit it displays alert then for a few seconds the colour comes up in one box and the other box is blank, then it just disappears.
When user chooses the "Please Choose " option in either box I want the error to be displayed in that box e.g. if both boxes have "Please Choose" then both highlighted or if one box has "Please Choose" and the other box is valid then only the one box with wrong option is highlighted. Also that when OK is clicked in the alert box the boxes remain highlighted until changed to a valid option.

First thing I would do is fix the fielset to be fieldset as it should be.
Second, I would add the closing tags for them, like so;
<fieldset class="col-sm-6">
<label for="Location">From</label>
<select name="Location" id="Location" onchange="checkforblank()">
<option value="Please Select">Please Select</option>
<option value="Newport">Newport</option>
<option value="Mahdi">London</option>
<option value="Cardiff">Cardiff</option>
<option value="Cilo">Brazil</option>
</select>
</fieldset>
<fieldset class="col-sm-6">
<label for="LocationTo">To</label>
<select name="LocationTo" id="LocationTo" onchange="checkforblank()">
<option value="Please Select">Please Select</option>
<option value="Cardiff">Cardiff</option>
<option value="Mahdi">London</option>
<option value="Newport">Newport</option>
<option value="Cilo">Brazil</option>
</select>
</fieldset>
After that, you didn't specify whether using jQuery was an option, so this answer is dependent on that answer, since it uses jQuery.
$('#Location, #LocationTo').change(function(e) {
var fromVal = $('#Location').val(),
toVal = $('#LocationTo').val(),
borderCol = '';
if (fromVal == "Please Select" || toVal == "Please Select") {
borderCol = 'red';
} else {
borderCol = 'black';
}
$('select[id="Location"],select[id="LocationTo"]').parent().css({
'border-color' : borderCol
});
});
Link to the fiddle
http://jsfiddle.net/MrMarlow/eg8k4vL7/
If using jQuery is an option, include it like so
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Edit :: Fixed label to attributes to point to the corresponding id.

Here is the JavaScript/JQuery code that solves your problem (whenever both destination match, the border becomes red because you can not travel from point A to point A, it doesn't make any sense).
Code:
var index_one;
var index_two;
$('#Location, #LocationTo').change(function (e) {
index_one = $("#Location")[0].selectedIndex;
index_two = $("#LocationTo")[0].selectedIndex;
});
$("#submit").click(function () {
if ($("#Location>option").eq(index_one).text() == $("#LocationTo>option").eq(index_two).text()) {
$('#Location, #LocationTo').css("border-color", "red");
} else {
$('#Location, #LocationTo').css("border-color", "black");
}
});
Fiddle example: http://jsfiddle.net/eugensunic/eg8k4vL7/1/
Also if you want to handle the possibility of a input that has not been given a value you can add this two extra if's
else if($("#Location>option").eq(index_one).text() =="Please Select")
{
alert ("Select an option");
}
else if($("#LocationTo>option").eq(index_one).text() =="Please Select")
{
alert ("Select an option");
}
Instead of .text() you can use .val() function which is more appropriate in this situation.
To call the above code put it in between the tags
<head>
<script src="jquery-1.11.3.min.js"></script> //jquery lib, must include
<script>
//the above code
<script>
</head>

my cascading combo boxes are sending wrong values

I have a from with drop down boxes with options, which once selected will change the values of the next drop down box.
If i select the first training option, both dates are sent through the form to my email address just fine.
But if i select the social media workshop or any below, the dates come through as the 2nd or 18th September, which are the values of the first option and not the ones that I have set for this particular label.
I call this <body onload="setup()"> Javascript:
function setup(){
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
for (i = 0; i < selects.length; i++)
{
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
}
Css:
#socialmedia, #advancedmarketing, #textAreaSearchBox, #firstaid {
display: none;}
Html:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<label for="phone">What kind of training?</label>
<select id="searchType" name="training" class="fixed-size-drop">
<option value="intromarketing">Introduction to Marketing</option>
<option value="socialmedia">Social Media Workshop</option>
<option value="advancedmarketing">Advanced Marketing Workshop</option>
<option value="firstaid">First Aid Training</option></select>
<label for="date">Choose your Date:</label>
<select id="intromarketing" name="date" class="fixed-size-drop2">
<option value="2ndsept" name="2ndsept">2nd sept 2014</option>
<option value="18thsept" name="18thsept">18th sept 2014</option></select>
<select id="socialmedia" class="fixed-size-drop2">
<option value="id">11th sept 2014</option>
<option value="18thsept">18th sept 2014</option></select>
<select id="advancedmarketing" class="fixed-size-drop2">
<option value="name">9th sept 2014</option>
<option value="organization">25th sept 2014</option></select>
<select id="firstaid" class="fixed-size-drop2">
<option value="3rdsept" name="3rdsept">3rd September 2014</option>
<option value="16thsept" name="16thsept">16th September 2014</option></select>
<input type="submit" class="ubutton" value="submit">
</form>
Here is the uploaded form: http://coffeemachines4u.co.uk/test-form.php
I have been scratching my head for a few hours so if anybody could point me in the right direction i would be extremely thankful :)

Its because of the name-attribute in of your selectboxes. Only the first select has the name date. If this is invisible it is also there and because of this the form send the date parameter from the date. You can change the name attribute and the vivible of your selectboxes on same time
use this JavaScrip
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
selects[i].removeAttribute('name');
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById(select2).name = 'date';
document.getElementById('textAreaSearchBox').style.display = 'block';

Update the name of the four dynamic select elements with: name="date".
On select#searchType change, you need to disable / enable (DOM element property) the corresponding select(s).