希望在互联网关闭时脱机存储表单数据，并在互联网活动时提交

xienkqul  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(353)

我有一个用户输入表，我想当互联网关闭，然后数据将继续存储在字段中。如果用户关闭选项卡并再次打开选项卡，则表单与未提交的表单保持相同。我尝试使用localstorage对象来实现这一点，但没有得到结果。我只想如果用户填写表格，如果互联网关闭了，那么表格数据将存储在本地，当互联网在手机上变得活跃，那么用户将能够提交以前填写的表格。
窗体显示窗体中的所有输入字段。javascript代码用于通过ajax提交表单，函数store用于在浏览器中本地存储数据。数据存储在浏览器中，但如果浏览器关闭而不提交，我将无法再次保留该数据。

// 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 -->
mysqlphpajaxJavaScriptlocal-storage

1条答案

按热度按时间
ckocjqey

ckocjqey1#

尝试使用lokidb（内存数据库）来持久化数据。您可以将数据持久化到本地存储、索引数据库、会话存储或文件系统的任何位置。http://lokijs.org/#/docs

赞(0）分享  回复(0）举报  2021-06-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com