0

我正在使用 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 函数。

4

2 回答 2

2 
<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>
于 2013-06-26T09:13:21.167 回答
1

将 onload添加到 body 或 window.onload事件。

<body onload="checkChange();">

或者

window.onload=function(){
   checkChange();
}
于 2013-06-26T09:15:15.350 回答