提交后隐藏表单

Question

在使用Jquery按下提交按钮后，我试图隐藏表单。

到目前为止，我已经导入了Jquery库。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  

尝试使用“form -field”类隐藏表单。这个类包含整个表单。

​

试图像这样隐藏它：

 <?php if (isset($_POST['process']) && ($_POST['process'] == 1)): ?>
<script type="text/Javascript">
    $('#form-fields').hide(); 
</script>

这似乎不起作用。任何帮助都将不胜感激。

Answer 1

您需要使用提交事件处理程序隐藏表单，并且需要删除PHP <?php if (isset($_POST['process']) && ($_POST['process'] == 1)): ?>，因为它在服务器端运行

下面发生的事情是，我们注册了一个事件处理程序，该处理程序将在表单提交时调用，并且在该事件处理程序中表单是隐藏的

<script type="text/Javascript">
    $('#form-fields').submit(function(){
        $(this).hide(); 
    })
</script>

Answer 2

如果表单在单击提交后将用户发送到同一页面，那么使用php进行隐藏可能是最容易的。将此代码添加到文件的顶部：

<?php $submitPressed = isset($_POST['process'] && $_POST['process'] == 1; ?>

然后，您可以将想要隐藏在以下标记中的任何内容包装起来：

<?php if (!$submitPressed): ?>
<!-- form goes here -->
<?php endif; ?>

请注意，这只会在通知服务器后隐藏表单；按下提交后可能会有很小的延迟。

否则，您将需要使用一些绑定到提交事件的jQuery。

Answer 3

$('form-fields').submit(function(){
    var $this = $(this); // so we can use in ajax callback
    $.ajax({
        url: '/',
        data: $(this).serialize(),
        success: function(data){
            if(data == true){
               $this.hide(); //hide form if we got a true to return
            }
        }
    });
    return false; //stop default form submit
});

同一页。

<?php 
if(isset($_POST['process']) && ($_POST['process'] == 1)):
    // do whatever processing
    return true; //at the end so we can compare in ajax
endif;     
?>