HTML - PHP、浏览器后退按钮和页面的确切历史记录答案

【问题标题】：HTML - PHP, browser back button & the exact history of the pageHTML - PHP、浏览器后退按钮和页面的确切历史记录
【发布时间】：2013-06-23 08:17:17
【问题描述】：

我正在使用 HTML 和 PHP 开发一个网站。在我的 HTML 页面中，我有一个带有标记为“REQUIRED”的字段的表单。因为这些字段是必需的，所以我将表单的提交按钮设置为禁用，直到填写所有必填字段。全部填满后，按钮将启用。取决于字段的按钮的行为可以正常工作。但是，当用户提交表单然后单击浏览器的“返回”按钮（试图返回表单）时，该按钮被禁用，但所有必填字段均已填写。因此，它并没有真正回到页面的确切历史。这对用户来说也很烦人。

我该如何解决这个问题？以下是我的 HTML 页面的一部分。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script>  


function checkChange()
{
    var title_txt = document.getElementById('title_textarea').value.replace(/^\s+|\s+$/g,"");
    var system_and_device_txt= document.getElementById('system_and_device_textarea').value.replace(/^\s+|\s+$/g,"");
    var finding_txt = document.getElementById('finding_textarea').value.replace(/^\s+|\s+$/g,"");
    var implication_txt = document.getElementById('implication_textarea').value.replace(/^\s+|\s+$/g,"");
    var recommendation_txt = document.getElementById('recommendation_textarea').value.replace(/^\s+|\s+$/g,"");

    if(document.getElementById('service_name_select').selectedIndex != '0' &&
       document.getElementById('risk_rating_select').selectedIndex != '0' &&
       document.getElementById('root_cause_select').selectedIndex != '0' &&
       document.getElementById('impact_select').selectedIndex != '0' &&
       document.getElementById('likelihood_select').selectedIndex != '0' &&
       document.getElementById('efforts_select').selectedIndex != '0' &&
       document.getElementById('client_name_select').selectedIndex != '0' &&
       document.getElementById('project_name_select').selectedIndex != '0' &&
       title_txt != "" &&
       system_and_device_txt!="" &&
       finding_txt != "" &&
       implication_txt != "" && 
       recommendation_txt != ""         
    )
       document.getElementById('save_button').disabled = false;


    else
      document.getElementById('save_button').disabled = true;


}   


</style>  
</head>



<body>
<div class="page-out">
<div class="page-in">
<div class="page">
<div class="main">
<div class="header">


</div>
<div class="content">
<div class="content-left">
<div class="row1">


<?php   

include "AccountHolder.php";
$database_manager = new DatabaseManager();
$database_manager ->connect();
$db_link = $database_manager ->get_connection();

?>


<form method="post" action= "save_record_page.php" >
<fieldset style='padding:15px'>
<legend>Insert New Data </legend>
<p> <font color='red'> * </font> Service Name :
<select name="service_name" id= "service_name_select" onchange="checkChange()">
<option value=""> -Select- </option>

<?php

$result = $db_link->query("SELECT * FROM servicetype_lookup "); 

while($row= $result->fetch_row()) {
$id = $row[0];
$value = $row[1];
echo "<option value='$id'>$value</option>";
}
?>
</select>
</p>

<br/>

<font color='red'>*</font> 
Title : <input type="text" name="title" id="title_textarea" oninput="checkChange()"/>
<br/>
<br/>
<font color='red'>*</font> 
Risk Rating : 
<select name="risk_rating" id= "risk_rating_select" onchange="checkChange()" >
<option value=""> -Select- </option>
<?php

$result = $db_link->query("SELECT * FROM riskrating_lookup "); 

while($row= $result->fetch_row()) {
$id = $row[0];
$value = $row[1];
echo "<option value='$id'>$value</option>";
}
?>


</select>
<br />
<br/>

<font color='red'>*</font> 
Root Cause : 
<select name="root_cause" id= "root_cause_select" onchange="checkChange()">
<option value=""> -Select- </option>

<?php

$result = $db_link->query("SELECT * FROM rootcause_lookup "); 

while($row= $result->fetch_row()) {
$id = $row[0];
$value = $row[1];
echo "<option value='$id'>$value</option>";
}
?>

</select>
<br/>
<br/>


<font color='red'>*</font> 
Impact :
<select name="impact" id= "impact_select" onchange="checkChange()">
<option value=""> -Select- </option>

<?php

$result = $db_link->query("SELECT * FROM impact_lookup "); 

while($row= $result->fetch_row()) {
$id = $row[0];
$value = $row[1];
echo "<option value='$id'>$value</option>";
}
?>

</select>
<br />
<br/>

<font color='red'>*</font> 
Likelihood :
<select name="likelihood" id= "likelihood_select" onchange="checkChange()">
<option value=""> -Select- </option>

<?php

$result = $db_link->query("SELECT * FROM likelihood_lookup "); 

while($row= $result->fetch_row()) {
$id = $row[0];
$value = $row[1];
echo "<option value='$id'>$value</option>";
}
?>


