Need Some Javascript/Ajax Help
The code below does ALMOST what I want it to do.
But I need to make a change and I don't know enough about Javascript to make it happen.
Currently the form passes the value of the form field User_Name to a function that passes the value to a php script. That all works. But I need to make these changes:
The form field User_Name will be changed to First_Name. City will remain the same.
When the user clicks the Check It button (which really does nothing more than activate the blur event for the City field in the function at the top of the page, I want the script to create the variable called User_Name.
The value of User_Name will be First_Name.'.'.City.
So. for example Lisa.Tampa
Then the function will pass User_Name to check.php as it does now.
If the value of City = '-- Select Location --', when the button is clicked, an alert should fire saying "Please Select City" and not process the function call.
Can anyone help me solve this?
Thanks,
- Lisa
But I need to make a change and I don't know enough about Javascript to make it happen.
Currently the form passes the value of the form field User_Name to a function that passes the value to a php script. That all works. But I need to make these changes:
The form field User_Name will be changed to First_Name. City will remain the same.
When the user clicks the Check It button (which really does nothing more than activate the blur event for the City field in the function at the top of the page, I want the script to create the variable called User_Name.
The value of User_Name will be First_Name.'.'.City.
So. for example Lisa.Tampa
Then the function will pass User_Name to check.php as it does now.
If the value of City = '-- Select Location --', when the button is clicked, an alert should fire saying "Please Select City" and not process the function call.
Can anyone help me solve this?
Thanks,
- Lisa
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=iso-8859-1" />
<title>Ajax User_Name Checker - Using JQuery</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#User_NameLoading').hide();
$('#City').blur(function(){
$('#User_NameLoading').show();
$.post("check.php", {
User_Name: $('#User_Name').val()
}, function(response){
$('#User_NameResult').fadeOut();
setTimeout("finishAjax('User_NameResult', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#User_NameLoading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
} //finishAjax
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>Ajax User_Name Check </h1>
<label for="User_Name">User Name :</label>
<input type="text" name="User_Name" id="User_Name" />
<select name="City" size="1" id="City">
<option>-- Select Location --</option>
<option value="Boston">Boston</option>
<option value="Tampa">Tampa</option>
</select>
<input type="button" name="Button" value="Check It" />
<span id="User_NameLoading"><img src="indicator.gif" alt="Ajax Indicator" /></span>
<span id="User_NameResult"></span></h1>
<hr />
</body>
</html>
-- Lisa G