SQL PHP HTML ASP JavaScript articles and free scripts to download

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

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


Google+
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer