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

Question

The following let's me handle a form's submit action with Javascript. 下面让我用Javascript处理表单的Submit操作。

When the form is submitted, I'd like to be able to hide it, then reuse it later. 提交表单后，我希望能够将其隐藏，然后稍后再使用。 Unfortunately, this code has some kind of state that prevents the submit action being executed more than once. 不幸的是，此代码具有某种状态，导致提交操作无法执行一次以上。

How can I reset the magic hidden state? 如何重置魔术隐藏状态？

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

As @durbnpoisn suggested: 正如@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 个解决方案

解决方案1
0 已采纳 2015-10-19 21:12:33

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-19 21:12:33

解决方案1
0 已采纳 2015-10-19 21:12:33