We can retain form components values after the page refreshes or reloads by using JavaScript and PHP. Here we are using JavaScript to format the query string which will be used at address bar at the time of page reload. We will keep some text field and one set of radio buttons and we will try to retain the values of these components after the page reloads. All these components are part of a main form which submits data to a different page.
Here we will use one JavaScript function to collect all the values of text fields and period buttons, then format the query string with all the variable name and values and then reload the page with the values. To trigger the JavaScript function we will use onClick event of the radio buttons. The same triggering can be extended to any other types of events like onSelect of a drop down list box, on focus of a text box or on check of a checkbox etc.
Here is the demo of this code.
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
function reload()
{
var val1=document.form1.fname.value ;
var val2=document.form1.mname.value ;
var val3=document.form1.lname.value ;
//// For radio button value to collect ///
for(var i=0; i < document.form1.type.length; i++){
if(document.form1.type[i].checked)
var val4=document.form1.type[i].value
}
self.location='validation4.php?fname=' + val1 + '&mname=' + val2 + '&lname=' + val3 + '&type=' + val4;
}
</script>
</head>
<body >
<?
$fname=@$_GET['fname'];
$mname=@$_GET['mname'];
$lname=@$_GET['lname'];
$type=@$_GET['type'];
if($type=="male"){$maleck="checked";
$femaleck="";}
else{$femaleck="checked";
$maleck="";}
echo "<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=index.php><input type=hidden name=todo value=post>
<tr ><td align=center ><font face='verdana' size='2'><br>
First Name <input type=text name=fname value='$fname'><br>
Middle Name <input type=text name=mname value='$mname'><br>
Last Name <input type=text name=lname value='$lname'><br>
<b>Type</b><input type=radio name=type value='male' onclick='reload()'; $maleck>Male </font><input type=radio name=type value='female' onclick='reload()'; $femaleck>Female</td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
";
?>
</body>
</html>
