Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 5 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery Form Highlighting

AshleyAshley

Carrying on the theme from yesterday with the jQuery & PHP username availability checker, i’ve got a quick tip to improve the user experience, so the user knows exactly where they are in the filling out complex forms. We could use CSS to do this alone, however it doesn’t work in Internet Explorer. So in order to cater for all browsers we can achieve the same effect with JavaScript.

The HTML

So in the code below we simply have a form input field wrapped in a div with the class ‘input’. The basic logic of how the code works is that when a user clicks inside the input field it triggers an event listener which triggers a function, which adds or removes a class to the parent element in relation to the form input field. Sounds quite complex when you read it but its simple. Lets break it down.

  1. Below we have 3 form input fields
  2. Notice that each form element is wrapped in a div with the same class

  <div class='input'> Name:<br/>
    <input name='Name' type='text'/>
  </div>
  <div class='input'> Email:<br/>
    <input name='Email' type='text'/>
  </div>
  <div class='input'> Town:<br/>
    <input name='Email' type='text'/>
  </div>

The JavaScript

  1. We start with our first function which is in our DOM ready function. This function is run when a user clicks, or tabs into the input field. You can see that all we do is add the class ‘highlight’ to the div class ‘input’
    
    	$('input').focus(function() {
    			$(this)
    				.parent().addClass('highlight')
    		});
    
  2. We do the same with this function but instead of it adding the class highlight we simply remove it.
    
    	$('input').blur(function() {
    			$(this)
    				.parent().removeClass('highlight')
    		});
    

The Complete JavaScript


$(document).ready(function(){
		$('input').focus(function() {
			$(this)
				.parent().addClass('highlight')
		});
		
		$('input').blur(function(){
			$(this)
				.parent().removeClass('highlight')
		});
	
	});

A Sprinkle Of Style


.input {
	padding:6px;
	width:315px;
	border: 1px solid #fff;
}
input {
	border:4px solid #666;
	padding:4px;
	width:300px;
}
.highlight {
	background-color:#FF6;
	border: 1px solid #FC6;
}

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 4
  • ponsfrilus
    Posted on

    ponsfrilus ponsfrilus

    Reply Author

    Nice tut but labels, textarea and submit button are missing.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @ponsfrilus i need to update the labels in the code, I still haven’t got around to that. Completely baffled by the textarea and submit button being missing… works fine for me.


  • Webdeveloper
    Posted on

    Webdeveloper Webdeveloper

    Reply Author

    Nice article! Really like the demo, shows immediately how usefull the highlighting can be!


  • Piotr Sarnacki
    Posted on

    Piotr Sarnacki Piotr Sarnacki

    Reply Author

    Use labels.