How change the contents of a Form field depending of his status with JQuery
This time i have a client that wants to have a form that automaticaly emptes the form fields when a user put focus on one of them, if user writes something, the content of that filed will be the user content, on the other hand if the filed will be empty the contents of the field will be a default message like ( write your name here )… for do it i had use JQuery…
show it ► .. thats the code ..
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Form Test</title> <!– Title of my form –>
<script language=”javascript” type=”text/javascript” src=”http://www.choosepizzi.com/tutorial/jQuery/test_form_jQuery/js/jquery.js”></script> <!– Calls the Jquery library ——->
<script type=”text/javascript”><!– Starts the JQuery code that is invoked when the page is loaded –>
jQuery(document).ready(function($){
$(‘input’).focus(function() {<!– When we put a focus to a field –>
var title = $(this).val();<!– Check the value of the form field –>
var title_orig = $(this).val();
if ($(this).val() == title) { <!– Check if the field contain the original value –>
$(this).val(”);<!– than, if so, we empties the field–>
}
});
$(‘input’).blur(function() {<!– When we put out focus to a field –>
var name= $(this).attr(“name”);<!– Check the Name Value of the form field –>
if (name == ‘Text_1’&& $(this).val() == ”)<!– Check if is the first of the form field and if the field is empty –>
{
$(this).val(‘Write here your first text’);<!– if so we put the default phrase –>
}else if(name == ‘Text_2’&& $(this).val() == ”){<!–Check if is the second of the form field and if the field is empty –>
$(this).val(‘Write here your second text’);<!– if so we put the default phrase –>
}
});
});
</script>
</head>
<body style=”background-color:#333; font-family:Arial, Helvetica, sans-serif; color:#CCC;”><!– we put some style at our page –>
<div id=”form_test” style=” margin:auto; margin-left:-175px; padding-left:50%; margin-top:20%;”>
<form action=”” method=”get” name=”testtest” ><!–our form –>
<input name=”Text_1″ type=”text” value=”Write here your first text” style=”width:350px;” /><!– First Field –>
<br />
<br />
<input name=”Text_2″ type=”text” value=”Write here your second text” style=”width:350px;” /><!– Second Field –>
</form>
</div>
</body>
</html>
That’s all .. show an example Here ►
By By
Pizzi