Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member UNarmed's Avatar
    Join Date
    Sep 2008
    Posts
    90
    Member #
    17377
    Hey the title pretty much desribed my problem. How would i go about adding a css class to a field when another field is completed?

    I need this for form validation but i honestly dont know where to start =/ Help would be greatly appreciated!

  2.  

  3. #2
    Junior Member
    Join Date
    Feb 2010
    Posts
    1
    Member #
    21062
    Breakdown of script:
    1. When the page is rendered a JavaScript hook is added to the first <input>, on the onblur trigger. It calls the function setFieldClassName.
    2. Inside that function, it checks the length of field1 for being greater than zero. If so, field2 is assigned the CSS class className. If not, it is assigned a blank class (so that if the user deletes what they originally entered, the class will be wiped.)
    Code follows.
    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" xml:lang="en" lang="en">
    <head>
     <title>Adding a class to a field once another field is completed</title>
     <style type="text/css">
      .className
      {
       color: red;
      }
     </style>
    </head>
    <body>
     <form id="testform" action="#">
      <p>Field 1: <input type="text" name="field1" id="field1" class="className" /></p>
      <p>Field 2: <input type="text" name="field2" id="field2" /></p>
      <p><input type="submit" name="submit" value="Submit testForm" /></p>
     </form>
    </body>
     <script type="text/javascript">
      setFieldClassName = function()
      {
       var fieldToValidate = document.getElementById('field1');
       var fieldToChangeClass = document.getElementById('field2');
       if(fieldToValidate.value.length > 0)
       {
        fieldToChangeClass.className = 'className';
       }
       else
       {
        fieldToChangeClass.className = '';
       }
      }
      var inputElements = document.getElementsByTagName('input');
      inputElements[0].onblur = setFieldClassName;
     </script>
    </html>

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    you may want to use a Javascript framework like jQuery for this... it would make your task a lot easier.

    You could do something like this... and it will work for all browsers the same!
    Code:
    <script>
    $(document).ready(function() {
        $("#field1").blur(function() {
            if ($(this).val().length > 0) {
                $("#field2").addClass("className");
            } else {
                $("#field2").removeClass("className");
            }
        });
    });
    </script>

  5. #4
    Member UNarmed's Avatar
    Join Date
    Sep 2008
    Posts
    90
    Member #
    17377
    Hey thanks for the replys i ended up using jQuery =] This plugin got the job done perfectly http://plugins.jquery.com/project/ufvalidator


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:10 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com