Ajax, jquery form plugin won't work
Question
I'm trying to use the malsup jquery form plugin and I can't get the simple example to work ( http://jquery.malsup.com/form/#ajaxForm ). I've pasted my code below. What is going wrong? All that happens is I get an alert box that says "Thank you for your comment!". Nothing else happens.
Thanks,
Mark
This is the ajaxtest.html file:
<!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" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
var options = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
function showRequest(formData, jqForm, options) {
alert("calling before sending!");
return true;
}
function showResponse(responseText, statusText, xhr, $form) {
alert("this is the callback post response");
}
</script>
<script>
</script>
</head>
<body>
<form id="myForm" action="form/report.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
<div id="output1"></div>
</form>
</body>
</html>
This is the PHP file:
<?php
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>';
?>
2 answers
solution1
0 2010-02-23 15:15:47
您不会在任何地方使用options变量，而只需定义它。
solution2
0 2010-02-23 15:17:20
You need to pass your "options" object into the ajaxForm call, and set up your success function in that (that is, in the options object). See this page: http://jquery.malsup.com/form/#options-object
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.