如何在單個頁面應用程序中重用表單

以下讓我們使用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

如何在單個頁面應用程序中重用表單

回答

相關問題