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

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

javascript html forms

Javascript 如何在单页应用程序中重用表单,javascript,html,forms,Javascript,Html,Forms,下面让我们使用Javascript处理表单的提交操作提交表单时，我希望能够隐藏它，然后在以后重用它。不幸的是，这段代码有某种状态，阻止提交操作被多次执行如何重置魔法隐藏状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form

下面让我们使用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>


您的名字

正如@durbnpoison所建议的：

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


函数myFunction（容器）{
log（'myFunction'）；
var inputs=container.getElementsByTagName（“输入”）；
对于（i=0；i
您的名字

为表单提供名称和id。将其包装在可以隐藏的DIV中。使用Javascript来处理它的行为。