javascript - 使用 Ajax/Jquery 成功提交后如何隐藏表单

Question

您好，我有一个 html 表单，它通过 php 和 Ajax 进行验证。成功将所有数据插入数据库后，它会在 html 表单上显示成功消息。但是现在我想在显示成功消息时隐藏 hitml 表单。以下是我的 Ajax 代码..

<script>
$(document).ready(function() {  
    // validate signup form on keyup and submit
    $("#form1").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            //async: false,
            data: $(form).serialize(),
            beforeSend : function (){
              $('input[type=submit]').attr('disabled', false); 
            },
            success: function(response) {
            $('#info1').html(response);
            $(form).find('#form1').hide();

            //return false;

            setTimeout(function() {
            $('input[type=submit]').attr('disabled', false); 
            location.reload();
            }, 5000 );  
            }            
        });
    },

        rules: {
            title: "required",
            firstname: "required",
            lastname: "required",
            company: "required",
            position: "required",           

            password: {
                required: true,
                minlength: 8
            },
             email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "checkEmail.php",
                        type: "post"
                     }
                },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            terms: "required"
        },
        messages: {
            title : "Required",
            firstname: "Required",
            lastname: "Required",
            position: "Required",
            company: "Required",

            password: {
                required: "Required",
                minlength: "password must be at least 8 characters long"
            },
              email: {
                    required: "Please Enter Email!",
                    email: "This is not a valid email!",
                    remote: "Email already in use!"
                },
            terms: "Required"
        }
    });


});
</script>

我正在使用这段代码来隐藏 html 表单，但它没有隐藏。

 $(form).find('#form1').hide();

HTML 表单

<div id="info1">
</div>
<form id="form1" method="post" action="<?php echo htmlspecialchars("regProcess.php") ?>">
<table width="100%" border="0" cellspacing="10" cellpadding="0">
  </tr>
  <tr>
    <td>First Name</td>
    <td><input type="text" name="firstname" value="<?php if(isset($_POST['fname'])) echo $_POST['fname']; ?>" class="tr" placeholder="First Name"/></td>
  </tr>
  <!--more field-->
  <tr>
    <td></td>
    <td><input type="submit" name="submit" id="submit" value="Register" class="submit_button"/></td>
  </tr>
</table>  

Answer 1

不需要.find()，改成:

$(form).hide();

变量 form 是您的表单对象，因此您可以简单地添加一个 jQuery 包装器并调用 .hide()。通过使用 .find()，您要求 jQuery 在您的表单中寻找另一个表单，这是不正确的。