Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

JavaScript function required for form onfocus and onblur

Posted on 2016-11-21
2
Medium Priority
?
87 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 83

Accepted Solution

by:
leakim971 earned 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

876 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