SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with some form hints?

    I have been using The CSS Guys form hint tutorial and it works great on one but not the others.

    Unless i add some <dd> </dd> tags round each input field like so...
    Code HTML4Strict:
    <div id="loginForm" class="enrolmentForm">
    <fieldset>
    	<label for="First Name:">Organisation: </label>
        <dd>
    		<input class="formField" type="text" id="Organisation" name="Organisation" tabindex="1" value="" title="Organisation"/>
    		<span class="hint">testtetestestestestset<span class="hint-pointer">&nbsp;</span></span>
    </dd>
    		<br>
    	<label for="Last Name:">Department: </label>
        <dd>
    		<input name="Department" type="text" class="formField" id="Department" tabindex="2" title="Department" value=""/>
    		<span class="hint">etstestsetestsetestes.<span class="hint-pointer">&nbsp;</span></span>
            </dd>
    		<br> 
     
    <label for="First Name:">Name: </label>
    <dd>
    		<input class="formField" type="text" id="firstName" name="userName" tabindex="3" value="" title="first name"/>
    		<span class="hint">testestestestsetes.<span class="hint-pointer">&nbsp;</span></span>
           </dd>
     
    		<br>
    	<label for="Address1">Address1: </label>
        <dd>
    		<input name="Address1" type="text" class="formField" id="Address1" tabindex="4" title="Address1e" value=""/>
            </dd>
    		<br> 
     
    <br>	  
    <label for="submit"></label>
    <input class="submitButton" type="submit" value="Next" id="submit" tabindex="5"> 
    <br>	
     
    </fieldset>
    </div>


    My Original form looked like this.
    Code HTML4Strict:
    <div id="loginForm" class="enrolmentForm">
    <fieldset>
    	<label for="First Name:">Organisation: </label>
    		<input class="formField" type="text" id="Organisation" name="Organisation" tabindex="1" value="" title="Organisation"/>
    		<span class="hint">testtetestestestestset<span class="hint-pointer">&nbsp;</span></span>
    		<br>
    	<label for="Last Name:">Department: </label>
        <dd>
    		<input name="Department" type="text" class="formField" id="Department" tabindex="2" title="Department" value=""/>
    		<span class="hint">etstestsetestsetestes.<span class="hint-pointer">&nbsp;</span></span>
    		<br> 
     
    <label for="First Name:">Name: </label>
    		<input class="formField" type="text" id="firstName" name="userName" tabindex="3" value="" title="first name"/>
    		<span class="hint">testestestestsetes.<span class="hint-pointer">&nbsp;</span></span>
     
     
    		<br>
    	<label for="Address1">Address1: </label>
    		<input name="Address1" type="text" class="formField" id="Address1" tabindex="4" title="Address1e" value=""/>
     
    		<br> 
     
    <br>	  
    <label for="submit"></label>
    <input class="submitButton" type="submit" value="Next" id="submit" tabindex="5"> 
    <br>	
     
    </fieldset>
    </div>

    That only brings up the hint in the first field for some reason.

    Here is the javascript from the tutorial i have been using, basically can it be changed so it works with my original form above without the dd tags?

    I dont have a clue about javascript and couldnt see where it says it has to be within dd.

    Code JavaScript:
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
     
    function prepareInputsForHints() {
    	var inputs = document.getElementsByTagName("input");
    	for (var i=0; i<inputs.length; i++){
    		// test to see if the hint span exists first
    		if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
    			// the span exists!  on focus, show the hint
    			inputs[i].onfocus = function () {
    				this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    			}
    			// when the cursor moves away from the field, hide the hint
    			inputs[i].onblur = function () {
    				this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    			}
    		}
    	}
    	// repeat the same tests as above for selects
    	var selects = document.getElementsByTagName("select");
    	for (var k=0; k<selects.length; k++){
    		if (selects[k].parentNode.getElementsByTagName("span")[0]) {
    			selects[k].onfocus = function () {
    				this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    			}
    			selects[k].onblur = function () {
    				this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    			}
    		}
    	}
    }
    addLoadEvent(prepareInputsForHints);

    I obviously dont want random dd tags as i wouldnt be using them.

    Any ideas?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    The script goes to the parent of the input then looks from there for the first span element. The way your form code is structured that will always be the first span.

    If you use an alternative preferred method for the labels then the script will work fine.

    Here's the updated form code

    Code html4strict:
    <div id="loginForm" class="enrolmentForm">
    <fieldset>
        <label>Organisation:
            <input type="text" name="Organisation" class="formField" value="" title="Organisation" tabindex="1" />
            <span class="hint">testtetestestestestset<span class="hint-pointer">&nbsp;</span></span>
        </label>
        <br>
        <label>Department:
            <input type="text" name="Department" class="formField" title="Department" value="" tabindex="2" />
            <span class="hint">etstestsetestsetestes.<span class="hint-pointer">&nbsp;</span></span>
        </label>
            <br>
        <label>Name:
            <input type="text" name="userName" class="formField" value="" title="first name" tabindex="3" />
            <span class="hint">testestestestsetes.<span class="hint-pointer">&nbsp;</span></span>
        </label>
        <br>
        <label>Address1:
            <input type="text" name="Address1" class="formField" title="Address1e" value="" tabindex="4" />
        </label>
        <br>
        <input type="submit" class="submitButton" value="Next" tabindex="5">
        <br>   
    </fieldset>
    </div>

    And here's the script. I've use some show and hide functions too to help prevent some duplication.

    Code javascript:
    function show() {
        this.parentNode.getElementsByTagName('span')[0].style.display = '';
    }
    function hide() {
        this.parentNode.getElementsByTagName('span')[0].style.display = 'none';
    }
    function prepareInputsForHints() {
        var inputs = document.getElementsByTagName('input'),
            selects = document.getElementsByTagName('select'),
            i;
        for (i = 0; i < inputs.length; i += 1) {
            // test to see if the hint span exists first
            if (inputs[i].parentNode.getElementsByTagName('span')[0]) {
                // the span exists!  on focus, show the hint
                inputs[i].onfocus = show;
                // when the cursor moves away from the field, hide the hint
                inputs[i].onblur = hide;
                hide.call(inputs[i]);
            }
        }
        // repeat the same tests as above for selects
        for (i = 0; i < selects.length; i += 1) {
            if (selects[i].parentNode.getElementsByTagName('span')[0]) {
                selects[i].onfocus = show;
                selects[i].onblur = hide;
                hide.call(selects[i]);
            }
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Here's some more duplication removed from the script, which should now be easier to understand.

    Code javascript:
    function showFirstSpan() {
        firstSpan(this).style.display = '';
    }
    function hideFirstSpan() {
        firstSpan(this).style.display = 'none';
    }
    function firstSpan(elRef) {
    	return elRef.parentNode.getElementsByTagName('span')[0];
    }
    function initToggle(els) {
        var i,
            el;
        for (i = 0; i < els.length; i += 1) {
            el = els[i];
            if (firstSpan(el)) {
                el.onfocus = showFirstSpan;
                el.onblur = hideFirstSpan;
                hideFirstSpan.call(el);
            }
        }
    }
    function prepareInputsForHints() {
        initToggle(document.getElementsByTagName('input'));
        initToggle(document.getElementsByTagName('select'));
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks PM.

    Is there anywhay i can use my original html rather than wrap it all in the label tag, as it upsets the layout of the form somewhat?

  5. #5
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could change this:-

    Code:
    function firstSpan(elRef) {
        return elRef.parentNode.getElementsByTagName('span')[0];
    }
    to

    Code:
    function firstSpan(elRef) {
        var span = elRef.nextSibling;
        while (span.nodeName != "SPAN")   {
            span = span.nextSibling;
        }
        return span;
    }
    Some browsers will find textnodes in between tags if there is white space between the input and span so I put a while loop there just to ensure it finds the span. If the span isn't there though it will go into an everlasting loop so it's dangerous.

    If I was doing this I would introduce a naming convention where the hint has an id matching the name of the input + "hint":-

    Code:
        <input type="text" name="Organisation" class="formField" value="" title="Organisation" tabindex="1" />
        <span id="OrganisationHint" class="hint">testtetestestestestset<span class="hint-pointer">&nbsp;</span></span>
    then the function to find the span would be:-

    Code:
    function firstSpan(elRef) {
        return document.getElementById(elRef.name + 'Hint');
    }

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Thanks Brian. This is also a good example showing the benefits of using separate functions that each perform a certain task, as it becomes much easier to rework things and make adjustments where need be.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •