Question

以下是让我用Javascript处理表单的提交操作。

提交表单时，我希望能够隐藏它，然后再重复使用。不幸的是，这段代码有某种状态阻止了多次执行提交操作。

如何重置魔法隐藏状态？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<form action="" method="post" onsubmit="console.log('Submitted'); return false;">
    Your Name <br/>
    <input type="text" name="name" id="name" />
    <br/>
    <input type="submit" id="submit" value="Submit" />
</form>


</body>
</html>

Answer 1

正如@durbnpoisn所说：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script>
       function myFunction(container) {
            console.log('myFunction');
            var inputs = container.getElementsByTagName("input");
            for(i = 0;i < inputs.length; i++) {
                console.log(i+ ": "+inputs[i].outerHTML);
            }
            container.style.visibility = "hidden";
            return false;
        };

       function reset() {
            form1container.style.visibility = "visible";
            form2container.style.visibility = "visible";
            return false;
       };

    </script>
</head>
<body>


<div id="form1container">
    <form action="" method="" onsubmit="">
        Your Name <br/>
        <input type="text" name="name" id="name1"/>
        <input id="submitButton1" onclick="myFunction(form1container, form1container.form);" type="button"
               value="Submit">
    </form>
</div>

<div id="form2container">
    <form action="" method="" onsubmit="">
        Your Name <br/>
        <input type="text" name="name"/>
        <input id="submitButton2" onclick="myFunction(form2container);" type="button"
               value="Submit">
    </form>
</div>

<input id="button3" onclick="reset();" type="button" value="Reveal">


</body>
</html>

如何在单页面应用程序中重用表单

1 个答案: