Ajax, jquery form plugin won't work_问答_开发者

开发者 https://www.devze.com 2022-12-21 04:14 出处：网络

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 i

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="ht开发者_如何学Pythontp://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>'; 
?>

You don't use the options variable anywhere, you only define it.

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