title: Need help making JS functions more dynamic
body: <p>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!</p>
  
  <p>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!!</p>
  
  <p></p>
  
  <p>
    
      </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    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 &amp;&amp; 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';
                                                 }
                             }
  &lt;/script&gt;
  
  &lt;style&gt;
    .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;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>
    </p>
  
  <pre><code>&lt;label id="FirstNameLabel" for="FirstName" class="FieldBlur"
         onclick="LabelOnClick(this)"&gt;First Name
  &lt;/label&gt;
  
  &lt;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)"/&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>