Question

你好我有一个html表单，由php用Ajax验证。成功将所有数据插入db后，它会在html表单上显示一条Successfull消息。但是现在我想在显示成功消息时隐藏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在表单中查找另一个表单，这是不对的。

Answer 2

试试这个..

$("#form1").hide();

找不到隐藏..

您还可以使用 CSS 样式属性..

document.getElementById('form1').style.display = 'none';

Answer 3

试，

$("#form1").css("display","none");

Answer 4

$.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);
        $('#form1').hide();

        //return false;

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

Answer 5

从ajax调用获得响应后，只需使用$(from).hide();代替$(form).find('#form1').hide();，您的现有表单就会隐藏。

Answer 6

直接做$('#form1').hide();。这应该工作。只要小心，当页面在5000毫秒内重新加载时它将再次可见。如果那不起作用，那么必定会有其他事情发生，因为你在那里的工作应该有效。

Answer 7

您尝试查找的表单对象和＃form1是相同的元素，您必须使用：

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

或尝试：

$(form).hide();

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

7 个答案: