使用 JavaScript 提交后如何隐藏表单？

【问题标题】：How can I hide a form after submission with JavaScript?使用 JavaScript 提交后如何隐藏表单？
【发布时间】：2014-10-30 14:08:09
【问题描述】：

所以我有这些表格：

django 模板：

 {% for F in forms %}
    <input type="text" name="name/>
    <input type="number" name="number/>
    <input type="submit" class="button" [onclick="this.disabled=true,this.form.submit(); ??]> #how can I make this work?
 {%endfor%}

模板代码的作用是根据表单的值呈现多个表单> 我希望用户提交表单，然后让表单消失（首选）或至少禁用，以便他们可以重新提交。我该怎么做？

【问题讨论】：

您是通过 ajax 提交表单吗？因为如果不是，那么隐藏它是没有意义的，因为浏览器无论如何都会将用户带到表单提交脚本。
How to disable html button using JavaScript? 的可能重复项
如果提交给自己呢？

标签： javascript django django-templates

【解决方案1】：

如果您在页面上有多个表单并希望使用 JavaScript 处理它们，我建议您使用 jQuery。你可以做这样的事情：

$('input[type="submit"]').click(function() {
    // here comes your logic
    // and the next line removes the corresponding form
    $(this).parents('form').remove();
});

但正如 Marc B 所指出的，您应该通过 Ajax 提交表单。我不知道您打算如何处理用户输入，但如果您想使用 Ajax，那么您可以进行以下操作：

$('form').submit(function() {
    $.ajax({
        // your logic
    });
});

查看 jQuery 的官方文档了解更多详细信息，并根据您的需要调整示例。

编辑：

如果您想阻止表单提交和刷新页面，请将其稍微更改为：

$('form').submit(function(event) {
    $.ajax({
        // your logic
    });
    event.preventDefault();
});

【讨论】：