Friday 15 December 2017

How to Restore Form Data using Jquery with PHP



In this post we have share tutorial on How to Auto Save your content when browser automatically refresh or there is error in form data and we have submit form or suddenly browser close. Then at that time our data which we have filled in form has been removed. For this we have found one jquery plugin savy.js plugin. By using this plugin we can save our content while we have done some editing in HTML form. This plugin will be helpful when we have working on big form and in that form we have use server side form validation. so if user has start filling form and he enter some wrong data in particular filled and after this he submit form. After form submission if he has received any validation error then at that time form fields which he has filled has been destroy or removed and he want to filled form again.

For avoid this things we have found this Jquery plugin on Internet. This plugin is a light weight plugin which is written in Jquery. It will automatically saves form fields values at the client side. For store form fields values at client side it has been used HTML5 localStorage. So when we have again visit same page then this plugin will restore form fields values. This plugin provides excellent solution for preventing data loss if browser suddenly refreshed or the browser close.

Here we will discuss how can we use this plugin functionality with our PHP script. For this things we have make one HTML form in which user can register and in this form we have use PHP server side form validation. In normally server side form validation if we have filled form and there is mistake in form filling which found in server side form validation then form data will be submitted to server and form will be reload then at that time form data which user has filled will be lost. For prevent loss of data we have use savy.js plugin. For save any particular filled data we can use savy('load') method. By using this method we can save particular form filled data in HTML5 localStorage. And for remove data we can use savy('destroy') method. By using this method we can remove particular form field data from HTML5 localStorage. With this post you can find complete source code in which How to use savy.js Jquery plugin with PHP script for restore form data.





Source Code



<?php
//index.php
$count = 0;
$error = '';
if(isset($_POST['submit']))
{
 $name = '';
 $phone = '';
 $email = '';
 $address = '';
 if(empty($_POST['name']))
 {
  $error .= '<p class="text-danger">Name is Required</p>';
 }
 else
 {
  if(!preg_match("/^[a-zA-Z ]*$/",$_POST["name"]))
  {
   $error .= '<p class="text-danger">Only Alphabet allowed in Name</p>';
  } 
  else
  {
   $name = $_POST['name'];
  }
 }
 
 if(empty($_POST["email"]))
 {
  $error .= '<p class="text-danger">Email Address is Required</p>';
 }
 else
 {
  if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL))
  {
   $error .= '<p class="text-danger">Invalid email format</p>';
  }
  else
  {
   $email = $_POST["email"];
  }
 }
 
 if(empty($_POST["phone"]))
 {
  $error .= '<p class="text-danger">Phone Number is Required</p>';
 }
 else
 {
  if(!preg_match("/^[0-9]*$/",$_POST["phone"]))
  {
   $error .= '<p class="text-danger">Only Numbers allowed in Phone</p>';
  }
  else
  {
   $phone = $_POST["phone"];
  }
 }
 
 if(empty($_POST["address"]))
 {
  $error .= '<p class="text-danger">Address is Required</p>';
 }
 else
 {
  $address = $_POST["address"];
 }
 
 if($error == '')
 {
  $count = $count + 1;
  $error = '<label class="text-success">Form Data Submitted</label>';
 }

 
}

?>
<!DOCTYPE html>
<html>
 <head>
  <title>How to Restore Form Data using Jquery with PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="savy.js"></script>
 </head>
 <body>
  <br />
  <h2 align="center"><a href="#">How to Restore Form Data using Jquery with PHP</a></h2>
  <br />
  <div class="container">
   <div class="row">
    <div class="col-lg-6" style="margin:0 auto; float:none;">
     <div class="panel panel-default">
      <div class="panel-heading">
       <h3 class="panel-title">User Form</h3>
      </div>
      <div class="panel-body">
       <form method="post">
        <span class="text-danger"><?php echo $error; ?></span>
        <div class="form-group">
         <label>Name</label>
         <input type="text" name="name" id="name" class="form-control" />
        </div>
        <div class="form-group">
         <label>Email</label>
         <input type="text" name="email" id="email" class="form-control" />
        </div>
        <div class="form-group">
         <label>Phone</label>
         <input type="text" name="phone" id="phone" class="form-control" />
        </div>
        <div class="form-group">
         <label>Address</label>
         <textarea name="address" id="address" class="form-control"></textarea>
        </div>
        <div class="form-group">
         <label>Gender</label>
         <select name="gender" id="gender" class="form-control">
          <option value="male">Male</option>
          <option value="female">Female</option>
         </select>
        </div>
        <div class="form-group">
         <label>Programming Languages</label><br />
         <div class="checkbox-inline">
          <label><input type="checkbox" name="languages[]" id="php_language" value="PHP">PHP</label>
         </div>
         <div class="checkbox-inline">
          <label><input type="checkbox" name="languages[]" id="java_language" value="Java">Java</label>
         </div>
         <div class="checkbox-inline">
          <label><input type="checkbox" name="languages[]" id="net_language" value=".Net">.Net</label>
         </div>
        </div>
        <div class="form-group" align="center">
         <input type="submit" name="submit" class="btn btn-info" value="Submit" />
        </div>
       </form>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
  
 <?php
 if($count == 0)
 {
 ?>
 $('#name').savy('load');
 $('#email').savy('load');
 $('#phone').savy('load');
 $('#address').savy('load');
 $('#gender').savy('load');
 $('#php_language').savy('load');
 $('#java_language').savy('load');
 $('#net_language').savy('load');
 <?php
 }
 else
 {
 ?>
 $('#name').savy('destroy');
 $('#email').savy('destroy');
 $('#phone').savy('destroy');
 $('#address').savy('destroy');
 $('#gender').savy('destroy');
 $('.languages').savy('destroy');
 $('#php_language').savy('destroy');
 $('#java_language').savy('destroy');
 $('#net_language').savy('destroy');
 <?php
 }
 ?>
 
});
</script>

0 comments:

Post a Comment