#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    16
    Rep Power
    0

    JavaScript Styling of DIV


    Hi guys,

    Having a little trouble with using Javascript to style a div "on the fly". I'm currently creating a sign up membership form in which I'd like the input text box's holding DIV to change colour depending on if the text box has been filled in. For example, I have written some Javascript code that will change the surrounding div to a yellow colour when the text box is 'onfocus', I have then made the JS check to see if the text box has been filled when 'onblur'. It then changes to red if nothing has been typed in the box or back to the default colour if something has. Happy! But...

    I'd like to use this piece of JS code on all of the input text fields in my form which would mean I'd have to re-type and adapt the code (adding IDs name1, name2, name3 etc) to the various different div IDs. Is there a way to use the 'this.style' trick to use the same code on all the divs without having to re-type (and make my JS file unnecessarily big)?

    Many thanks


    The JavaScript Code:
    Code:
    function changeBackground()
    {
    	document.getElementById("name1").style.background="#FFFFe0";	
    }
    
    function checkBackground()
    {
    	var x=document.forms["applicationForm"]["firstNameInput"].value;
    		
    		if (x=="") 
      {
      document.getElementById("name1").style.background="#ffaaaa";	
      }
    				
    		else 
      {
      document.getElementById("name1").style.background="#e6e8e9";	
      }		
    		
    }
    HTML Code:
    Code:
    <form id="applicationForm" action="appForm.php" method="post">
                        
                        
                        
                   <div id="name1"  class="inputHolder">
        
                           <div class="formTitle">
                              <p>First Name</p><p style="color:red;">&nbsp;*</p>
                                                     
                            </div><!--formTitle-->
                                    
                            <div class="formInput">
                                <input type="text" name="firstNameInput" value="" onfocus="changeBackground()" onblur="checkBackground()">
                                                     
                            </div><!--formInput-->
                           
                             </div><!--inputHolder-->
    
    
    
                    <div id="name2"  class="inputHolder">
        
                           <div class="formTitle">
                              <p>Surname</p><p style="color:red;">&nbsp;*</p>
                                                     
                            </div><!--formTitle-->
                                    
                            <div class="formInput">
                                <input type="text" name="surNameInput" value="" onfocus="changeBackground()" onblur="checkBackground()">
                                                     
                            </div><!--formInput-->
                           
                             </div><!--inputHolder-->
    
                             </form>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    The first thing to do is to clean up your markup (HTML).
    Code:
    <div class="formTitle">
      <p>First Name</p><p style="color:red;">&nbsp;*</p>
    </div><!--formTitle-->
    would be more usable and accessible if it was changed to this:
    Code:
    <div class="formTitle">
      <label for="name1">First Name<abbr class="required" title="(required)">&nbsp;*</abbr></label>
    </div><!--formTitle-->
    Then this:
    Code:
    <input type="text" name="firstNameInput" value="" onfocus="changeBackground()" onblur="checkBackground()">
    would become
    Code:
    <input type="text" name="firstNameInput" id="name1">
    (There's no need to specify the value attribute when it's just an empty string.) Additionally, the ID would be removed from the <div>, because it's needed on the form control for the label's for attribute to refer to.

    Would it be alright with you if I posted your code on my site as part of an example to fully answer your question?

    However for now, I'll tell you the quick and very dirty solution which would be to still use the inline event handlers but pass a reference to the element in the call to the functions:
    Code:
    onfocus="changeBackground(this)" onblur="checkBackground(this)"
    then you can fairly simply do this:
    Code:
    function changeBackground(el)
    {
    	el.parentNode.parentNode.style.background="#FFFFe0";	
    }
    
    function checkBackground(el)
    {
    	var x=el.value;
    		
    		if (x=="") 
      {
      el.parentNode.parentNode.style.background="#ffaaaa";	
      }
    				
    		else 
      {
      el.parentNode.parentNode.style.background="#e6e8e9";	
      }		
    		
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo