0

我有生成表单的 PHP 代码。一旦用户单击提交按钮，我希望能够使用 Ajax 重新加载表单。这应该重新加载用户刚刚输入的表单。我有这个代码：

PHP：

<?php
$html = <<<HTML
<form id="myform" method="post">  
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
    <br>
    <input type="submit" name="submit" value="Submit"> 
</form>
HTML;

echo $html;
echo rand(1, 10);
?>

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
    <title>JQuery Form Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            debug: false,
            rules: {
                name: "required",
            },
            messages: {
                name: "Please fill in answer.",
            },
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
    </script>
    <style>
    label.error { width: 250px; display: inline; color: red;}
    </style>
</head>
<body>
<div id="results">
<?php require_once('process.php'); ?>
</div>
</body>
</html>

不幸的是，整个页面将在使用一次后重新加载。我发现解决此问题的唯一方法是将其放在导致出现两种形式<?php require_once('process.php'); ?>的外部。<div id="results">有没有什么办法解决这一问题？另外，我使用这个 jquery 插件：http: //jqueryvalidation.org/

4

2 回答 2

1

在用您从 PHP 后端获得的新表单替换它时，表单失去了它的 EventListener。

因此，您要么必须重新初始化插件（$("#myform").validate({});在从 AJAX 帖子中获取新表单后再次调用），要么将事件侦听器设置为父 DOM 元素（例如，将表单包装在 a 中<div id="form-container">..</div>）并替换容器的内容.

在您的 JS 中尝试以下操作：

$("#results").on('submit', '#myform', function(e) {

   e.preventDefault();

   $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
        },
        messages: {
            name: "Please fill in answer.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });

    return false;

  });

编辑： 刚刚看到您使用的是 jQuery 1.4.2。为了能够使用on()，您必须至少包含 jQuery 1.7，或者使用live()：

$("#results").live('#myform', 'submit', function(e) { //the rest of your stuff });
于 2013-07-29T14:38:45.143 回答
0

使用 jqueryForm 插件。在此之后，您可以使用 ajaxSubmit。 Jquery 表单插件

于 2013-07-29T14:25:46.227 回答