使特定表单在具有多个表单的页面上不可见答案

【问题标题】：Making a specific form invisible on page with multiple forms使特定表单在具有多个表单的页面上不可见
【发布时间】：2016-11-04 16:35:45
【问题描述】：

我在一个页面上有多个表单。每个表单都有一个提交按钮。

当我在表单上单击提交时，它应该变得不可见。尚未提交的表格应保持可见。

我不想在提交每个表单时刷新页面。

我正在使用 Node.js、Express.js 和 mongodb。

【问题讨论】：

使用...浏览器端JavaScript..document.getElementById("MyForm").style.display = "none";
简单，你可以这样做Angular ot jquery

标签： javascript html node.js forms mongodb

【解决方案1】：

document.querySelectorAll('[data-form]').forEach(function(el) {
    el.addEventListener('submit', function(e) {
      e.preventDefault()
      //do some ajax if needed
      e.currentTarget.remove()
    })
})

我已经为你创建了一个示例小提琴。

https://jsfiddle.net/aw9aL8mf/

【讨论】：

我相信您展示的是客户端脚本。提交后如何将表单内容保存到 mongo db？谢谢。
您不能只从服务器端执行此操作而无需刷新页面。是不可能的。您无法在 Express.js 中处理浏览器点击事件，并且您无法在没有客户端 js 的情况下从服务器端重新渲染页面。
好的。目前，每次提交表单时我都会重新呈现页面。但是，当我重新加载页面时，我在删除提交的表单时遇到了问题。您对此类问题有什么建议吗？谢谢。
当然，首先，您需要一个模板引擎将数据从控制器发送到模板。 (Handlebars)。在一个非常基本的示例中，您应该在 mongo 中的每个表单中都有一个名为 shouldRender 的属性。默认情况下为 true，如果 from 已发布，则将其设置为 false。在模板中使用这个变量{{#if shouldRender}}
...
{{/if}}希望你理解，如果不理解，请随时提问。