如何使表单在单击提交时消失？

Question

好的，我正在制作一个网站，你可以制作你自己的数字卡，所以在主HTML中我有介绍，然后他们点击make卡和320 they 480 up框打开选项，以表单格式显示背景应该是什么颜色等等。现在，在完成此操作并单击底部的按钮后，我希望表单不可见，并在同一个窗口中创建卡片，但我无法完成代码工作，我使用了for循环：

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

工作完美，但我不认为这将有助于我试图隐藏我的形式的能见度在我的新窗口。有什么建议？

Answer 1

使用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>

​

Answer 2

在表单开始时给表单一个类( HTML)

  <div class ="form-hide">

在JQuery中

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