Text visible only when webform field selected

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Josh Mitchell
    New Member
    • Dec 2007
    • 5
    #1

    Text visible only when webform field selected

    Hello,

    Could anyone direct me to some sample script that makes a div or text visible only when a webform field in selected. So for example, in the below snippet, I want the text "Your username can only contain letters (A-Z) or numbers (0-9)" to be visible only when the user has selected "field1" in the form. Likewise, when the user leaves "field1," the text should become invisible again.

    Many thanks!
    Josh

    Code:
    <div id="username">
	Username
	<p></p>
	<input type="text" id="field1" name="field1" size="20" tabindex="1">

	<div id="usernote">
	Your username can only contain letters (A-Z) or numbers (0-9)
	</div>

</div>
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5388
      #2
      hi ...

      welcome to TSDN ...

      you may use the onfocus and onblur of your textbox events for that purpose. onfocus you should set the div's style display to block and unblur to none ...

      kind regards

        Comment

        • tromton
          New Member
          • Dec 2007
          • 8
          #3
          Code:
          <div id="username">
    Username
    <p></p>
    <input type="text" id="field1" name="field1" onblur="document.getElementById('usernote').style.display = 'none'" onfocus="document.getElementById('usernote').style.display = 'block';" size="20" tabindex="1">
 
    <div id="usernote" style="display:none;">
    Your username can only contain letters (A-Z) or numbers (0-9)
    </div>
</div>

            Comment

            • Josh Mitchell
              New Member
              • Dec 2007
              • 5
              #4
              Many thanks Tromton....work s like a charm! I'm trying to now combine this onfocus/onblur function with another onfocus/onblur function. Is it possible to combine two scripts that function on the same trigger event?
              Thanks!

              Code:
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <meta http-equiv="content-language" content="en" />
  <title>User Registration</title>
<style>
html, body {
  color: #000;
  background-color: #fff;
  font-size:15px;
}

form div.active {
  background-color: #98FB98;
  border: 0px solid #8a8;
}

#user_registration
{
	border:1px solid #6495ED;
	margin:auto auto;
	margin-top:100px;
	width:500px;
	background-color: #ECF1EF;
}

</style>
<script type="text/javascript"><!--
function hasClassName(el,c){
  c=c.replace(/\-/g,'\\-');
  return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
}
function addClassName(el,c){
  if(hasClassName(el,c)) return;
  var curClass=el.className||'';
  el.className=curClass+((curClass.length>0)?' ':'')+c;
}
function removeClassName(el,c){
  var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
  el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
}
function highlightElm(el,light){
  if(!el) return;
  if(light) addClassName(el,'active');
  else removeClassName(el,'active');
}
window.onload = function(){
  document.getElementById('field1').onfocus=function(){
    highlightElm(this.parentNode,true);
  }
  document.getElementById('field1').onblur=function(){
    highlightElm(this.parentNode,false);
  }
 }

// -->
</script>
</head>
<body>

<form method="post" action="" id="user_registration" name="user_registration">
<div id="username">
    Username
    <p></p>
    <input type="text" id="field1" name="field1" onblur="document.getElementById('usernote').style.display = 'none'" onfocus="document.getElementById('usernote').style.display = 'block';" size="20" tabindex="1">
 
    <div id="usernote" style="display:none;">
    Your username can only contain letters (A-Z) or numbers (0-9)
    </div>
</div>

</form>	


</body>
</html>

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5388
                  #5
                  for that purpose create a function that calls what you want and call the function from the event-handlers of your textbox ...:

                  [CODE=javascript]function do_onfocus(node ) {
                  // your current code to call
                  node.style.disp lay = 'block';

                  // put the further calls here
                  }
                  [/CODE]
                  later on:

                  [HTML]<input type="text" id="field1" name="field1" onfocus="do_onf ocus(this);">[/HTML]
                  note that i pass the node itself to the function ... it's a little bit more elegant and much shorter :)

                  kind regards

                    Comment

                    • Josh Mitchell
                      New Member
                      • Dec 2007
                      • 5
                      #6
                      Thank you both! It is much appreciated.
                      Josh

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5388
                          #7
                          aaargh ... sorry for misguiding you :) ... this is the textbox of course and you should use the document.getEle mentById('usern ote') to set the display property but you may use this for the highlighting of the inputbox ...

                          kind regards

                            Comment

                            Previous template Next
                            Working...