SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Help with some form hints?
-
Sep 19, 2008, 11:52 #1
- Join Date
- Jul 2006
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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"> </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"> </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"> </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"> </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"> </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"> </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?
-
Sep 19, 2008, 23:29 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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"> </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"> </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"> </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
-
Sep 19, 2008, 23:38 #3
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Sep 20, 2008, 08:10 #4
- 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?
-
Sep 20, 2008, 09:46 #5
- 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]; }
Code:function firstSpan(elRef) { var span = elRef.nextSibling; while (span.nodeName != "SPAN") { span = span.nextSibling; } return span; }
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"> </span></span>
Code:function firstSpan(elRef) { return document.getElementById(elRef.name + 'Hint'); }
-
Sep 21, 2008, 13:54 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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