Check if selected == selected

JavaScript
1

I need to say… if selectedIndex == ‘Registered Users’ or if the user selects the second option, add a class.


if (privacy_form)
	{
		var dob = document.getElementById('dob'); 
		
		if (dob.options[1])
		{
			addClass(dob, 'db');
		}
		else
		{
			removeClass(dob, 'db');
		}
	}
2

Is this a select options menu? You should be able to access the value by dob.value. If you have an eventlistener attached to the select menu then in your handler you can find the value with ‘this.value’.

The type of event you want to look at is ‘change’ or for IE ‘onchange’. In addition the type of thing you’re looking for here is a toggle. i.e. if onchange happens on ‘registered user’ add the class. if onchange happens again on ‘registered user’ i.e. it’s being deselected remove the class.

A little confused though you say add a class to the select menu? What’s that class doing?

Anyway here’s a couple of links. They are a little bit old, but I’m sure informative.

First is adding error message to fields
W3C DOM - Form error messages

The second which is probably more useful is an introduction to events
Javascript - Introduction to Events

Cheers

RLM

3

Here’s a toggle function for you.

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Options</title>
<style type="text/css">
h1.clicked { background: red; }
</style>
</head>
<body>
<h1>Click here a few times</h1>

<script type="text/javascript">

var toggle = function(elem , className ) {
  // remove allows for multiple classNames and strips the appropriate spaces
  // e.g. removing class2 from 'class1 class2 class3'
  var remove = new RegExp ('\\\\s'+className+'|'+className+'\\\\s|'+className),
      match = new RegExp ('\\\\b'+className+'\\\\b'),
      currClass = elem.className;
  
  // does the element already have the class  
  if (match.test(currClass)) {
    elem.className = currClass.replace(remove, ''); // then remove class
  } else {
    elem.className += ' ' + className; // else add class
  }
}
// elementsByTagName returns an array. 
// Adding the index[0] selects the first one.
var headElem = document.getElementsByTagName('h1')[0];
headElem.onclick = function(){ toggle(headElem, 'clicked'); }; // clicked is the class name. See the CSS.
</script>
</body>
</html>

Javascript

var toggle = function(elem , className ) {

  var remove = new RegExp ('\\\\s'+className+'|'+className+'\\\\s|'+className),
      match = new RegExp ('\\\\b'+className+'\\\\b'),
      currClass = elem.className;
    
  if (match.test(currClass)) {
    elem.className = currClass.replace(remove, '');
  } else {
    elem.className += ' ' + className;
  }
};
4

Here’s a link to some hasClass(), addClass() and removeClass() functions that can be very useful.
addClass, removeClass, hasClass - JavaScript - Snipplr Social Snippet Repository

In addition to those, I like to add a toggleClass() function too.


function toggleClass(ele, cls) {
    if (hasClass(ele, cls)) {
        removeClass(ele, cls);
    } else {
        addClass(ele, cls);
    }
}

Or, if you like things a bit more compact:


function toggleClass(ele, cls) {
    hasClass(ele, cls) ? removeClass(ele, cls) : addClass(ele, cls);
}
5

or that indeed.

the only thing with that regex it doesn’t remove the trailing space, so you get an extra space each time it’s added. not a biggy I guess.


var strg = 'class1 class2 class3';

function remove(className){
  match = new RegExp('(\\\\s|^)'+className+'(\\\\s|$)');
  strg = strg.replace(match, ' ');
} 

function add(className){
  strg += ' ' + className; 
}   

for (var i = 0; i < 10; i += 1){
  remove('class3');
  add('class3');
}

console.log(strg); //class1 class2          class3
6

Can that be remedied by matching one or more spaces?


match = new RegExp('(\\\\s*|^)'+className+'(\\\\s*|$)');
7

That will do:)