Как повторно использовать форму в одностраничном приложении

Следующее позвольте мне обработать действие отправки формы с помощью 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

Как повторно использовать форму в одностраничном приложении

ответ

Смежные вопросы