HTML - PHP, browser back button & the exact history of the page

I am developing a website using HTML and PHP. In my HTML page, I have a form with fields marked as "REQUIRED". Because these fields are required, I set the submit button of the form to disabled until all the required fields are filled. Once all filled, the button is enabled. The behavior of the button which is dependent on the fields works fine. However, when the user submits the form and then clicks the "back" button of the browser, (trying to get back to the form), the button is disabled but all the required fields are filled. Therefore, it is not really getting back to the exact history of the page. This is also annoying for the user.

How can I solve this problem? Below is part of my HTML page.

<!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>

Edit: My question also includes javascript functions that can take a PHP variable as a parameter in order to decide enabling or disabling the button.

Solution

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