单击提交后如何使表单消失?

时间:2016-03-08 02:21:49

标签: javascript html5 forms function addeventlistener

好吧,我正在制作一个网站,你可以制作自己的数字卡,所以在主HTML中我有介绍,然后他们点击制作卡片和一个320px×480px的盒子打开了表格格式的选项背景应该是什么颜色等等......现在他们这样做之后点击底部的按钮我希望表单不可见并在同一个窗口中创建卡但是我无法让我的代码工作我使用了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>

工作得很完美,但我认为这不会有助于我在新窗口中隐藏表单的可见性。一些建议?

2 个答案:

答案 0 :(得分:2)

在表格开头

给表单一个类(用HTML格式)
  $('#submit').click(function(){
     $('.form-hide').hide();
   });

在JQuery中

{{1}}

答案 1 :(得分: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>