HTML and CSS Reference
In-Depth Information
CAPTURE THE COMMENT FORM SUBMISSION
When the page is ready bind to the
submit
event of the form.
$
(
function
() {
$
(
'#commentform'
).
submit
(
handleSubmit
);
});
When the form is submitted and the
handleSubmit
function is called the comment data we
want to send to the server is extracted from the form. There are more elegant ways of fetching
the data from the form but this approach clearly shows where we're getting the values from
and the
data
object we are creating.
function
handleSubmit
() {
var
form
=
$
(
this
);
var
data
=
{
"comment_author"
:
form
.
find
(
'#comment_author'
).
val
(),
"email"
:
form
.
find
(
'#email'
).
val
(),
"comment"
:
form
.
find
(
'#comment'
).
val
(),
"comment_post_ID"
:
form
.
find
(
'#comment_post_ID'
).
val
()
};
postComment
(
data
);
return
false
;
}
function
postComment
(
data
) {
// send the data to the server
}
POST THE COMMENT WITH AJAX
Within the
postComment
function make a
POST
request to the server passing the data that
we've retrieved from the form. When the request is made an additional HTTP header will be
sent to identify the request as being an AJAX request. We want to do this so that we can
return a JSON response if it is an AJAX request and maintain our basic functionality if it isn't
(for more information on this see
Detected AJAX events on the Server
). We also define two
15
