Help with some form hints?

[Jezthompson12@nt]

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...

<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.

<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.

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?

[paul_wilkins]

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

<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.

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]);
        }
    }
}

[paul_wilkins]

Here's some more duplication removed from the script, which should now be easier to understand.

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'));
}

[Jezthompson12@nt]

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?

[BrianOConnell]

You could change this:-

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

to

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":-

    <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:-

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

[paul_wilkins]

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.