Java Reference
In-Depth Information
} else {
alert("We're sorry, but " + response.searchTerm +
" is not available.");
}
}
$("usernameAvailability").observe("click", checkUsername);
$("emailAvailability").observe("click", checkEmail);
</script>
</body>
</html>
Save this as
ch17 _ example4.html
in your web server's root directory, because this file must be hosted
and test out the form.
This page works exactly like the previous versions. Let's start examining this version with the
checkUsername()
function. As you know, this function is responsible for gathering the user input and
sending it to the server.
To get the user's input, you retrieve the appropriate
<input/>
element and get its value:
function checkUsername(e) {
e.preventDefault();
var userValue = $("username").value;
You could use the native
document.getElementById()
method to retrieve the
<input/>
element, but
Prototype's
$()
function is much easier to type. It returns an extended
Element
object, but you use the
standard
value
property to retrieve the element's value.
Next, you check the user input to ensure you have workable data:
if (!userValue) {
alert("Please enter a user name to check!");
return;
}
If the function makes it past this
if
statement, you need to assemble the
options
object that you pass
to the
Ajax.Request()
constructor:
var options = {
method: "get",
onSuccess: handleResponse,
parameters: {
username: userValue
}
};
This
options
object has the required
method
and
onSuccess
properties, and you also include the
parameters—setting
username
to the value obtained from the form.
