Press "Enter" to skip to content

Form Prefill Based on URL Parameters, Cookies, or Session Store | jquery.formprefill

Form prefill is a jQuery form caching plugin that saves all form field data in a browser cookie or session store and restores it as needed. For IE users, you may need to upload Promise polyfill into the document.

Built by more onion as a part of Campaignion.

How to make use of it:

1. Define the distinctive key values for every type of fields utilizing name and data-form-prefill-keys attributes as displayed under:

<input type="text" data-form-prefill-keys="input_name">
<input checked value="One" data-form-prefill-keys="checkbox_name another_name" type="checkbox">
<select multiple name="myform[personal_data][age]">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

2. Or specify totally different key names for information write & read.

<input type="text" data-form-prefill-read="first_name firstname" data-form-prefill-write="first_name">

3. Put the jQuery library and the JavaScript file jquery.formprefill.js on the finish of the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.formprefill.js"></script>

4. Call the function on the HTML form to energetic the form caching plugin.

$('form').formPrefill();

5. Clear the cached information:

// clear & reset values
$('form').data('formPrefill').removeAll();

// clear values
$('form').data('formPrefill').removeAll({
  resetFields: false
});

6. Available plugin choices with default values.

$('form').formPrefill({
  prefix: 'formPrefill',
  storageKeys: function() {
    return {
      read: "key",
      write: "key"
    };
  },
  exclude: '[data-form-prefill-exclude]',
  include: '[data-form-prefill-include]',
  stringPrefix: 's',
  listPrefix: 'l',
  stores: [], // An array of custom store instances
  useSessionStore: true,
  useCookies: false,
  cookieDomain: ''
});

7. Read & write values.

$('form').data('formPrefill').readAll();
$('form').data('formPrefill').writeAll();

var $formField = $('form').find('input[name=input_name]');
$firstName.data('formPrefill').read();
$firstName.data('formPrefill').write();
$firstName.data('formPrefill').write({delete: true});

Browser Storage Based Form Caching Plugin, Form prefill Plugin/Github

Changelog:

v0.13.0 (2020-10-16)

  • Add assist for customized form-elements.

2020-05-07

  • Switch to a Parcel 1 / Babel setup that permits us to make use of fashionable JavaScript.
  • Refactor: Split out lessons into separate information.
  • More occasions to permit different modules to learn/write values from the shops.

2019-09-10

  • Guard towards third-celebration storage safety exception.

2018-09-06

  • Always set safe cookies (require SSL/HTTPS)

Form-prefill-plugin-for-jQuery-Demo


See Demo And Download

Official Website(moreonion): Click Here

This superior jQuery/javascript plugin is developed by moreonion. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *