提交表单后隐藏表单

Question

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

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

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

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

尝试像下面这样隐藏它：

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

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

- qweqweqwe

---

你的意思是指类别名为 form-fields，还是指id名为 form-fields？如果你真的是指类别名，那么应该写成 $('.form-fields').hide()。 - Kent Skinner

如果你要使用PHP，为什么不直接不渲染它呢？或者如果你需要稍后取消隐藏，可以添加一个类，并使用JavaScript将其删除。 - kalley

有很多原因导致这个无法工作。请发布更多的代码，我们可能能够确定其中一个问题所在。 - user1864610

为什么你不从后端隐藏它呢？只需不输出表单即可。 - epascarello

Answer 1

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

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

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

- Arun P Johny

Answer 2

如果表单在用户点击提交后将其发送到同一页，那么使用php进行隐藏可能是最简单的方法。请在文件顶部添加以下内容：

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

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

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

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

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

- Dan Fox

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;     
?>

- Ohgodwhy

---

“data == true”不是多余的吗？我认为 if (data) { ... } 就可以正常工作了。 - Will M

另外，在提交回调函数中添加一个事件参数，如果您希望该事件传播，请调用event.preventDefault()而不是return false。参见：http://css-tricks.com/return-false-and-prevent-default/。 - Will M

Answer 4

You can add the css property of that element to hidden on click..


$(function(){
 $('form-fields').submit(function(){
     $(this).css("visibility", hidden);
  });
});

- VJPB