SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict Percipient's Avatar
    Join Date
    Jun 2000
    Location
    Summerland, BC, Canada.
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing a Label's Class

    Is there a reasonably reliable way to change the class attribute of a label tag in JavaScript? I want to make the label's text change to a different color if a required field was missed. I don't want to specify the color in the script, but would rather do it in my stylesheet and simply change which label class is used.
    Ed Rands

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh, just use the className property, it's exposed by any object with a class attribute.

    <label for="Name" id="nameLabel">Name</label>
    <input type="text" name="Name" />

    document.getElementById('nameLabel').className = 'someNewClassName';
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Addict Percipient's Avatar
    Join Date
    Jun 2000
    Location
    Summerland, BC, Canada.
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so what's going wrong here? If I code it to change the input object's class, it works fine, but if I use the name of the label instead, the script returns true and the form submits. I still get my alert, but the form is submitted.

    Here's the html for the label and it's associated text input:

    Code:
    <td class="FormTableLabel"><label for="UniName" id="UniNameLabel"
     name="UniNameLabel" class="Correct">Universe/Galaxy Name:</label></td>
    <td class="FormTableInput"><input type="text" class="InputText"
     name="UniName" id="UniName" size="25" /></td>
    And the JavaScript:

    Code:
    function CheckUniSuggest(theForm) {
     if (theForm.UniName.value.length < 4) {
      alert('The name of the universe/galaxy you entered is too short to be reasonable. '+
       'Surely the real name is longer than four characters? Please enter a full name.');
      theForm.UniName.focus();
      theForm.UniNameLabel.className = 'Incorrect';
      return false;
     }
     return true;
    }
    The script is called with the form's:

    Code:
    onsubmit="return CheckUniSuggest(this)"
    Are labels just not accessable with className? They certainly can have a class.
    Ed Rands

  4. #4
    SitePoint Addict Percipient's Avatar
    Join Date
    Jun 2000
    Location
    Summerland, BC, Canada.
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried an experiment that does not submit a form to work. I instead used onfocus and onblur to try to change the label's class, and IE gives me back that the label "is null or not an object."

    So, does that mean labels can't be accessed?

    Maybe I'll try changing the class of the cell the label stands alone in.
    Ed Rands

  5. #5
    SitePoint Addict Percipient's Avatar
    Join Date
    Jun 2000
    Location
    Summerland, BC, Canada.
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Percipient
    Maybe I'll try changing the class of the cell the label stands alone in.
    Couldn't get that to work either. What gives?

    HHEELLPP! He-heh. Please?
    Ed Rands

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a test that I did. Works just fine
    Code:
    <html>
    <head>
    <title>Labels</title>
    
    <style type="text/css">
    label.error {
    	color: red;
    	}
    </style>
    
    <script type="text/javascript">
    
    function validate( f )
    {
    	if ( f.Name.value == "" )
    	{
    		document.getElementById( 'nameLabel' ).className = 'error';
    		return false;
    	}
    	return true;
    }
    
    </script>
    
    <body>
    
    <form onsubmit="return validate(this);">
    
    <label for="Name" id="nameLabel">Name</label>
    <input type="text" name="Name" />
    <br />
    <input type="submit" name="Submit" value="Submit" />
    
    </form>
    
    </body>
    
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Addict Percipient's Avatar
    Join Date
    Jun 2000
    Location
    Summerland, BC, Canada.
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, got it to work now! Thanks very much for your help.

    My mistake was trying to access the label by name, instead of id. By name works fine for the inputs, but not labels. Now I am off and away, 'til I have another hang-up. He-heh.

    Thanks again for your helpfullness, beetle.
    Ed Rands

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick function I cooked up that adds a label property to each form element that has a label defined for it. This way you don't have to specify ids for all your labels It only works on pages with one form, but hey, most do anyway, and this is quick and dirty
    Code:
    <html>
    <head>
    <title>Labels</title>
    
    <style type="text/css">
    label.error {
    	color: red;
    	}
    </style>
    
    <script>
    
    function makeLabelProperties( )
    {
    	var labels = document.getElementsByTagName("label");
    	var elemName;
    	for ( var i = 0; ( label = labels[i] ); i++ )
    	{
    		var elemName = label.htmlFor;
    		document.forms[0].elements[elemName].label = label;
    	}
    }
    
    function validate( f )
    {
    	if ( f.Name.value == "" )
    	{
    		f.Name.label.className = 'error';
    		return false;
    	}
    	return true;
    }
    
    </script>
    
    <body onload="makeLabelProperties()">
    
    <form onsubmit="return validate(this);">
    
    <label for="Name" id="nameLabel">Name</label>
    <input type="text" name="Name" />
    <br />
    <input type="submit" name="Submit" value="Submit" />
    
    </form>
    
    </body>
    
    </html>
    Last edited by beetle; Feb 13, 2003 at 16:36.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Addict Percipient's Avatar
    Join Date
    Jun 2000
    Location
    Summerland, BC, Canada.
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting, thanks.
    Ed Rands


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
  •