Develop Reference

How can I get id of span element inside select element?

My html form has the content below:
<form name="profile">
...
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
...
In my javascript, I'm trying to grab the form's ID to show a message telling the user to choose something in the dropdownlist if they haven't chosen anything and pressed the submit button. The problem is that the javascript block returns undefined.
//validate the profile form
function validate(e){
e.preventDefault();
var valid=true;
if(document.profile.province.value == ""){
document.getElementById('provinceWarning').innerHTML="*Please choose a province*";
valid=false;
}
if(valid){
alert("Thank You!");
}
return valid;
};

You can't have a span tag inside a select tag. Browser while rendering this HTML would have stripped it off.
See the demo below (check in your browser's dev tools that browser is stripping off span tag while rendering)
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
You need to put the span tag outside the select tag.

Try this, it comes down and reset once u select and submit.
function submit(){
if(!document.getElementById("province").value){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
document.getElementById("provinceWarning").innerHTML=""
valid=true;
window.alert("thank you")
}
}
<form name="profile">
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
<span id="provinceWarning" class="alert"></span>
</form>
<button id="btnSubmit" onclick="submit();">Submit</button>

Problems:
1- You can not define span in select option then move it out of your select
2- To check select value you should getElementById("province") and then check the value
3- Testable code can be as below(You can change it as you want):
function func()
{
var ddl = document.getElementById("province");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == ""){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
alert("Thank You!");
}
}
<form name="profile">
<div>
<span id="provinceWarning" class="alert"></span>
</div>
<div>
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
</div>
</form>
<button id="btnSubmit" onclick="func();">Click Me</button>

Select decides which form action to open

I have a form that starts with a select. Based on the choice of that first select (which report is chosen) I need to change the action path of which .cfm the form submits to. Will someone please assist me in how I should do this? I am open to any proper way whether is HTML, ColdFusion or jQuery (Javascript).
So starts with a select:
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
<option id ="locationreports" value="locationreports" >Location Stats</option>
</select>
If #checklistreports is chosen the form should be
<form name="generatereport" method="post" action="_checklists_queries.cfm">
But if #locationreports is chosen the form should be
<form name="generatereport" method="post" action="_location_queries.cfm">
Any help with this would be greatly appreciated.
I was trying to do in IF statement in CF but it has me stuck unfortunately with no results.

You can use a .change handler to change the action attribute of the form.
$("#reporttype").change(function() {
if ($(this).val() == "checklistreports") {
$("form[name=generatereport]").attr("action", "_checklists_queries.cfm");
} else {
$("form[name=generaterport]").attr("action", "_location_queries.cfm");
}
});

