Question

What I want to do is use the JS functions for additional input fields in the form. For instance, I want to have a LastName and LastNameLabel, etc. I am hoping I can adjust the functions in some way to find pairs Aaa and AaaLabel so that every field can have the same effect. My code is below. Thanks!

Update: I am now just trying to get the ‘Original Value’ to show the name of the element ID with a space between a lowercase letter followed by an uppercase letter. For example, if the element ID is LastName, I want the innerHTML to be “Last Name”. Thanks for all your help!!

<script type="text/javascript">
  function LabelOnClick(el) { var associatedFieldId = el.getAttribute('for');
                              if (associatedFieldId)
                                 document.getElementById(associatedFieldId).focus();
                            }
  function FieldOnFocus(el) { document.getElementById(el.id + 'Label').className='FieldFocus';
                            }
  function FieldOnKeyPress(el) { if (event.keyCode!=9 && event.keyCode!=8) { document.getElementById(el.id + 'Label').innerHTML='';
                                                                           }
                               }
  function FieldOnKeyDown(el) { el.style.width = Math.max(30,el.value.length*10)+'px';
                            }

  function FieldOnKeyUp(el) { el.value=el.value.substring(0,1).toUpperCase()+el.value.substring(1,el.value.length);
                              if (el.value=='') document.getElementById(el.id + 'Label').innerHTML='Original Value';

                            }
  function FieldOnBlur(el) { if (el.value=='') { document.getElementById(el.id + 'Label').className='FieldBlur';
                                                 document.getElementById(el.id + 'Label').innerHTML='Original Value';
                                               }
                           }
</script>

<style>
  .InputField { border: 1px dotted lightgray;
                border-bottom:1px solid black;
                min-width: 30px;
                padding: 5px;
                font-family:tahoma, arial, sans-serif;
                font-size: 14px;
  }
  .FieldBlur { color: gray;
               position: absolute;
               padding: 6px;
               padding-left: 8px;
               padding-top: 8px;
               font-family: tahoma, arial, sans-serif;
               font-size: 14px;
  }
  .FieldFocus { color: lightgray;
                position: absolute;
                padding: 6px;
                padding-left: 8px;
                padding-top: 8px;
                font-family: tahoma, arial, sans-serif;
                font-size: 14px;
  }
  .FieldInput { color: black;
                position: absolute;
                padding: 6px;
                padding-left: 8px;
                padding-top: 8px;
                font-family: tahoma, arial, sans-serif;
                font-size: 14px;
  }
</style>

<label id="FirstNameLabel" for="FirstName" class="FieldBlur"
       onclick="LabelOnClick(this)">First Name
</label>

<input id="FirstName" class="InputField" type="text" name="FirstName" maxlength="25"
       onfocus="FieldOnFocus(this)"
       onkeypress="FieldOnKeyPress(this)"
       onkeydown="FieldOnKeyDown(this)"
       onkeyup="FieldOnKeyUp(this)"
       onblur="FieldOnBlur(this)"/>

</body>

Answer 1

OK, ignoring the fact that inline event handlers are generally frowned upon these days, try something like the following, in which the onclick and onfocus in your HTML pass this through to the associated functions such that those functions have a reference to the element that the event was triggered on so that they can figure out what the related field or label is:

<script>

function LabelOnClick(el) {
   var associatedFieldId = el.getAttribute("for");
   if (associatedFieldId)
      document.getElementById(associatedFieldId).focus();
}

function FieldOnFocus(el) {
   document.getElementById(el.id + "Label").className='FieldFocus';
}

</script>

<label id="FirstNameLabel" for="FirstName" class="FieldBlur"
       onclick="LabelOnClick(this)">First Name  </label>

<input id="FirstName" ... onfocus="FieldOnFocus(this)" ... />

I’ll leave doing something similar for the other events as an exercise for the reader…

EDIT to match your updated question:

If this:

document.getElementById(el.id + 'Label').innerHTML='Original Value'; 

is the part you’re talking about where you want to replace 'Original Value' with the elements ID with spaces added then at that point el.id holds “LastName” so if you use a regex like in the following line you should get “Last Name”:

document.getElementById(el.id + 'Label').innerHTML
                      = el.id.replace(/([^A-Z])([A-Z])/g, "$1 $2");