Solved

JavaScript function required for form onfocus and onblur

Posted on 2016-11-21
2
45 Views
Last Modified: 2016-11-22
I have a form as below, onfocus and  onblur where previously working but not anymore.

Can anyone provide a JavaScript function to do the same thing and should I try loading at the bottom of the page.

Thanks in advance


<form action="members-search" method="GET">
<br /> 
<div id="get_my_location" class="ui-widget"><label for="suburb">Where do you need a Service Professional?</label><br /> 

<input type="text" value="Enter Post Code or Suburb" name="suburb" id="suburb" 

onfocus="if(this.value == 'Enter Post Code or Suburb'){ this.value = ''; }"

onblur="if(this.value == ''){ this.value = 'Enter Post Code or Suburb'; }"> 

<br />
<input id="set_suburb" type="submit" value="Get Started" /></div><br /> 
</form>

Open in new window

0
Comment
Question by:sabecs
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41896803
just use the HTML5 placeholder attribute : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder
test page : https://jsfiddle.net/3716ym9j/2/

else with javascript :
https://jsfiddle.net/3716ym9j/1/

<form action="members-search" method="GET">
  <br /> 
  <div id="get_my_location" class="ui-widget"><label for="suburb">Where do you need a Service Professional?</label><br /> 
  <input type="text" value="Enter Post Code or Suburb" name="suburb" id="suburb" /> 
  <br />
  <input id="set_suburb" type="submit" value="Get Started" /></div><br /> 
</form>
<script>
	var on = function(event, id, code) {
  	if(document.getElementById(id).addEventListener)
    	document.getElementById(id).addEventListener(event, code, false);
    else
    	document.getElementById(id).attachEvent("on"+event, code);
  }
	on("focus", "suburb", function() {
  	if(this.value == 'Enter Post Code or Suburb')
    	this.value = '';
  });
	on("blur", "suburb", function() {
  	if(this.value == '')
    	this.value = 'Enter Post Code or Suburb';
  });
</script>

Open in new window

1
 

Author Closing Comment

by:sabecs
ID: 41898328
Thanks, very much appreciated, I never new about the placeholder HTML5 option, that is perfect.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question