RSForm LocalStorage

rsform-localstorage.js

/* eslint-disable */

jQuery(document)
	.ready(function ($) {
		'use strict';

		var form = document.getElementById('userForm');
		var userForm = $('#userForm');
		var formId = getFormId();
		var storagePrefix = 'form' + formId + '_';

		function getFormId() {
			var selector = 'rsform_error_';
			var id = form.querySelector('[id^="' + selector + '"]').id;

			return id.replace(selector, '');
		}

		function hideBoxes(id) {
			var elem = document.getElementById(id);
			if (!elem) {
				return;
			}
			hideElem(elem);
		}

		/**
		 * Function to remave localStorage items containing with given prefix
		 * @param pref
		 * @param newName
		 */
		function remLSPref(pref, newName) {
			for (var key in localStorage) {
				if (key.indexOf(pref) === 0) {
					if (key !== newName) {
						localStorage.removeItem(key);
					}
				}
			}
		}

		// we create an object that holds our function
		var rsfpsel = {
			// function to grab all the fields - this can be extended for more advanced features but at the current moment it will do
			getFields: function (context) {
				return $(context)
					.find('input, textarea, select, input:checkbox, input:radio')
					.not(':input[type=password], :input[type=button], :input[type=submit], :input[type=reset], :input[type=hidden], .rsform-captcha-box');
			},

			// function to store the data from your form in the localstorage
			storeValue: function () {
				var getType = $(this)
						.attr('type'),
					$id = storagePrefix + $(this)
						.attr('id');
				if (getType === 'radio') {
					localStorage[$id] = $(this)
						.val();
					$(this)
						.siblings('input:radio')
						.each(function () {
							localStorage.removeItem([$id]);
						});
				} else if (getType === 'checkbox') {
					if ($(this)
						.prop('checked')) {
						localStorage[$id] = $(this)
							.val();
					} else {
						localStorage.removeItem([$id]);
					}
				} else {
					localStorage[$id] = $(this)
						.val();
				}
			},

			// special function for RSForm!Pro special fields
			storeSpecialValue: function () {
				var registerThis = $(this)
					.siblings('input')
					.not(':input[type=button], :input[type=submit], :input[type=reset], :input[type=hidden]');
				localStorage[storagePrefix + $(registerThis)
					.attr('id')] = $(registerThis)
					.val();
			},

			// function to check if we have data in the local storage
			checkStorage: function () {
				var $ids = [];
				rsfpsel.getFields('#userForm')
					.each(function () {
						$ids.push(storagePrefix + $(this)
							.attr('id'));
					});
				for (var i = 0, len = localStorage.length; i < len; i++) {
					var key = localStorage.key(i);
					if ($.inArray(key, $ids) !== -1) {
						return true;
					}
				}
			},

			// function to let you know if you restored or deleted the data
			notifyStorage: function (status) {
				var addThis = 'alert-warning';
				var showText = 'Form Cleared';

				if (status === 'success') {
					addThis = 'alert-success';
					showText = 'Form Restored';
				}
				userForm.prepend('<div class="alert ' + addThis + '"><button type="button" class="close" data-dismiss="alert">&times;</button> ' + showText + ' </div>');
			},

			// function to populate the form fields
			populate: function () {
				rsfpsel.getFields('#userForm')
					.each(function () {
						var $id = storagePrefix + $(this)
								.attr('id'),
							$elem = $(this)
								.attr('id');

						if (localStorage[$id]) {
							var $selector = $('#' + $elem);
							$selector
								.val(localStorage[$id]);
							$selector
								.prop('checked', true);
							if ($selector
								.attr('multiple') === 'multiple') {
								var lstorage = localStorage[$id];
								var values = lstorage.split(',');
								$(this)
									.find('option')
									.each(function () {
										if ($.inArray($(this)
											.val(), values) !== -1) {
											$(this)
												.prop('selected', true);
										}
									});
							}
						}
					});
			}
		};

		// let's initiate the scripts using the function defined above
		// we grab all the form fields and on change we call the other function
		rsfpsel.getFields('#userForm')
			.change(rsfpsel.storeValue);

		// we grab the special fields (calendar, map) and on mouseleave we call the storeSpecialValue function
		userForm.find('.yui-calcontainer, .rsformMaps')
			.mouseleave(rsfpsel.storeSpecialValue);

		// on form display, we check if the localstorage has data and if so, we let our user know and give him the option to use it
		if (rsfpsel.checkStorage()) {
			userForm.prepend('<div id="userFormAlertBox" class="alert alert-abn" role="alert">' +
				'<h3 class="margin-top:no">Continue with your previous form</h3>' +
				'<p>You filled this form previously without submitting it. If you would like to start a fresh submission.</p>' +
				'<button type="button" class="button button--secondary" data-dismiss="modal" id="delete">Clear stored Data</button>' +
				'</div>');

			rsfpsel.populate();


			// // Add form IDs here!
			rsfp_runAllConditions(formId);
			// rsfp_Calculations(formId);
			// getPrice(formId);

			document.addEventListener('click', function (event) {
				if (event.target.id === 'delete') {
					event.preventDefault();
					var reset = confirm('Are you sure you want to delete data?');
					if (reset) {
						remLSPref(storagePrefix);
						form.reset();
						rsfpsel.notifyStorage('warning');
						hideBoxes('userFormAlertBox');
					}
				}
			});
		}

	});

/* eslint-enable */