0

I have a user-input form which I want when the internet goes down then data will remain stored in the fields. If the user closes the tab and again opens the tab then the form remains same as well as it was not submitted. I am trying to do this using localStorage object but not getting the result. I just want if user fill the form and if the internet goes down that time then form data will get stored locally and when the internet gets active on phone then the user will be able to submit the previous filled form.

The form is showing all the input fields in the form. JavaScript code is used to submit the form through ajax and function store is used to store the data locally in the browser. Data is getting stored in the browser but I wouldn't be able to retain that data again if the browser gets closed without submitting.

// magic.js
$(document).ready(function() {

  // process the form
  $('.form').submit(function(event) {

    // get the form data
    // there are many ways to get this data using jQuery (you can use the class or id also)
    alert("data is here")
    var formData = {
      'name': $('input[name=name]').val(),
      'email': $('input[name=email]').val(),
      'contact': $('input[name=contact]').val(),
      'aadhar_card_number': $('input[name=aadhar_card_number]').val(),
      'aadhar_card_image': $('input[name=file_array[]]').val(),
      'gst_number': $('input[name=gst_number]').val(),
      'gst_image': $('input[name=file_array[]]').val(),
      'tin_number': $('input[name=tin_number]').val(),
      'tin_image': $('input[name=file_array[]]').val(),
      'pan_number': $('input[name=pan_number]').val(),
      'pan_image': $('input[name=file_array[]]').val(),
      'vat_number': $('input[name=vat_number]').val(),
      'vat_image': $('input[name=file_array[]]').val(),

    };
    console.log("name is here--" + name)

    // process the form
    $.ajax({
        type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url: 'form_upload.php', // the url where we want to POST
        data: formData, // our data object
        dataType: 'json', // what type of data do we expect back from the server
        encode: true
      })
      // using the done promise callback
      .done(function(data) {


        // log data to the console so we can see
        console.log(data);

        // here we will handle errors and validation messages
      });
    alert("Submitted Successfully")

    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
  });

});


