SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form help message onFocus

    I'm looking to recreate a form which incorporates help messages for each input item when focused, similar to what is on the Hotmail sign-up page:

    https://signup.live.com/signup.aspx?...ollrs=12&lic=1

    When you select a field on the form above, a little help message appears by its side. Does anyone know what would be the lightest, cleanest way to re-create this?

    Thanks!

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would start by actually coding in the html and text for the fields next to the form elements, positioned and styled appropriately. This is so users without javascript will still get the contextual help for each field, even if it may look a bit cluttered by having them all shown at once.

    Assign an id to each of those "help" elements. Use a naming convention to associate each help element to the form element it corresponds to. For example, if the form fields name is firstname, give the help element an id of firstnameHelpText.

    Give the form element an id.

    After the page loads, use javascript to hide all the help elements and set up event handlers.

    Code JavaScript:
    var elems = document.getElementById("myForm").elements;
    for (var i=0, m=elems.length; i<m; i++) {
        var helpElem = document.getElementById(elems[i].name + "HelpText");
        // if this element has a corresponding help text
        if (helpElem) {
            // we must initially hide the help text
            helpElem.style.visibility = "hidden";
     
            // show help when it gets focus
            elems[i].onfocus = function() {
                helpElem.style.visibility = "visible";
            }
            //hide help when loose focus
            elems[i].onblur = function() {
                helpElem.style.visibility = "hidden";
            }
        }
    }

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. This all makes sense, only I keep getting the following error:

    document.getElementById("myForm") has no properties
    [Break on this error] var elems = document.getElementById("myForm").elements;


    I've given my form the id 'myForm' - any idea what's wrong?

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The element doesnt exist at the time the script executed. You need to run the code after the page has loaded. Put the script before the <body> tag.

  5. #5
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, but I still can't get this to work. I'd assume that I'm making some kind of noobish mistake; here's the code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <link href="../css/default.css" rel="stylesheet" type="text/css" />
    <link href="../css/subpage.css" rel="stylesheet" type="text/css" />
    <link href="../css/nav.css" rel="stylesheet" type="text/css" />
    <link href="../css/headers.css" rel="stylesheet" type="text/css" />
    <link href="../css/quote-system.css" rel="stylesheet" type="text/css" />
    <!-- Replaces transparent PNGs with GIFs for IE6 -->
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="../css/ie-png.css" />
    <![endif]-->
    <script src="../js/subnav.js" type="text/javascript"></script>
    <script type="text/javascript">
    var elems = document.getElementById("quoteform").elements;
    for (var i=0, m=elems.length; i<m; i++) {
        var helpElem = document.getElementById(elems[i].name + "Infobox");
        // if this element has a corresponding help text
        if (helpElem) {
            // we must initially hide the help text
            helpElem.style.visibility = "hidden";
           
            // show help when it gets focus
            elems[i].onfocus = function() {
                helpElem.style.visibility = "visible";
            }
            //hide help when loose focus
            elems[i].onblur = function() {
                helpElem.style.visibility = "hidden";
            }
        }
    }
    </script>
    </head>
    <body>
    <div id="header">
      <div id="headerins">
        <div id="headercontent">
          <div id="logo"><a href="#">Logo</a></div>
          <div id="nav"></div>
        </div>
      </div>
    </div>
    <div id="container">
      <div id="containerins">
        <div id="main">
          <div id="mainins">
            <div id="maincontent">
              <div id="quoteheader" class="stageone"></div>          
              <div id="quotecontent">
                <div id="snippet">
                  <h1 id="quote-yourdetails">Your Details</h1>
                  <p>Some Text</p>   
                  <form action="#" method="post" id="quoteform">
                         
                  <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="personal-details">Personal Details</span></legend>
                  <span class="hr"></span>
                  <label for="title"><span>Title: </span><select name="titleRefData" id="title"><option value="">Please select...</option><option value="MR">Mr</option><option value="MRS">Mrs</option><option value="MISS">Miss</option><option value="MS">Ms</option><option value="DOC">Doctor</option><option value="PROF">Professor</option><option value="CAP">Captain</option><option value="COL">Colonel</option><option value="HON">Hon.</option><option value="LADY">Lady</option><option value="LORD">Lord</option><option value="MAJOR">Major</option><option value="MASTER">Master</option><option value="REV">Rev.</option><option value="SIR">Sir</option><option value="SIS">Sister</option></select></label>
                  <label for="first-name"><span>First Name: </span><input type="text" size="22" id="first-name" /></label>
                  <label for="surname"><span>Surname: </span><input type="text" size="30" id="surname" /></label>
                  <label for="gender"><span>Gender: </span><input name="gender-male" type="radio" class="radio" value="male" /> Male <input name="gender-female" type="radio" class="radio" value="female" /> Female</label>
                  <label for="dob"><span>Date of Birth: </span><input type="text" size="2" maxlength="2" id="day" /> / <input type="text" size="2" maxlength="2" id="month" /> / <input type="text" size="4" maxlength="4" /></label>
                  <label for="born"><span>Have you lived in the UK since you were born? </span><input name="born-yes" type="radio" class="radio" value="yes" /> Yes <input name="born-no" type="radio" class="radio" value="no" /> No</label>
                  <label for="how-long"><span>If no, when did you start living in the UK? </span><input type="text" size="2" maxlength="2" id="howlong-month" /> / <input type="text" size="4" maxlength="4" id="howlong-year" /></label>
                  <label for="maritalstatus"><span>Your Marital Status: </span><select name="maritalstatus" id="maritalstatus"><option value="">Please select...</option><option value="SING">Single</option><option value="MARR">Married</option><option value="CIVIL">Civil Partnered</option><option value="COMMN">Common Law</option><option value="DIVORC">Divorced</option><option value="SEP">Separated</option><option value="WID">Widowed</option></select></label>
                  </fieldset>  
                  
                  <div class="infobox" id="surnameInfobox">
                      <div class="infoboxins"><span>
                      <h4 class="s1">More Information</h4>
                      Some Text.</span>
                        <div class="infoboxbottom"></div>
                      </div>
                    </div>
                                
                    </div>
                    </div>
                    
                    <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="employment-details">Employment Details</span></legend>
                  <span class="hr"></span>
                  <label for="employment-status"><span>Your Employment Status: </span><select name="employment-status" id="employment-status" onchange="checkEmpStatus();"><option value="">Please select...</option><option value="EMP">Employed</option><option value="SLFEMP">Self employed</option><option value="RETRD">Retired</option><option value="UNEMP">Unemployed</option><option value="FULTIME">In Full Or Part Time Education</option><option value="HOUSE">Household Duties</option><option value="INDEP">Independent means</option><option value="NOTEMP">Not employed due to a disability</option><option value="VOL">Voluntary work</option><option value="COM">Company</option><option value="FINASSIT">Financially Assisted</option></select></label>
                  </fieldset>                
                    </div>
                    </div>      
                    
                    <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="telephone">Telephone</span></legend>
                  <span class="hr"></span>
                  <label for="daytime-tel"><span>Daytime Phone Number: </span><input type="text" size="22" maxlength="22" id="daytime-tel" /></label>
                  <label for="evening-tel"><span>Evening / Mobile Number: </span><input type="text" size="22" maxlength="22" id="evening-tel" /></label>
                  </fieldset>                
                    </div>
                    </div>
                    
                    <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="car-registration">Car Registration</span></legend>
                  <span class="hr"></span>
                  <label for="reg-number"><span>Registration Number (leave blank if you don't know): </span><input type="text" size="22" maxlength="22" id="reg-number" /></label>
                  </fieldset>                
                    </div>
                    </div>
                    
                    <div id="buttons"><a href="#"><img src="../images/quote-system/next-s1.png" alt="Next" id="next-button" /></a></div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="footer">
        <div id="footerins">
          <div id="privacy">
            <h3 id="combined">Header</h3>
            </div>
          <div id="footnav">
          	<ul>
              <li id="foot-home"><a href="#">Home</a></li>
              <li id="foot-why"><a href="#">Why Use Us?</a></li>
              <li id="foot-help"><a href="#">Help</a></li>
              <li id="foot-contact"><a href="#">Contact Us</a></li>
          	</ul>
          </div>
        </div>
      </div>
      <div id="lowerfooter">
        <div id="lowerfooterins">Copyright 2009. All Rights Reserved.<br />
    Valid <a href="#">XHTML</a> and <a href="#">CSS</a></div>
      </div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I noticed I typo'd. I meant </body> as in closing tag.

  7. #7
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seems to have resolved the error message, but it doesn't appear to be working as such. Basically, nothing happens. Here's the code as it is now:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <link href="../css/default.css" rel="stylesheet" type="text/css" />
    <link href="../css/subpage.css" rel="stylesheet" type="text/css" />
    <link href="../css/nav.css" rel="stylesheet" type="text/css" />
    <link href="../css/headers.css" rel="stylesheet" type="text/css" />
    <link href="../css/quote-system.css" rel="stylesheet" type="text/css" />
    <!-- Replaces transparent PNGs with GIFs for IE6 -->
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="../css/ie-png.css" />
    <![endif]-->
    </head>
    <body>
    <div id="header">
      <div id="headerins">
        <div id="headercontent">
          <div id="logo"><a href="#">Logo</a></div>
          <div id="nav"></div>
        </div>
      </div>
    </div>
    <div id="container">
      <div id="containerins">
        <div id="main">
          <div id="mainins">
            <div id="maincontent">
              <div id="quoteheader" class="stageone"></div>          
              <div id="quotecontent">
                <div id="snippet">
                  <h1 id="quote-yourdetails">Your Details</h1>
                  <p>Some Text</p>   
                  <form action="#" method="post" id="quoteform">
                         
                  <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="personal-details">Personal Details</span></legend>
                  <span class="hr"></span>
                  <label for="title"><span>Title: </span><select name="titleRefData" id="title"><option value="">Please select...</option><option value="MR">Mr</option><option value="MRS">Mrs</option><option value="MISS">Miss</option><option value="MS">Ms</option><option value="DOC">Doctor</option><option value="PROF">Professor</option><option value="CAP">Captain</option><option value="COL">Colonel</option><option value="HON">Hon.</option><option value="LADY">Lady</option><option value="LORD">Lord</option><option value="MAJOR">Major</option><option value="MASTER">Master</option><option value="REV">Rev.</option><option value="SIR">Sir</option><option value="SIS">Sister</option></select></label>
                  <label for="first-name"><span>First Name: </span><input type="text" size="22" id="first-name" /></label>
                  <label for="surname"><span>Surname: </span><input type="text" size="30" id="surname" /></label>
                  <label for="gender"><span>Gender: </span><input name="gender-male" type="radio" class="radio" value="male" /> Male <input name="gender-female" type="radio" class="radio" value="female" /> Female</label>
                  <label for="dob"><span>Date of Birth: </span><input type="text" size="2" maxlength="2" id="day" /> / <input type="text" size="2" maxlength="2" id="month" /> / <input type="text" size="4" maxlength="4" /></label>
                  <label for="born"><span>Have you lived in the UK since you were born? </span><input name="born-yes" type="radio" class="radio" value="yes" /> Yes <input name="born-no" type="radio" class="radio" value="no" /> No</label>
                  <label for="how-long"><span>If no, when did you start living in the UK? </span><input type="text" size="2" maxlength="2" id="howlong-month" /> / <input type="text" size="4" maxlength="4" id="howlong-year" /></label>
                  <label for="maritalstatus"><span>Your Marital Status: </span><select name="maritalstatus" id="maritalstatus"><option value="">Please select...</option><option value="SING">Single</option><option value="MARR">Married</option><option value="CIVIL">Civil Partnered</option><option value="COMMN">Common Law</option><option value="DIVORC">Divorced</option><option value="SEP">Separated</option><option value="WID">Widowed</option></select></label>
                  </fieldset>  
                  
                  <div class="infobox" id="surnameInfobox">
                      <div class="infoboxins"><span>
                      <h4 class="s1">More Information</h4>
                      Some Text.</span>
                        <div class="infoboxbottom"></div>
                      </div>
                    </div>
                                
                    </div>
                    </div>
                    
                    <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="employment-details">Employment Details</span></legend>
                  <span class="hr"></span>
                  <label for="employment-status"><span>Your Employment Status: </span><select name="employment-status" id="employment-status" onchange="checkEmpStatus();"><option value="">Please select...</option><option value="EMP">Employed</option><option value="SLFEMP">Self employed</option><option value="RETRD">Retired</option><option value="UNEMP">Unemployed</option><option value="FULTIME">In Full Or Part Time Education</option><option value="HOUSE">Household Duties</option><option value="INDEP">Independent means</option><option value="NOTEMP">Not employed due to a disability</option><option value="VOL">Voluntary work</option><option value="COM">Company</option><option value="FINASSIT">Financially Assisted</option></select></label>
                  </fieldset>                
                    </div>
                    </div>      
                    
                    <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="telephone">Telephone</span></legend>
                  <span class="hr"></span>
                  <label for="daytime-tel"><span>Daytime Phone Number: </span><input type="text" size="22" maxlength="22" id="daytime-tel" /></label>
                  <label for="evening-tel"><span>Evening / Mobile Number: </span><input type="text" size="22" maxlength="22" id="evening-tel" /></label>
                  </fieldset>                
                    </div>
                    </div>
                    
                    <div class="formbox">
                  <div class="formboxins">
                  <fieldset>
                  <legend><span id="car-registration">Car Registration</span></legend>
                  <span class="hr"></span>
                  <label for="reg-number"><span>Registration Number (leave blank if you don't know): </span><input type="text" size="22" maxlength="22" id="reg-number" /></label>
                  </fieldset>                
                    </div>
                    </div>
                    
                    <div id="buttons"><a href="#"><img src="../images/quote-system/next-s1.png" alt="Next" id="next-button" /></a></div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="footer">
        <div id="footerins">
          <div id="privacy">
            <h3 id="combined">Header</h3>
            </div>
          <div id="footnav">
          	<ul>
              <li id="foot-home"><a href="#">Home</a></li>
              <li id="foot-why"><a href="#">Why Use Us?</a></li>
              <li id="foot-help"><a href="#">Help</a></li>
              <li id="foot-contact"><a href="#">Contact Us</a></li>
          	</ul>
          </div>
        </div>
      </div>
      <div id="lowerfooter">
        <div id="lowerfooterins">Copyright 2009. All Rights Reserved.<br />
    Valid <a href="#">XHTML</a> and <a href="#">CSS</a></div>
      </div>
    </div>
    <script type="text/javascript">
    var elems = document.getElementById("quoteform").elements;
    for (var i=0, m=elems.length; i<m; i++) {
        var helpElem = document.getElementById(elems[i].name + "Infobox");
        // if this element has a corresponding help text
        if (helpElem) {
            // we must initially hide the help text
            helpElem.style.visibility = "hidden";
           
            // show help when it gets focus
            elems[i].onfocus = function() {
                helpElem.style.visibility = "visible";
            }
            //hide help when loose focus
            elems[i].onblur = function() {
                helpElem.style.visibility = "hidden";
            }
        }
    }
    </script>
    </body>
    </html>

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jonny View Post
    That seems to have resolved the error message, but it doesn't appear to be working as such. Basically, nothing happens.
    Each help element needs to have an ID attribute that matches the corresponding field's NAME attribute plus "Infobox".
    Also the current script isn't saving the reference to the help element.
    This is a simple fix:
    Code:
    <script type="text/javascript">
    var elems = document.getElementById("quoteform").elements;
    for (var i=0, m=elems.length; i<m; i++) {
        var helpElem = document.getElementById(elems[i].name + "Infobox");
        // if this element has a corresponding help text
        if (helpElem) {
            // we must initially hide the help text
            helpElem.style.visibility = "hidden";
            
            elems[i].helpElem = helpElem;
            
            // show help when it gets focus
            elems[i].onfocus = function()
            {
             this.helpElem.style.visibility = "visible";
            }
            
            //hide help when lose focus
            elems[i].onblur = function() 
            {
             this.helpElem.style.visibility = "hidden";
            }
        }
    }
    </script>
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's got it! Thanks very much, both of you.


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
  •