We Keep Coding

If option selected do something

I have form. I want to do something, if the certain option is selected. I try this
if (document.getElementById('order-select').value == "Услуга") {
alert("blabla");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="order-select">
<option value="Услуга" class="item-1">Услуга</option>
<option value="Строительный проект" class="item-2">Строительный проект</option>
</select>
Problem : I want to alert every time, when option is selected.
Need help

You need to attach an event listener for the change event.
When the event is fired, you can access the element through the target object on the event object.
document.getElementById('order-select').addEventListener('change', function (e) {
if (e.target.value === "Услуга") {
alert('Selected');
}
});
<select id="order-select">
<option class="item-1">--Select--</option>
<option value="Услуга" class="item-2">Услуга</option>
<option value="Строительный проект" class="item-3">Строительный проект</option>
</select>
Updated Example
document.getElementById('order-select').addEventListener('change', function (e) {
if (e.target.value === "Услуга") {
alert('Selected');
}
});

Can I have my list tile as first option with null value?

So here is my code
<select id="BVT STUFF" onChange="jumpTo(getSelected(this));">
<option>HardRock Catalog</option>
<option value="http://link">BVT WIKI</option>
<option value="http://link">BVT CALENDAR</option>
<option value="https://link">Sustainment</option>
<option value="link">UVerse Dispatch Servlet</option>
This is a tool that I created for my team.
My problem is that I have the list "Title" as the first option and tried to give it a null value but whenever it is selected it tries to open a page. i.e. HardRock Catalog
Is there anything I could do with this to allow the list title to really have no value?

I'll suggest to add value="" for the first option. Then in your jumpTo function check
<option value="">HardRock Catalog</option>
function jumpTo(url) {
if(url === "") return;
// other stuff here
}

You could add selected and disabled attributes.
jsfiddle
HTML
<option selected="selected" disabled>HardRock Catalog</option>

You may try this
HTML :
<select onchange="jumpTo(this)">
<option value='0'>HardRock Catalog</option>
<option value="http:\\google.com">Goto Google</option>
<option value="http:\\yahoo.com">Goto Yahoo</option>
</select>
JS :
function jumpTo(select)
{
if(select.value != '0'){
// code goes here
location.href = select.value;
}
}
DEMO.

Using Javascript function variables to define a DOM element

I'm using a yes/no dropdownbox to hide conditional form elements via CSS. It works fine if I manually define the form name and element name, but if I try to define them via variables it won't function. I've been troubleshooting and researching for about an hour to no avail. Here is my Javascript function.
function binaryHideShow(formName, elementName)
{
if (document.forms["'" + formName + "'"].elementName.value == "yes")
{
document.getElementById("'" + elementName + "'").setAttribute("class","show");
}
else
{
document.getElementById("'" + elementName + "'").setAttribute("class","hide");
}
}
And here is the HTML element.
<select name="PrimaryFiledBankruptcyDropDownList" onchange="binaryHideShow(this.form.name, this.attributes['name'].value);">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div id="PrimaryFiledBankruptcyDropDownList">
<label for="PrimaryBankruptcyTypeDropDownList">Bankruptcy Type:</label>
<select name="PrimaryBankruptcyTypeDropDownList" onchange="">
<option value=""></option>
<option value="chapter-7">Chapter 7</option>
<option value="chapter-13">Chapter 13</option>
</select>
</div>
I've already ensured that my this statements on the html side are pulling the correct elements.
To be clear if I manually enter the variables names as per the example below it will work fine, and the html this statements return the EXACT names that I'm using below.
function binaryHideShow()
{
if (document.forms["ProgramApplicationForm"].PrimaryFiledBankruptcyDropDownList.value == "yes")
{
document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","show");
}
else
{
document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","hide");
}
}

There is an error in your function for access the element in your form, try:
function binaryHideShow(formName, elementName)
{
if (document.forms[formName][elementName].value == "yes")
{
document.getElementById(elementName).setAttribute("class","show");
}
else
{
document.getElementById(elementName).setAttribute("class","hide");
}
}

Change from
document.forms["'" + formName + "'"]
to
document.forms[ formName ]
Otherwise you're passing in a name as if you did "'PrimaryBankruptcyTypeDropDownList'" (note the double quotes).

This should get you started.
HTML
<form name="MyForm" id="MyForm">
<select name="PrimaryFiledBankruptcyDropDownList"nchange="binaryHideShow(this,this.form);">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</form>
JavaScript
function binaryHideShow(element,form) {
console.log("Element Name: " + element.name);
console.log("Form Name: " + form.name);
if(element.value == "yes") {
console.log('sure does');
} else {
console.log('nope');
}
}
Off topic - but, you might find this useful...
Look into separating your actions from your view - meaning: get rid of the "onchange" event and if possible - think about using jQuery.
Some good reads for you:
http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
https://developers.google.com/speed/docs/best-practices/rules_intro
jQuery pitfalls to avoid
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip2
http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

I ended up figuring it out. In order to use the element portion of the document.forms you have to specify elements[] with the variables inside as such:
function binaryHideShow(formName, elementName)
{
if (document.forms[formName].elements[elementName].value == "yes")
{
document.getElementById(elementName).setAttribute("class","show");
}
else
{
document.getElementById(elementName).setAttribute("class","hide");
}
}

Disabling other dropboxes on selection of value in one

I am trying to write a function that will:
Disable the submit button when no option in a dropbox is selected (ie empty string is selected). Enable all dropboxes.
On user selection of an option in a dropbox (that is not the empty
string), disable all other drop boxes and enable the submit button.
However, as a beginner at JavaScript I have no idea how I would begin this. How would I write such code?
So my simplified HTML would be as follows :
<form id="form" name="form" method="post" action="confirmation.cshtml">
<select name="start_to_end_time" class="start_to_end_time">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="start_to_end_time" class="start_to_end_time">
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="submit">Submit</button>
How can I write code that fulfills this function?

I think it's not a good idea to give two HTML element the same name attribute unless you use brackets [] within it. The last one may overwrite the value of the first one.
JavaScript using MooTools:
$$('.start_to_end_time').each(function(element) {
element.addEvent('click', function(ev) {
$$('.start_to_end_time').each(function(selectbox) {
if (element.getProperty('value') != '') {
$('button').setProperty('disabled', '');
$$('.start_to_end_time').each(function(b) {
if (b != element) {
b.setProperty('disabled', 'disabled');
} else {
b.setProperty('disabled', '');
}
}
} else {
$('button').setProperty('disabled', 'disabled');
$$('.start_to_end_time').each(function(b) {
b.setProperty('disabled', '');
}
}
});
});
});
I didn't test the code. You may define some methods to make it more readable.

start by loading the button as disabled:
<button id="myButton" type="submit" disabled='disabled'>Submit</button>
also, add a onchange listener to your options:
<select onchange="myJSFunction()" name="start_to_end_time" class="start_to_end_time">
<option value="3">3</option>
<option value="4">4</option>
then, write the javascript function:
function myJSFunction(){
var myButton = document.getElementById('myButton');
myButton.removeAttribute("disabled");
}
To check the selected value and disable accordingly (this must be executed in the function called by the onchange method):
var mySelect =document.getElementById('mySelect');
var mySelectedIndex = mySelect.selectedIndex;
if (mySelectedIndex==0){
mySelect.setAttribute("disabled","disabled);
}

Javascript hide and show form not working

This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/
<script>
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">

Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem
http://jsfiddle.net/Wx8Jf/2
$(document).ready(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
});

Couple problems:
You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.
Working version:
<script>
$(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').hide();
}
else {
$('#tid-acc').show();
}
});
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc" />
http://jsfiddle.net/dbrecht/QwkKf/

Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/
HTML:
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Javascript:
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});