www.webdeveloper.com
Results 1 to 2 of 2

Thread: JavaScript Styling of DIV

  1. #1
    Join Date
    Oct 2012
    Posts
    16

    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:
    <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>
    Last edited by mikex2321; 11-25-2012 at 12:03 PM.

  2. #2
    Join Date
    Jan 2010
    Posts
    79
    Hi bud

    This should help you out with what you want, but if it was me I would change the className rather than changing the background colour but I don’t want to butcher your code too much.

    I have added the argument id to your changeBackground function which is the id of the element you want to change the background colour of

    Code:
    function changeBackground(id)
    {
    	document.getElementById(id).style.backgroundColor="#FFFFe0";	
    }
    function checkBackground(id,val)
    {
    		if (val=="")
    			{    
    			document.getElementById(id).style.backgroundColor="#ffaaaa";
    			}	
    		else
    			{ 
    			document.getElementById(id).style.backgroundColor="#e6e8e9";	
    			}
    
    }
    And I have added the arguments id and val to your checkBackground function the id is the id of the element you want to change the background colour of and the val is the value of the input element

    Code:
    <input type="text" name="firstNameInput" onfocus="changeBackground('name1')" onblur="checkBackground('name1',this.value)">
    
    <input type="text" name="surNameInput" onfocus="changeBackground('name2')" onblur="checkBackground('name2',this.value)">
    Hope this helps

    V

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles