在后退按钮上重置表单

Question

我在网上搜索过，但找不到任何解决方案。 当我单击“samplepage.php”上的“提交”按钮时，我将页面重定向到“newpage.php”页面。 当用户单击浏览器的后退按钮时，我想重置“samplepage.php”表单值。 现在它保留了所有的文本框值、单选按钮和复选框选择。 如果有任何建议，你能告诉我吗？ 谢谢你的帮助。

这是我的重定向 php 代码。

header ("location:newpage.php);  

Answer 1

当浏览器由于导航而显示窗口的文档时，pageshow 事件被发送到窗口。 这包括： 从同一窗口或选项卡中的另一个页面导航到该页面

浏览器后退按钮上的示例页面显示事件和重置表单

<script>
$(window).bind("pageshow", function() {
    $('#yourformid').trigger("reset");

});
</script>

Answer 2

您无法使用服务器端代码观看浏览器的后退按钮。

您需要 Javascript 和 jQuery，并且对“popstate”和“pushstate”领域有一些了解

Answer 3

这与浏览器有关。

您可以在最后一刻（提交之前）清空您的输入并将值放在一些隐藏字段中...

Answer 4

如果你真的想这样做，你必须在页面加载时清除它。 如果您有多个控件，您将需要遍历表单以清除它。 假设它们都是物品......

var elems = document.getElementsByTagName("input")
for (var i=0;i<elems.length;i++)
{
    elems[i].value = '';
}

它获取所有输入控件，遍历它们并将它们的值设置为空白。 您可以通过根据类型设置 .checked 将其扩展为适用于单选按钮/复选框。

不过，我在这个问题上只花了两美分，清除表格是个坏主意。 浏览器保留它们的状态是有原因的。

例如，如果服务器端验证失败，我不得不返回并重新输入所有内容，我会不高兴。 :(

Answer 5

你忘了死（）

header ("location:newpage.php");
die();

你也可以尝试重置你的 $_POST、$_GET 和 $_SESSION 变量

unset($_POST,$_SESSION, $_GET);
header ("location:newpage.php);
die();

更新：刚刚读到您正在尝试取消历史记录，我没有意识到在我上面的代码中...

您将不得不编写一些标记代码来清除与表单的输入字段和选择列表相关联的变量。

随便.js

function clearForm(formIdent) 
{ 
  var form, elements, i, elm; 
  form = document.getElementById 
    ? document.getElementById(formIdent) 
    : document.forms[formIdent]; 

    if (document.getElementsByTagName)
    {
        elements = form.getElementsByTagName('input');
        for( i=0, elm; elm=elements.item(i++); )
        {
            if (elm.getAttribute('type') == "text")
            {
                elm.value = '';
            }
        }
        elements = form.getElementsByTagName('select');
        for( i=0, elm; elm=elements.item(i++); )
        {
            elm.options.selectedIndex=0;
        }
    }

    // Actually looking through more elements here
    // but the result is the same.
    else
    {
        elements = form.elements;
        for( i=0, elm; elm=elements[i++]; )
        {
            if (elm.type == "text")
            {
                elm.value ='';
            }
        }
    }
}

function addEvent(elm, strEvent, fnHandler)
{
    return ( elm.addEventListener
    ? elm.addEventListener( strEvent, fnHandler, false)
    : elm.attachEvent( 'on'+strEvent, fnHandler)
    );
}

在表单 Div 中

<script type="text/javascript">
  // <![CDATA[
    var el = document.createElement("input");
    el.setAttribute("id", "clearButton");
    el.setAttribute("type", "button");
    el.setAttribute("value", "Clear");
    document.getElementById("FormDiv").appendChild(el);
    addEvent(el, 'click', function(){ clearForm('form_name');} );
  // ]]>
</script>

Answer 6

或者，您也可以使用 HTML 事件 'onunload' 来执行海报之前建议的相同操作。 从您的角度来看，何时触发事件可能无关紧要。

Answer 7

清除页面加载时的值。

<input type="text" id="ClearIt" value=""/>

将其放在开头的正文标签中：

onload="document.getElementById('ClearIt').value=''"