</select><br/><br/>

<font color='red'>*</font> 
Efforts : 
<select name="efforts" id= "efforts_select" onchange="checkChange()">
<option value=""> -Select- </option>



<?php

$result = $db_link->query("SELECT * FROM efforts_lookup "); 

while($row= $result->fetch_row()) {
$id = $row[0];
$value = $row[1];
echo "<option value='$id'>$value</option>";
}
?>
</select>
<br/>
<br/>

<p> <font color='red'> * </font> Client Name:
<select name="client_name" id= "client_name_select" onchange="checkChange()">
<option value=""> -Select- </option>

<?php

$result = $db_link->query("SELECT * FROM Clients_Lookup"); 

while($row= $result->fetch_row()) {
$id = $row[0];
$value = $row[1];
echo "<option value='$id'>$value</option>";
}
?>
</select>
</p>
<br/>



<p> <font color='red'> * </font> Project Name:
<select name="project_name" id= "project_name_select" onchange="checkChange()">
<option value=""> -Select- </option>

<?php

$result = $db_link->query("SELECT * FROM clients_projects_lookup"); 

while($row= $result->fetch_row()) {
$id = $row[1];
$value = $row[2];
echo "<option value='$id'>$value</option>";
}
?>
</select>
</p>

<br/>


<font color='red'>*</font> 
System/Device : <input type="text" name="system_and_device" id="system_and_device_textarea" oninput="checkChange()"/><br />


<br/>
<font color='red'>*</font> 
Finding : <br/>
<textarea name="finding"  cols="100" rows="10" id="finding_textarea" oninput="checkChange()"></textarea>
<br/>
<br/>
<font color='red'>*</font> 
Implication: <br/>
<textarea name="implication"  cols="100" rows="10" id="implication_textarea" oninput="checkChange()"></textarea>
<br/>
<br/>
<font color='red'>*</font> 
Recommendation : <br/>
<textarea name="recommendation" cols="100" rows="10" id="recommendation_textarea" oninput="checkChange()"></textarea>
<br/>
<br/>
<input type="button" value="Back" onclick="history.go(-1);return true" />
<input type="submit" value=" Save " disabled="true" id= "save_button" />
<br/>
<br/>

<p> NOTE: <font color='red'> * </font>indicates a required field</p>

</fieldset>
</form>
</div>

编辑：我的问题还包括可以将 PHP 变量作为参数来决定启用或禁用按钮的 javascript 函数。

【问题讨论】：

似乎是一个浏览器“功能”（是的，它是一个功能，而不是一个错误......叹息）。见stackoverflow.com/questions/4594489/…和stackoverflow.com/questions/6487970/disable-firefoxs-auto-fill

标签： html button back browser-history

【解决方案1】：

<script>  
window.onload=function() { 
  var someparm = <?php echo $size; ?>; // assuming a number, if not use quotes
  checkChange(someparm);
}

function checkChange(parm) {
  document.getElementById('save_button').disabled = (parm==0) ? true : document.getElementById('service_name_select').selectedIndex < 1 ||
   document.getElementById('risk_rating_select').selectedIndex  < 1 ||
   document.getElementById('root_cause_select').selectedIndex   < 1 ||
   document.getElementById('impact_select').selectedIndex       < 1 ||
   document.getElementById('likelihood_select').selectedIndex   < 1 ||
   document.getElementById('efforts_select').selectedIndex      < 1 ||
   document.getElementById('client_name_select').selectedIndex  < 1 ||
   document.getElementById('project_name_select').selectedIndex < 1 ||
   title_txt             == "" ||
   system_and_device_txt == "" ||
   finding_txt           == "" ||
   implication_txt       == "" ||
   recommendation_txt    == "";
}
</script>

【讨论】：

关于“带参数”，这就是我想要做的：参数是一个php变量而不是javascript .我写的这行不行。
请参阅更新，请不要使用正文加载，而是使用我建议的构造。你还需要一个 ;在echo $size; 之后
完美！非常感谢您的帮助。我想在这里再添加一件事，即在编写 windows.onload 之前必须定义示例中的变量 someparm。这就是我设法让它发挥作用的方法。
我不确定你之前定义的意思。如果您愿意，也可以使用 checkChange()。但我相信你必须在结束前的语句后加一个分号？>
是的，抱歉，我错过了那个分号。我的意思是该变量必须事先在 php 页面中定义。

【解决方案2】：

添加onload to body or window.onload 事件。

<body onload="checkChange();">

或

window.onload=function(){
   checkChange();
}

【讨论】：

正如我已经发布的那样。内联事件处理程序不是一种好的做法
谢谢。在另一个页面中，我需要做同样的事情，但该函数需要一个参数。我还能用同样的方法吗？
@TheTravellingSalesman 如果我明白你在追求什么，只要你能从某个地方得到参数，何乐而不为。
@mplungjan 抱歉，但是当我发布它时，它没有显示任何其他答案。当然，你是对的，它不被认为是一种好的做法，但你看到它被使用了。不过，很高兴知道您会遇到什么。