SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Check if selected == selected

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

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

  2. #2
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a toggle function for you.

    html
    Code HTML4Strict:
    <!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
    Code 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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.

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

    Or, if you like things a bit more compact:


    Code javascript:
    function toggleClass(ele, cls) {
        hasClass(ele, cls) ? removeClass(ele, cls) : addClass(ele, cls);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code JavaScript:
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Can that be remedied by matching one or more spaces?

    Code javascript:
    match = new RegExp('(\\s*|^)'+className+'(\\s*|$)');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That will do


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •