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

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

来源

2015-10-19 user48956

给您的表单的名称和编号。把它包裹在一个你可以隐藏的DIV中。使用Javascript来处理它的行为。 – durbnpoisn

由于@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>

来源

2015-10-19 21:12:33 user48956

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

回答

相关问题