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

Question

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.

Seems to be a browser "feature" (yes, it's a feature, not a bug... sigh). see http://stackoverflow.com/questions/4594489/pressing-back-prefills-inputs-with-value-from-right-before-submit and http://stackoverflow.com/questions/6487970/disable-firefoxs-auto-fill — Adriano, Jul 29 '14 at 15:07

mplungjan · Accepted Answer · 2013-06-26T11:37:43.407

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>

edited Jun 26 '13 at 11:37

answered Jun 26 '13 at 09:13

mplungjan

169,008
28
173
236

Regarding the "with parameters", here's what I am trying to do: The parameter is a php variable not javascript. This line I wrote doesn't work. – Traveling Salesman Jun 26 '13 at 09:39
Please see update and please do not use body onload but use the construct I suggested. Also you need a ; after the `echo $size;` – mplungjan Jun 26 '13 at 09:49
Perfect! Thanks a lot for being helpful. I'd like to add one more thing here, which is the variable someparm in your example has to be defined before writing windows.onload. This is how I managed to make it work. – Traveling Salesman Jun 26 '13 at 11:33
I am not sure what you mean by defined before. You could use checkChange() too if you wanted to. But I believe you MUST have a semicolon after the statement before the end ?> – mplungjan Jun 26 '13 at 11:36
Yes sorry, I missed that semicolon. What I mean is that the variable has to be defined previously in the php page. – Traveling Salesman Jun 26 '13 at 11:37
Yes. See update for a method to disable the button if parm==0 and otherwise if anything is empty – mplungjan Jun 26 '13 at 11:38

score 1 · Answer 2 · answered Jun 26 '13 at 09:15

1

Add either onload to body or window.onload event.

<body onload="checkChange();">

or

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

answered Jun 26 '13 at 09:15

Ilu

894
6
12

As I already posted. It is not considered good practice to inline the event handler – mplungjan Jun 26 '13 at 09:17
Thank you. In another page, I need to do the same but the function takes a parameter. Can I still use the same method? – Traveling Salesman Jun 26 '13 at 09:28
@TheTravellingSalesman If I understand what you are after, as long as you can get the parameter from somewhere, why not. – Ilu Jun 26 '13 at 09:32
@mplungjan Sorry, but when I posted it did not show me any other answers. And sure, you are correct that it's not considered as a good practice, yet you see it used. It is good to know what you can encounter however. – Ilu Jun 26 '13 at 09:33

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

2 Answers2