Php sticky form with user input data validation Tutorial

Sticky form in PHP to retain input data & selection with validation without any client Libraries

Without using any client script like JQuery or Ajax , we can retain the data entered by user and validate the same. After validation the form will be submitted to processing page.

What is sticky form?

Whenever the form is submitted the page is refreshed so we must hold the user entered data if form data validation is not cleared ( user not fulfilled all the requirements ). The main purpose is user need not enter the data again.

Creating the form

Inside our PHP area we will create the form so the variables we can assign to value attribute of the input elements.

Collecting the form data

This page will submit to itself as we have assigned blank value to action attribute of the form.

<form method=POST action='' name=form1>
<input type=hidden name=todo value='post-data'>

Collecting the data

Once the user submits the form the data will be available to the same page. We kept one hidden tag todo which we will be monitoring to execute the validation code part or not . If this form is submitted then the hidden element todo will carry the data ( post-data ) . By using one if condition we will keep the full validation code inside it.

if($_POST['todo']=='post-data'){
$status="OK"; // flag for validation 
$msg=""; // validation message for user
// collect user entered data // 

-------

Collecting all input values

We used POST method to collect form data.

$f_name=$_POST['f_name']; // collect name
$my_class=$_POST['my_class']; 
$gender=$_POST['gender'];	
$agree=$_POST['agree'];
$details=$_POST['details'];

Getting the Textbox data

Based on the length of data entered by user we will set the flag to NOTOK and add the message.

if(strlen($f_name) <3 ) { // name is not entered
$status="NOTOK";	
$msg .="Enter Name<br>";	
}

As the variable $f_name is already available, we will use this with the value attribute of the input box.

<input type=text name=f_name class='form-control' value=$f_name>

Getting select box data

One of the option of the select box is to be selected. Based on the data of the variable $gender, we will set the value of one of the variable to selected by using switch.

if(strlen($my_class) <1){
$status="NOTOK";	
$msg .="Select one Class <br>";
}else{
switch($my_class)
{
case 'One':
$s1='selected';$s2='';$s3='';
break;
case 'Two':
$s1='';$s2='selected';$s3='';
break;
case 'Three':
$s1='';$s2='';$s3='selected';
break;	
}	
}// select box checking

Using the above value of variables ( $s1, $s2,$s3 ) the default option of the select box will be selected.

<select name=my_class class='form-control'>
	<option value=''>Select Class</option>
	<option value='One' $s1>One</option>
	<option value='Two' $s2>Two</option>
	<option value='Three' $s3>Three</option>
</select>

Getting radio button data

We will check the variable $gender the name attribute of the radio button, based on the value of this we will assign the string checked to one of the three variables ($r1,$r2,$r3).

if(strlen($gender) <2){
$status="NOTOK";
$msg .=" Select Gender <br>";	
} else{
switch ($gender)
{
case 'male':
$r1='checked';$r2='';$r3='';	
break;
case 'female':
$r1='';$r2='checked';$r3='';	
break;
case 'other':
$r1='';$r2='';$r3='checked';	
break;
}// end of switch for gender	
}//end of gender checking

We can keep one of the three radio buttons in selected condition based on the variables set as above.

<input type=radio name=gender value=male $r1> Male
<input type=radio name=gender value=female $r2> Female
<input type=radio name=gender value=other $r3> Other

Getting Textarea data

We must maintain the minimum length required for the textarea.

if(strlen($details) <3 ) {
$status="NOTOK";	
$msg .="Enter details<br>";	
}

We can place the variable $details within the textarea.

<textarea name=details class='form-control' rows=5>$details</textarea>

Getting checkbox data

If user has checked the I agree checkbox then the variable $agree will hold the value yes.

if($agree=='yes'){
$ckb='checked';	// set the value to check
}else{
$ckb='';
$status="NOTOK";	
$msg .="Must agree to conditions
";
}

The variable $ckb we will use with our checkbox.

<input type=checkbox name=agree value=yes $ckb> I Agree

Submitting the form if validation is cleared.

If all the validations are cleared then our flag ( $status ) will hold the value OK, using this we can submit the form to our processing page. This part of the code should be after the form is displayed ( loaded ) as we are using form name attribute form1 which is part of DOM object.

if($status=='OK'){
echo "<script>
form1.action = 'php-sticky-formck.php';
form1.methodn = 'POST';
form1.submit();</script>";	
}

At receiving page we have just received the data and displayed the same.

php-sticky-formck.php

<?Php
$f_name=$_POST['f_name'];
$my_class=$_POST['my_class'];
$gender=$_POST['gender'];	
$agree=$_POST['agree'];
$details=$_POST['details'];

echo "<b>f_name</b> : $f_name <br>
<b>my_class</b> : $my_class<br>
<b>gender</b> : $gender<br>
<b>agree</b> : $agree<br>
<b>details</b> : $details<br><br>

<INPUT TYPE='button' VALUE='Back' onClick='history.go(-1);'>
";
?>

<?Php 
if($_POST['todo']=='post-data'){
$status="OK"; // flag for validation 
$msg=""; // validation message for user
// collect user entered data // 
$f_name=$_POST['f_name']; // collect name
$my_class=$_POST['my_class']; 
$gender=$_POST['gender'];	
$agree=$_POST['agree'];
$details=$_POST['details'];

if(strlen($f_name) <3 ) { // name is not entered
$status="NOTOK";	
$msg .="Enter Name<br>";	
}

if(strlen($my_class) <1){
$status="NOTOK";	
$msg .="Select one Class <br>";
}else{
switch($my_class)
{
case 'One':
$s1='selected';$s2='';$s3='';
break;
case 'Two':
$s1='';$s2='selected';$s3='';
break;
case 'Three':
$s1='';$s2='';$s3='selected';
break;	
}	
}// select box checking 
if(strlen($gender) <2){
$status="NOTOK";
$msg .=" Select Gender <br>";	
} else{
switch ($gender)
{
case 'male':
$r1='checked';$r2='';$r3='';	
break;
case 'female':
$r1='';$r2='checked';$r3='';	
break;
case 'other':
$r1='';$r2='';$r3='checked';	
break;
}// end of switch for gender	
}//end of gender checking

if(strlen($details) <3 ) {
$status="NOTOK";	
$msg .="Enter details<br>";	
}
/// checkbox checking //
if($agree=='yes'){
$ckb='checked';	
}else{
$ckb='';
$status="NOTOK";	
$msg .="Must agree to conditions<br>";
}
}
// form to display ///
echo "
<div class='container'>
<div class='row justify-content-md-left'>

<div class='col-6'><form method=POST action='' name=form1>
<input type=hidden name=todo value='post-data'>
	Name
<input type=text name=f_name class='form-control' value=$f_name>
	Class
<select name=my_class class='form-control'>
	<option value=''>Select Class</option>
	<option value='One' $s1>One</option>
	<option value='Two' $s2>Two</option>
	<option value='Three' $s3>Three</option>
</select>
	
<b>Gender</b><br>
	<input type=radio name=gender value=male $r1> Male
	<input type=radio name=gender value=female $r2> Female
	<input type=radio name=gender value=other $r3> Other
	<br><b>Details</b> Minimum 10 char <br>
	<textarea name=details class='form-control' rows=5>$details</textarea>
	
<input type=checkbox name=agree value=yes $ckb> I Agree
	 <input type=Submit value=Submit class='btn btn-primary'> <input type=reset value=Reset class='btn btn-secondary'>
	</form>
	</div>
<div class='col-6'>
<div class='alert alert-danger' role='alert'>$msg</div>
</div>
</div>

</div>";
/// submit the form if validation is cleared /// 
if($status=='OK'){
echo "<script>
form1.action = 'php-sticky-formck.php';
form1.method = 'POST';
form1.submit();</script>";	
}
?>

Code for receiving page to process data after form is submitted. php-sticky-formck.php.

Sitemap Form Radio buttons Managing listbox in a Form using PHP Checkbox in PHP

Subscribe to our YouTube Channel here

PHP sticky Form