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

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.

Demo of retaining data with page refresh

Here is the code for this


<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++){
var val4=document.form1.type[i].value

self.location='validation4.php?fname=' + val1 + '&mname=' + val2 + '&lname=' + val3 + '&type=' + val4;



<body >



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>



Visitors Rating
Your Rating


Post Comment This is for short comments only. Use the forum for more discussions.

HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 All rights reserved worldwide Privacy Policy Disclaimer