javascript - 当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 ，检查

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>';

希望能解决您的问题!!