function store() {

  var inputRetailerName = document.getElementById("name");
  var inputRetailerEmail = document.getElementById("email");
  var inputRetailerNumber = document.getElementById("number");
  var inputAadharNumber = document.getElementById("aadhar_number");
  var inputAadharImage = document.getElementById("aadhar_image");
  var inputGSTNumber = document.getElementById("gst_number");
  var inputGSTImage = document.getElementById("gst_image");
  var inputTINNumber = document.getElementById("tin_number");
  var inputTINImage = document.getElementById("tin_image");
  var inputPANNumber = document.getElementById("pan_number");
  var inputPANImage = document.getElementById("pan_image");
  var inputVATNumber = document.getElementById("vat_number");
  var inputVATImage = document.getElementById("vat_image");


  localStorage.setItem("name", inputRetailerName.value);
  localStorage.setItem("email", inputRetailerEmail.value);
  localStorage.setItem("number", inputRetailerNumber.value);
  localStorage.setItem("aadhar_number", inputAadharNumber.value);
  localStorage.setItem("aadhar_image", inputAadharImage.value);
  localStorage.setItem("gst_number", inputGSTNumber.value);
  localStorage.setItem("gst_image", inputGSTImage.value);
  localStorage.setItem("tin_number", inputTINNumber.value);
  localStorage.setItem("tin_image", inputTINImage.value);
  localStorage.setItem("pan_number", inputPANNumber.value);
  localStorage.setItem("pan_image", inputPANImage.value);
  localStorage.setItem("vat_number", inputVATNumber.value);
  localStorage.setItem("vat_image", inputVATImage.value);


  retailerName = localStorage.getItem('name');
  alert(inputRetailerName.innerHTML = retailerName);


  retailerEmail = localStorage.getItem('email');
  inputRetailerEmail.innerHTML = retailerEmail;


  retailerNumber = localStorage.getItem('number');
  inputRetailerNumber.innerHTML = retailerNumber;


  retailerAadharNumber = localStorage.getItem('aadhar_number');
  inputAadharNumber.innerHTML = retailerAadharNumber;

  retailerAadharImage = localStorage.getItem('aadhar_image');
  inputAadharImage.innerHTML = retailerAadharImage;

  retailerGSTNumber = localStorage.getItem('gst_number');
  inputGSTNumber.innerHTML = retailerGSTNumber;

  retailerGSTImage = localStorage.getItem('gst_image');
  inputGSTImage.innerHTML = retailerGSTImage;

  retailerTINNumber = localStorage.getItem('tin_number');
  inputTINNumber.innerHTML = retailerTINNumber;

  retailerTINImage = localStorage.getItem('tin_image');
  inputTINImage.innerHTML = retailerTINImage;

  retailerPANNummber = localStorage.getItem('pan_number');
  inputPANNumber.innerHTML = retailerPANNummber;

  retailerPANImage = localStorage.getItem('pan_image');
  inputPANImage.innerHTML = retailerPANImage;

  retailerVATNumber = localStorage.getItem('vat_number');
  inputVATNumber.innerHTML = retailerVATNumber;

  retailerVATImage = localStorage.getItem('vat_image');
  inputVATImage.innerHTML = retailerVATImage;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="row main">
      <div class="main-login main-center">
        <h5>Fill all the details</h5>
        <form class="form" method="post" enctype="multipart/form-data">

          <div class="form-group">
            <label for="name" class="cols-sm-2 control-label">Retailer Name</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="cols-sm-2 control-label">Retailer Email</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="contact" class="cols-sm-2 control-label">Contact Number</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
                <input type="number" class="form-control" name="contact" id="number" placeholder="Enter your Contact Number" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">Aadhar Card Number</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="aadhar_card_number" id="aadhar_number" placeholder="Enter Your Aadhar Card Number" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">Aadhar Card Image</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="file" class="form-control" name="file_array[]" id="aadhar_image" accept="image/*" capture placeholder="Upload Your Aadhar Card" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">G.S.T Number</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="gst_number" id="gst_number" placeholder="Enter Your G.S.T Number" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">G.S.T Image</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="file" class="form-control" name="file_array[]" id="gst_image" accept="image/*" capture placeholder="Upload Your G.S.T Card" />
              </div>
            </div>
          </div>


          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">T.I.N Number</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="tin_number" id="tin_number" placeholder="Enter Your Tin Number" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">T.I.N Image</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="file" class="form-control" name="file_array[]" id="tin_image" accept="image/*" capture placeholder="Upload Your T.I.N Card" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">PAN Number</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-address-card-o" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="pan_number" id="pan_number" placeholder="Enter Your PAN Card Number" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">PAN Image</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="file" class="form-control" name="file_array[]" id="pan_image" accept="image/*" capture placeholder="Upload Your PAN Card" />
              </div>
            </div>
          </div>


          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">VAT No</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="vat_number" id="vat_number" placeholder="Enter Your Aadhar Card Number" />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="aadhar" class="cols-sm-2 control-label">VAT Card Image</label>
            <div class="cols-sm-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                <input type="file" class="form-control" name="file_array[]" id="vat_card_image" accept="image/*" capture placeholder="Upload Your VAT Card" />
              </div>
            </div>
          </div>


          <div class="form-group ">

            <input type="submit" value="Submit" id="button" onclick="store()" name="submit" class="btn btn-primary btn-lg btn-block login-button" />
          </div>

        </form>
      </div>
    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/store.js"></script>
  <script type="text/javascript" src="js/submit.js"></script>
</body>

<!-- begin snippet: js hide: false console: true babel: false -->
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
Sahil Verma
  • 53
  • 1
  • 1
  • 6
  • Check this first https://stackoverflow.com/questions/3181080/how-to-detect-online-offline-event-cross-browser – Gopal Sharma Oct 25 '18 at 07:46
  • 3
    use `sessionStorage` or `localStorage` – Sumesh TG Oct 25 '18 at 07:46
  • What Sumesh said - look into local or session storage. – ADyson Oct 25 '18 at 07:47
  • I have already used localstorage but it 's not working. – Sahil Verma Oct 25 '18 at 07:50
  • On opening the page, you need to check if the localstorage item exists, and if it does, use it to fill in the values. And you need to delete the item from localstorage on a succesfull form submission. – jeroen Oct 25 '18 at 07:55
  • "not working" isn't an error message or problem statement. You'll have to give us more information e.g. error descriptions, description of any unexpected behaviour, debugging info (e.g. what happened when you stepped through the code with a debugger). You've posted quite a large amount of code, so for us to help you easily you need to narrow down the problem to a particular area of functionality within it. – ADyson Oct 25 '18 at 08:05

1 Answers1

0

Try to use Loki DB (in-memory database) for data persistent. You can persist data anywhere local storage, indexed db, session storage or file system. http://lokijs.org/#/docs

Santosh
  • 41
  • 4