<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Josef Richter &#187; jQuery</title>
	<atom:link href="http://www.josefrichter.com/blog/category/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.josefrichter.com/blog</link>
	<description>blogging about the world around</description>
	<lastBuildDate>Sun, 25 Jul 2010 17:20:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Clear and re-fill form fields using jQuery</title>
		<link>http://www.josefrichter.com/blog/clear-and-re-fill-form-fields-using-jquery/</link>
		<comments>http://www.josefrichter.com/blog/clear-and-re-fill-form-fields-using-jquery/#comments</comments>
		<pubDate>Tue, 16 Jun 2009 22:36:09 +0000</pubDate>
		<dc:creator>Josef Richter</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[user interface]]></category>

		<guid isPermaLink="false">http://www.josefrichter.com/blog/?p=209</guid>
		<description><![CDATA[This piece of code makes form fields more intelligent and usable. It clears the field on focus and if nothing is filled-in, it puts back the default value. There is a single line function MooTools for this, but I used jQuery elsewhere on the web, so I needed jQuery solution. But couldn&#8217;t find any good [...]]]></description>
			<content:encoded><![CDATA[<p>This piece of code makes form fields more intelligent and usable. It clears the field on focus and if nothing is filled-in, it puts back the default value. There is a <a href="http://mootools.net/docs/more/Forms/OverText">single line function MooTools</a></p>
<p>for this, but I used jQuery elsewhere on the web, so I needed jQuery solution. But couldn&#8217;t find any good one, so I put together my own.</p>
<p>The form can be seen in action at <a href="http://www.fofrem.info/objednat.html">http://www.fofrem.info/objednat.html</a></p>
<p>Usage:</p>
<p>Just put the default text into alt attribute of the text field, like this:</p>
<div style="font-size: 10px;">
<pre class="brush: html; gutter: false; auto-links: false; tab-size: 2;" >
<input class="text" alt="E-mail" name="email" type="text" />
</pre>
</div>
<p>For some reason, I couldn&#8217;t make it work by using value attribute. The <code>if($(this).val()==$(this).attr("value"))</code> part doesn&#8217;t work. Anyone knows why?</p>
<p>The script will do the rest. It is pretty obvious from the code how it works, even if you know little about jQuery.</p>
<div style="font-size: 10px;">
<pre class="brush: javascript; gutter: false; auto-links: false; font-size: 5%; tab-size: 2;">
<script src="javascript/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
			$(document).ready(function(){

				// set all input.text default value according to alt attribute
				$("input.text").each(function(){
					$(this).val($(this).attr("alt"));
				});

				// clear input.text on focus, if still in default
				$("input.text").focus(function() {

					if($(this).val()==$(this).attr("alt")) {
						$(this).val("");
					}
				});

				// if field is empty afterward, add text again
				$("input.text").blur(function() {
					if($(this).val()=="") {
						$(this).val($(this).attr("alt"));
					}
				});

			});

</script>
</pre>
</div>
<p>Please don&#8217;t hesitate to leave a comment if you need more details. Enjoy!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.josefrichter.com/blog/clear-and-re-fill-form-fields-using-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
