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

Posted 2023-05-07

【中文标题】当 innerHTML 时，表单值在上一页丢失

【英文标题】：Form values lost on Previous page when innerHTML

【发布时间】：2017-02-20 08:12:15

【问题描述】：

我得到了一个使用 .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>';

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

提前致谢！

【问题讨论】：

你期望表单的内容是什么？

提交前我在表单中输入的内容。 Screen1 : enter valuesScreen2 : submitScreen3 : go back to previous page

为什么不使用隐藏输入来填充值，每次加载页面时，它都会使用相同的 .innerHTML 加载测试

【参考方案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>';

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

【讨论】：

感谢您的回答！我使用 innerHTML 来更改页面而不重新加载整个页面。 （菜单/页脚未重新加载）所以我可以在页面更改之间/之后继续播放音乐。因此，我无法在脚本显示表单之前设置隐藏的输入 html。 （表单在通过脚本显示的页面上）

我仍然可以使用你的方式在我网站的所有页面上设置隐藏输入，但我认为可以有另一种方式

是的，如果它对你有用，你可以给它作为答案！！，谢谢！！