Back

Displaying Hints on Form Fields

Description

If you want to display a hint for each of your Form fields you can do so by using the following Javascript snipet.

This example uses the Form's Hint value to display right next to each Form field on focus (whenever the field is clicked on)

For this code to work you need to add it to a Simple Widget below your Form created using the Form Builder.

Code

<script language="Javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(addInputHints);

function addInputHints() {
#foreach($field in $fields)
   #if($UtilMethods.isSet($field.hint))
     document.getElementById("$field.velocityVarName").onfocus = function () {
        document.getElementById("alert$field.velocityVarName").innerHTML="$field.hint";
     }
     document.getElementById("$field.velocityVarName").onblur = function () {
        document.getElementById("alert$field.velocityVarName").innerHTML="";
     }
   #end
#end
}
</script>