Retaining the values of fields when page reloads in PHP & JavaScript

First Name
Middle Name
Last Name
Type Male Female

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 code for this

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

$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'  $maleck>Male </font><input type=radio name=type value='female'  $femaleck>Female</td></tr>

<tr bgcolor='#ffffff'><td align=center  ><input type=button onclick='reload()'; value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
";
?>

</body>
</html>

This is based on submitting the form data to a different page by reloading the page. However we can use JQuery to submit the form data without reloading the page.
Demo submitting form without reloading page Validating different input types in a form
Sitemap Form Form post back data
Checking Data Radio buttons
PHP sticky form using listbox

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

How to retain and display values of form input fields if page refreshes

Subhendu Mohapatra