当 innerHTML 时，表单值在上一页丢失

Question

我得到了一个使用 .innerHTML 显示的表单

当我提交并返回表单页面时，表单是空的。

为什么？

这是一个 jsfiddle

https://jsfiddle.net/ft5bjhqq/3/

（在表单中输入值，提交，返回查看区别Screen3。

document.getElementById('test').innerHTML = ''+
  '<form method="post" action="azerty.php">'+
    '<input type="text"> '+
    '<input type="submit" value="OK">'+
  '</form>';

是否有一种简单的解决方案可以让第二种形式复制第一种形式的行为？

提前致谢！

Answer 1

我不知道这是不是最好的方法，但它会解决你的问题。

编辑你的小提琴，检查

Fiddle

HTML

<form method="post" onsubmit="copValue()" action="azerty.php">
  <input type="text">
  <input type="submit" value="OK">
</form>

<br>

innerhtml
<div id="test" > </div>
<input type="hidden" id="iAmHidden">

JS

var value=document.getElementById('iAmHidden').value;


  function copValue () {
    document.getElementById('iAmHidden').value = document.getElementById('formText').value;
    return true;
  }

 document.getElementById('test').innerHTML = ''+
  '<form method="post" onsubmit="copValue()" action="azerty.php">'+
    '<input type="text" id="formText" value="'+value+'"> '+
    '<input type="submit" value="OK">'+
  '</form>';

希望它能解决你的问题！！