Hi guys, I'm working on a page using javascript to get hints to appear next to a form input whenever the user clicks on the input to enter information. The sample javascript for this code to work looks simple enough. http://www.thienkaiwei.com/index1.html However I can't get it to work on my page. http://www.thienkaiwei.com/contactus9.php There are alot of <input> tags and <select> tags that I want to apply this javascript code on. At first it sort of worked, the scripted applied the .display:none to a <span> tag when I clicked on the input field. But it was applied to the wrong <span> tag. I overwrite that build and started afresh, but now it doesn't work totally. Here's the javascript code that's supposed do the trick. 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); Code (markup): And here's one of the input fields I'm trying to get it to work. <div class="sectioncontainer"> <div class="sectionhead"><p class="sectionheadfont">Step<img src="images/number1.gif" style="margin-bottom:-4px">: <span style="font-weight:300">Contact information</span></p></div> <div id="contactinfocontent" class="content style113"> <table width="100%"> <tr> <td> <p class="style165">Your Name: <span style="color:#F00; font-size:10px;">(required)</span></p> <select name="visitorsalute" size="0" id="visitorsalute"> <option value=" " selected> </option> <option value="Mr.">Mr.</option> <option value="Dr.">Dr.</option> <option value="Mrs.">Mrs.</option> <option value="Ms.">Ms.</option> <option value="Mdm">Mdm</option> </select> <input name="visitor" type="text" id="visitor" size="35"/> <span name="hintspan" class="hint">Please enter your name here</span> <img src="images/qns.gif" title="Please fill in contact person’s name."> </td> </tr> <tr> <td><p class="style165">E-mail address: <span style="color:#F00; font-size:10px;">(required)</span></p> <input name="visitormail" type="text" id="visitormail" size="45"> <img src="images/qns.gif" title="We will need your email address as we will be sending you some enrolment details."> </td> </tr> Code (markup): Anyone has any ideas? Need anymore information from my side? Thanks in advance, and Merry Christmas!
First replace the function prepareInputsForHints to 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("img")[0].style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs[i].onblur = function () { this.parentNode.getElementsByTagName("img")[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"; } } } } Code (markup):
hi ruben, thanks for replying. but it's not the <img> that's providing the hint. ignore that img. I need the following span tag for the javascript to apply the .display inline and the .display none. <span name="hintspan">Please enter your name here</span> Code (markup): It's directly after the first input tag, and before the img tag. More advice will be appreciated!
So try this 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].name=="hintspan") { // 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"; } }else{ // the span exists! on focus, show the hint inputs[i].onfocus = function () { this.parentNode.getElementsByTagName("span")[1].style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs[i].onblur = function () { this.parentNode.getElementsByTagName("span")[1].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"; } } } } Code (markup):
It WORKED! I actually tried using inputs[i].parentNode.getElementsByTagName("span").getElementsByName("hintspan") Code (markup): and inputs[i].nextSibling.getElementsByTagName("span") Code (markup): and what not... so it's just this? .name=="hintspan") Code (markup): LOL this took me one whole day man. But when I applied the <span> tags with "hintclass" to the other sections, the code doesn't work for those other sections. Only the contact information section is working. I also tried using your mod for the <select> tags with the <span> tags after them. Now the whole code doesn't work. Here's the address to that page. http://thienkaiwei.com/contactus9.php Here's the javascript based on yours. 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].name=="hintspan") { // 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"; } }else{ // the span exists! on focus, show the hint inputs[i].onfocus = function () { this.parentNode.getElementsByTagName("span")[1].style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs[i].onblur = function () { this.parentNode.getElementsByTagName("span")[1].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 (inputs[k].parentNode.getElementsByTagName("span")[0].name=="hintspan") { selects[k].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } selects[k].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } }else{ // the span exists! on focus, show the hint inputs[k].onfocus = function () { this.parentNode.getElementsByTagName("span")[1].style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs[k].onblur = function () { this.parentNode.getElementsByTagName("span")[1].style.display = "none"; } } } addLoadEvent(prepareInputsForHints); Code (markup): Here's a part of the code that refers to two different sections "Step 1: Contact information" and "Step 2: Student information". <div class="sectioncontainer"> <div class="sectionhead"><p class="sectionheadfont">Step<img src="images/number1.gif" style="margin-bottom:-4px">: <span style="font-weight:300">Contact information</span></p></div> <div id="contactinfocontent" class="content style113"> <table width="100%"> <tr> <td> <p class="style165">Your Name: <span style="color:#F00; font-size:10px;">(required)</span></p> <select name="visitorsalute" size="0" id="visitorsalute"> <option value=" " selected> </option> <option value="Mr.">Mr.</option> <option value="Dr.">Dr.</option> <option value="Mrs.">Mrs.</option> <option value="Ms.">Ms.</option> <option value="Mdm">Mdm</option> </select> <input name="visitor" type="text" id="visitor" size="35"/> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="Please fill in contact person’s name."> </td> </tr> <tr> <td><p class="style165">E-mail address: <span style="color:#F00; font-size:10px;">(required)</span></p> <input name="visitormail" type="text" id="visitormail" size="45"> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="We will need your email address as we will be sending you some enrolment details."> </td> </tr> <tr> <td> <p class="style165">Contact Number: <span style="color:#F00; font-size:10px;">(required)</span></p> <input name="contact" type="text" id="contact" size="15" title="Please leave us your contact so that we can reach you."> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="Please leave us your contact so that we can reach you."> </td> </tr> <tr> <td> <p class="style165">Subject: <span style="color:#F00; font-size:10px;">(required)</span></p> <select name="attn" size="1"> <option value="No Subject" selected>Select a subject </option> <option value=" General Enquiry ">General Enquiry </option> <option value="Junior Course Enquiry">Drum course for children (minimum 7 years old)</option> <option value="Drum Course Enquiry">Drum course for teens and adults</option> <option value=" Elective Programme ">Elective Programme </option> <option value=" School Enrichment Enquiry ">School Enrichment Enquiry </option> <option value="Enquiry on sale of drum sets">Enquiry on sale of drum sets</option> <option value=" Job Application ">Job Application </option> <option value=" Feedback / Suggestion ">Feedback / Suggestion </option> </select> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="Please select a relevant subject to help us facilitate your enquiry."> </td> </tr> <tr> <td> <p class="style165">Enter your message here: <span style="color:#F00; font-size:10px;">(required)</span></p> <textarea name="notes" textarea rows="20" cols="40" class="form m2_text" style="height:100px; overflow:scroll; width: 560px;"></textarea> <img src="images/qns.gif" title="Please note that information about Fees, Duration and Location can be found on our website." style="vertical-align:top"> </td> </tr> </table> <p class="generaltext" align="center"><span class="fontred"><strong>Warning: To help MDS prevent spam messages, please <u>fill up all</u> the required fields above.</strong></span></p> </div> </div> <div class="sectioncontainer"> <div class="sectionhead"><p class="sectionheadfont">Step<img src="images/number2.gif" style="margin-bottom:-4px">: <span style="font-weight:300">Student's Information</span></p> </div> <div id="studentinfocontent" class="content style113"> <table width="100%"> <tr> <td style="width:220px;"><p class="style165">Student's Name:</p> <span class="form_div" style="width:220px;"> <input name="studentname" type="text" id="studentname" size="25"> <span name="hintspan" style="display:none;">Please enter your name here</span> </span></td> <td><p class="style165">Age:</p> <span class="form_div"> <input name="studentage" type="text" id="studentage" size="3" maxlength="3"> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="Name and age of the student enrolling."> </span> </td> </tr> <tr> <td style="width:220px;"><p class="style165">Drumming Experience: </p> <span class="form_div" style="width:220px;"> <select name="drummingexp" size="1" id="drummingexp"> <option value="-">Select the number of years</option> <option value="No Drumming Experience">No Drumming Experience</option> <option value="< 1 yr">< 1 year </option> <option value="1 to 2 yr">1 to 2 years</option> <option value="2 to 4 yr">2 to 4 years</option> <option value="5 to 8 yr">5 to 8 years</option> <option value="> 8 yr">> 8 years</option> </select> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="Please state if student has any drumming experience"> </span></td> <td align="left"><p class="style165">Handedness:</p> <span class="form_div"> <select name="hand" size="0" id="hand"> <option value=" "></option> <option value="( Right-Handed )">Right-Handed</option> <option value="( Left-Handed )">Left-Handed</option> </select> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="Is the student left-handed or right-handed?"> </span></td> </tr> <tr> <td style="width:190px;"><p class="style165">Other musical background: <input name="musicbackground" type="checkbox" id="musicbackground" value="I have other music background"> <span name="hintspan" style="display:none;">Please enter your name here</span> <img src="images/qns.gif" title="Please check this box if your child has experience playing other musical instruments"> </p> </td> </tr> </table> </div> </div> Code (markup): Any idea why it's not working when I extend the modification to include the <select> tags? For my learning....why did you have to put an else statement and make it refer to the next <span> tag if it doesn't detect a <span> in the first place? [1] refers to the next <span> in the array?
Thanks ruben, Carelessness on my part. But I'm still stuck with the hints for ALL select fields not appearing at all, and only the <input> tags for the first section Contact Information is working. All other sections are not working. I tried removing some potentially conflicting codes such as <span> tags so it won't conflict with the script selecting the wrong spans. Any ideas how to proceed? And can I get the script to show me what values is it currently processing, for example which <input> and <select> tags it identified? That will help me a lot in understanding what is wrong. Is it the alert(); code or something? I tried using alert(i) to show me how many input tags it identified. It worked, but that's not helping me to know which <input> tags it is identifying. Please advise...