单击提交后如何使表单消失？答案

【问题标题】：how to make a form disappear upon clicking submit?单击提交后如何使表单消失？
【发布时间】：2016-06-21 19:56:34
【问题描述】：

好的，所以我正在创建一个网站，您可以在其中制作自己的数字卡片，因此在主 HTML 中我有介绍，然后他们单击制作卡片，然后打开一个 320 像素 x 480 像素的框，其中包含表单格式的选项背景颜色应该是等等......现在他们这样做并单击底部的按钮后，我希望表单不可见并在同一窗口中创建卡片，但我无法让我的代码工作，我使用了循环使用它：

    <script>   
        document.forms[0]['submit'].addEventListener('click', createCard);

        var formTotal = document.forms[0];

        function createCard(){
            for(i = 0; i <= formTotal.length; i++){
                formTotal[i].style.visibility = "hidden";
            }
        }
    </script>

在初始页面中，我在标题中有一个脚本，如下所示：

 function giftCard(){ 
        window.open("cardForm.html","Gift Card","width=320, height=480");
    }

然后在我的html中使用onclick来初始化打开窗口：

<-button onclick="giftCard()">Make Card<-/button>

工作完美，但我认为这对我在新窗口中隐藏表单的可见性没有帮助。有什么建议吗？

【问题讨论】：

我认为你需要更清楚你需要什么。您并没有真正解释新窗口代码如何符合您的要求。与其遍历表单并隐藏每个元素，不如直接隐藏表单本身？或者，将整个表单放在一个 div 中，然后隐藏 div？
在旁注中，您应该在 addEventListener 之前设置您的 createCard() 函数块，以避免出现提示问题。
新窗口是否可以访问您在问题中包含的 JavaScript？
@Don Zacharias 是的，它是新窗口中的 javascript，原始窗口中唯一需要的 javascript 是您好，欢迎点击下方成为您的卡片。然后将 giftCard() 函数传递给该按钮，并打开一个带有表单的新窗口。底部有一个按钮说创建卡片然后我需要隐藏表单我将使用绝对定位来创建卡片卡片很简单它询问您的姓名背景颜色文本颜色（生日快乐“名称” ！），然后是一个复选框，其中包含您可能包含的三个不同图像（心形鸽子和星星）。

标签： javascript html forms function addeventlistener

【解决方案1】：

在表单的开头给表单一个类（在 HTML 中）

  <div class ="form-hide">

在 JQuery 中

  $('#submit').click(function(){
     $('.form-hide').hide();
   });

【讨论】：

这是 jQuery，不是 javascript
我已将标题从 Javascript 更改为 Jquery 。粗心的错误 :-)。我认为现在没有问题。但是代码确实有效。这是我的解释有误。跨度>
我添加了纯JS来完成它。不知道它是否真的回答了这个问题，但至少这个答案是完整的^^

【解决方案2】：

使用onsubmit 为表单绑定事件。

  
document.forms[0].onsubmit = function(event){
  createCard(event);
}
 
function createCard(event){      
  event.target.style.display = "none";
}

<form method="POST">
<input/>
<input/>
<input/>
<input/>
<button type="submit">
 submit
</button>
</form>

【讨论】：

我只使用 Javascript 我不使用 JQuery 但谢谢你的回答我仍然给你一个正确的答案，@MrVaykadji 你的 javascript 代码似乎工作但为什么function() 和 createCard() 中需要的“事件”作为参数。此外，当您在函数 createCard(){ event.target.etc...} 中使用 sn-p 时，目标是指事件元素。在解释了这是他们将此代码转换为 addEventListener 隐藏它的方法之后，对不起，我正在尝试学习所有可能的方法，以便我可以在该领域更加了解。
@MrVaykadji 另一件事是，当我这样做时，它不会像您的示例那样隐藏它，它会清除页面并在中心显示：未收到数据我认为这是因为方法 =邮政”。有没有其他方法可以通过使用visibility =“hidden”甚至style.display =“none”来隐藏表单（尽管我更喜欢visibility =“hidden”版本）。
@NarinderSharma 这个解决方案是纯 JavaScript。我没有在其中使用任何 Jquery。