I would recommend to just indicate the action values of the form in the values of the options.
$('#reporttype').change(function(){
form_action = $(this).val();
$('form').attr('action', form_action);
$('span').text(form_action);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option value="_checklists_queries.cfm" >Checklist Stats</option>
<option value="_location_queries.cfm" >Location Stats</option>
</select>
<form name="generatereport" method="POST" action="#">
<p>This forms action value is <span>#</span></p>
</form>

You could always do it all with ColdFusion. It's so much simpler. Here is one approach.
formPage
<form action = "action.cfm" method="post">
<select name="pageToInclude">
<option value="locationQueries.cfm">Location</option>
rest of form.
action.cfm
<cfinclude template = "#form.pageToInclude#">

You already have an accepted answer, but I would like to propose a slightly cleaner solution to the answer you selected, as well as an alternative:
Option #1 (Inline and Clean):
// Cache the selector for better reuse.
var form = $("form[name=generatereport]");
$("#reporttype").change(function() {
var action = $(this).val() === 'checklistreports' ? '_checklists_queries.cfm' : '_location_queries.cfm';
form.attr('action', action);
});
The above option is just a more compact version of the answer you selected, but utilizes selector caching, which is good for performance.
Option #2 ('Global' Config Options):
// Cache the selector
var form = $('form[name=generatereport]');
// Now you can define the variable states for your app.
var config = {
checklistreports: {
action: '_checklists_queries.cfm'
},
locationreports: {
action: '_location_queries.cfm'
}
};
// Updating is trivial
$('#reporttype').change(function() {
var selected = $(this).val();
form.attr('action', config[selected].action);
});
This option is interesting because it lets you define all the different "states" for your components in one place, which is nice for readability and maintenance, and it makes the actual updating of components as simple as looking up the values it should have.

If the forms contains differents elements, you could hide the forms with css and with an onchange handler on the select unhide the right form.
html:
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option value="checklistreports" >Checklist Stats</option>
<option value="locationreports" >Location Stats</option>
</select>
<form method="post" action="_location_queries.cfm" id="locationreports" style="display: none;">
<input type="text" name="location" placeholder="location">
</form>
<form method="post" action="_checklists_queries.cfm" id="checklistreports" style="display: none;">
<input type="text" name="location" placeholder="checklist">
</form>
js:
var locationReport = document.getElementById("locationreports");
var checklistReport = document.getElementById("checklistreports");
function onChangeForm(e) {
if (e.target.value === "locationreports") {
locationReport.style.display = "block";
checklistReport.style.display = 'none';
} else {
checklistReport.style.display = "block";
locationReport.style.display = "none";
}
}
document.getElementById("reporttype").onchange = onChangeForm;
jsfiddle example

HTML SELECT JS onchange() disable comment box

This may be an absurdly easy question, but I'm new to JS.
I would like to have a SELECT box allowing a person to indicate where they heard about the event they're registering for. There would be a comment box, disabled by default but if the user selects 'Other' in the SELECT option the comment box would become available.
I am aware of onchange() but I don't know how to trigger a response in the separate form element. Any help?

Probably something like this.
HTML:
<select id="menu">
<option value="0">News</option>
<option value="1">Friends</option>
<option value="2">Other</option>
</select>
<input id="comment" type="textbox" disabled="true"/>
JS:
document.getElementById('menu').addEventListener('change', function() {
if (this.value == 2) {
document.getElementById('comment').disabled = false;
} else {
document.getElementById('comment').disabled = true;
}
});
Here's a fiddle.

Probably something like this.
HTML:
<select id="IDE">
<option value="0">Xcode</option>
<option value="1">Android Studio</option>
<option value="2">Others</option>
</select>
<input id="comment_box" type="textbox" disabled="true"/>
JS:
document.getElementById('IDE').addEventListener('change', function() {
if (this.value == 2) {
document.getElementById('comment_box').disabled = false;
} else {
document.getElementById('comment_box').disabled = true;
}
});
Here's a fiddle.

Enable / Disable submit button on a dropkick enabled form?

I have a form styled with jQuery's Dropkick however I'm unable enable / disable a submit button once the forms get the style. The JS validation works as expected without Dropkick.
The HTML:
<form method="get" id="dropkickform" action="">
<select id="min" class="list">
<option selected="selected" value="">Selection 1</option>
<option value="1">100</option>
<option value="2">200</option>
</select>
<select id="max" class="list">
<option selected="selected" value="">Selection 2</option>
<option value="1">500</option>
<option value="2">600</option>
</select>
<input type="submit" value="Submit"/>
</form>
The JS:
$('.list').dropkick();
$(document).ready(function () {
$form = $('#dropkickform');
$form.find(':input[type="submit"]').prop('disabled', true);
$form.find(':input').change(function () {
var disable = false;
$form.find(':input').not('[type="submit"]').each(function (i, el) {
if ($.trim(el.value) === '') {
disable = true;
}
});
$form.find(':input[type="submit"]').prop('disabled', disable);
});
});
http://jsfiddle.net/L3FCV/

From what I can see once you apply dropkick it will not update the selects behind the scenes so your validation will not work because of that (the selects have the initial option selected all the time, have a look in firebug/chrome web inspector to see it).
I've been able to get close with http://jsfiddle.net/Qguh5/ but it does break sometimes.
I used:
$('.list').dropkick({
change: function(value, label){
var disable = true;
$('.dk_option_current > a').each(function(){
if($(this).data('dk-dropdown-value')){
disable = false;
} else {
disable = true;
}
});
$form.find(':input[type="submit"]').prop('disabled',disable);
}
});
The change event is mentioned on the dropkick page.
I suggest you give http://uniformjs.com a try if you want custom looking forms. It might not be as pretty as dropkick but it is a lot easier to use in your scenario.

How to validate a multiselect Dropdown?

So the situation is this: I'm creating a dropdown box using the jquery.multiselect plugin on a form, but I need to check if there's some value selected, if there isn't one or more values selected I wanna throw a alert or something when some one tries to submit the form.
The HTML Code
<form id="RNA" name="RNA">
<select size="5" name="sampleMut[]" multiple="multiple" id="sampleMut">
<option value="41" >41</option>
<option value="48" >48</option>
<option value="65" >65</option>
<option value="102" >102</option>
</select>
</form>
The JavaScript Code
$(function(){
$("#sampleMut").multiselect();
});
jQuery version 1.8.3
jquery.multiselect 1.13

Try this:
$(function(){
$('form').submit(function(){
var options = $('#sampleMut > option:selected');
if(options.length == 0){
alert('no value selected');
return false;
}
});
});
Fiddle: http://jsfiddle.net/aDxu8/1/

With this you can get the amount of the selected options.
$("#sampleMut option:selected").length;