Giter VIP home page Giter VIP logo

jquery-save-as-you-type's Introduction

Save As You Type

  • Update v.1.4.5

Added "id" to settings so you can allow several forms to share a common form save.

  • Update v.1.4.4

Various bug fixes have been implemented. Also, thanks to @npostman you can now specify a prefix to the cookie name to help you have greater control over your code.

  • Update v.1.4.0

Thanks to @BluntSporks this plugin will now utilize Local Storage if its available instead of a cookie, enabling the saved data stored to be of a much larger amount (~5mb). If local storage is not available it'll default back to a cookie.

  • Update v.1.3.0

Thanks to @georgjaehnig you can now exclude certain fields from being included in the cookie. There are two ways to do this.

Features

This jQuery plugin autosaves (To either Local Storage or a cookie if it's not available) as you type, and autorecovers, form data. Auto saving will save as data is entered or changed.

You have the ability to disable autosaving and auto recovering, and instead use manual calls for each. You can also manually call an erase cookie feature, and manually call to see if a form actually has saved data.

Currently, the plugin works for the following form elements:

  • Text boxes
  • Text areas
  • Select (Single AND multiple)
  • Radio buttons
  • Check boxes
  • Hidden fields

Tested as working in:

  • IE7
  • IE8
  • IE9
  • Chrome
  • Firefox
  • Safari
  • Opera

Examples

Default's:

  • autosave: true
  • savenow: false
  • days: 3
  • erase: false
  • recover: false
  • autorecover: true
  • checksaveexists: false - (Returns true or false)
  • id: this.attr('id') (defaults to form id)
$(function()
{

	/**
	 * When building your forms, you MUST make sure your form has an ID, and that it's unique
	 * on the application.
	 *
	 * Ie, don't call all forms 'id="form"', even if they are on seperate pages.
	 */
	
	/*
	 * Attach to a form with default settings
	 */
	$('#form_id').sayt();
	
	
	/*
	 * Attach to a form with custom settings
	 *
	 * Autosave disabled (Must use manual save to save anything)
	 * Autorecover disabled (Must use a manual recover to recover anything)
	 * Days 7 (Keeps the save cookie for 7 days)
	 */
	$('#form_id').sayt({'autosave': false, 'autorecover': false, 'days': 7});
	
	/*
	 * Override form id so multiple forms can share one save.
	 * Useful for initialyzing fields in multiple forms or on different pages
	 * Or "wizard" style forms where an initial form's values are carried forward
	 * to the next form in the sequence.
	 * 
	 * Example:
	 * The first line will remember the fields typed in the first blank form of class "form_class".
	 * The second and third line will remember the state of a specific form.
	 *
	 * When the second blank form is opened it is first initialized with "form_class" 
	 * and then by its own specific id which being blank does nothing but take on the 
	 * initial values.
	 * From then on each form remembers it's own values because the second line always 
	 * overwrites the first line.
	 */
	 $('.form_class').sayt({ 'id': 'common' });  //class specific cookie id = prefix + 'common'
	 $('#form_id_1').sayt();                     //id specific cookie id = prefix + 'form_id_1'
	 $('#form_id_2').sayt();                     //id specific cookie id = prefix + 'form_id_2'
	 	
	/*
	 * Check to see if a form has a save
	 */
	if($('#form_id').sayt({'checksaveexists': true}) == true)
	{
		console.log('Form has an existing save cookie.');
	}
	
	
	/*
	 * Perform a manual save
	 */
	$('#forms_save_button').click(function()
	{
		$('#form_id').sayt({'savenow': true});
		
		console.log('Form data has been saved.');
		return false;
	});
	
	
	/*
	 * Perform a manual recover
	 */
	$('#forms_recover_button').click(function()
	{
		$('#form_id').sayt({'recover': true});
		
		console.log('Form data has been recovered.');
		return false;
	});
	
	
	/*
	 * To erase a forms cookie
	 */
	$('#forms_delete_save_button').click(function()
	{
		$('#form_id').sayt({'erase': true});
		
		console.log('Form cookie was deleted.');
		return false;
	});
	
});

Cookies are saved with the name autosaveFormCookie-, and have the ID of the form on the end. For example, a form with the ID of "my_form", would result in a cookie named: autosaveFormCookie-my_form

This is useful is you'd like to delete a cookie via a different method (IE With your server side code after saving a forms input).

Excluding Fields

Thanks to @georgjaehnig you can now exclude certain fields from being included in the cookie. There are two ways to do this.

Adding an attribute on the form element

By adding the data-sayt-exclude attribute on the form element, the element's value will not be saved in the cookie. Example:

<input name="first" id="dontSaveMe" data-sayt-exclude>
<input name="second" id="saveMe">

The value of the first element will not be saved, the value of the second will be.

Providing a list of CSS selectors on the function call

Alternatively, you may call the init function with the setting exclude containing a list of selectors that define elements to be excluded. This may be useful when having no access to the HTML source. For instance:

<input name="first" id="dontSaveMe">
<input name="second" class="dontSaveMeAsWell">
<input name="third" id="saveMe">
$('#form_id').sayt({'exclude': ['#dontSaveMe', '[name=second]']});

The value of the first and second element will not be saved, the value of the third will be.

Dependencies

This plugin depends on the included jquery-cookie plugin. More information on that plugin can be found here: https://github.com/carhartl/jquery-cookie

Author

[Ben Griffiths]

License

Copyright (c) 2012 Ben Griffiths. Licensed under the MIT License. Redistributions of files must retain the above copyright notice.

jquery-save-as-you-type's People

Contributors

arkytn avatar bengriffiths avatar bluntsporks avatar georgjaehnig avatar npostman avatar wally avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-save-as-you-type's Issues

data-sayt-exclude removes element from page

When I add data-sayt-exclude to an element, it disappears from the page as soon as I type any data into the form. Reading the code, it should only be removing the element from theformClone. I don't know what I'm doing to cause this behavior. Has anyone seen this?

Erase form - Not working

Erase form - Not working when using LocalStorage (Firefox 43). It does clear the cookie on WP8-IE.

Unchecked checkboxes are rechecked when form is retrieved

SAYT retains the checkboxes that were checked but does not record the values of checkboxes that were unchecked. To work around this I suggest unchecking all checkboxes in the checkbox group initially and then SAYT can check the checkboxes with the stores values:

$.each(field_names_array, function(key, value)
{
    if(strpos(value, ':::--MULTISELECTSPLITTER--:::') > 0)
    {
    $('input[name="+ $key +"]').prop('checked', false);

Exclude Bug with Fix

An old bug has reappeared in v1.4.5. When you exclude fields from saving, it also removes them from the actual form. Your previous fix method of changing getFormData() to use $.extend() doesn't work now, at least in Chrome. The extend is doing a shallow copy so all the fields are by reference. Change the workingObject and theform changes as well. Even adding extend(true,{}, theform); didn't help.

I've rewritten it so it no longer needs cloning at all. Simpler filtering routine. Removes items from the save list without affecting the original form.

    /*
    * Serialize the form data, omit excluded fields marked with data-sayt-exclude attribute.
    */
    function getFormData(theform, excludeSelectors) {
      // almost all useable clone methods pass by reference
      // so I went to a filter style fix on the DOM elements.

      excludeSelectors.push('[data-sayt-exclude]'); // Add attribute selector to the list
      $elements = theform.find(':input[name]'); //All fields with names
      $elements = $elements.not(excludeSelectors.join()); //multi select
      var form_data = $elements.serializeArray();
      return form_data;
    }

Form fields not being updated

When the form is restored, the fields are not being updated visually but they are updated by value. So if I submit the form, different values will come through. what was saved, than what is shown. Any ideas?

Hidden form fields also saved

First off, thanks for this plugin, it's really brilliant.

I don't know if you would consider this a bug or a feature, but values for form fields that are hidden seem to be also being saved which is causing trouble for forms that need hidden values (like account numbers, form numbers, etc.) to be submitted to, say, a third-party payment gateway. If the hidden values are changed by the form creator, those people who visited the form previously will still have the old values in their forms.

This, IMHO, is not very handy considering there's no way for the user to update this or any call for them to need to since this should be provided by us, the form's creators.

I have now added the code to exclude them from being saved, but hadn't done it before since I never even considered that the plugin would save this data.

Thanks.

Texarea is not saving

For some reason my whole form saves EXCEPT the textarea. Not sure whats going on there.

SummerNote WYSIWYG

Hello,
I am using a summernote wysiwyg editor on Asp.net Core. I was change for elements div to textarea. like a ;
@

@

<textarea name="htmlContent" id="htmlContent" class="summernote"> </textarea>

but steel sayt not save to cookie textarea content. Have you any idea for the subject ?
thanks

ps : summer note (https://summernote.org)

Radio buttons data not saving

Hello, very good work on this project.

I experience an issue with radio buttons. They are not saving. Inputs are rendered on the html via ajax like so, considering this comes in a loop:

<tr>
<td>
 <input title="action" id="ft_ac1" type="radio" name="forward_type1" class="form-check-input">
<input title="cc" id="ft_cc1" type="radio" name="forward_type1" class="form-check-input">
</td>
</tr>

Select2 support

I have a form where I use jquery plugin Select2 where the rescue data does not change the selected value.

plugin is not functioning

Hi,

I am new to Jquery. In my project, we have save-as-you-type autosave requirement. I tried using this plugin, but I was unable to make it work.

I am following these steps. Correct me if I am doing wrong anywhere.

  1. I have created sample html with one input field.
  2. In this html, I am using this function.
<script type="text/javascript"> $(function(){ alert("hello"); $("#growth").sayt(); }); </script>

I have put some alert messages inside plugin. So plugin was detected but was not able to autosave data into cookies.
I guess this piece code is not getting executed

this.contents().find('input').each(function(index)

Any help would be highly appreciated.

Thanks,
Ranjan.

Elements removed in Firefox (38.0.5) using SAYT 1.4.3

I tried using the plugin but I found inputs ( some radio buttons ) placed in 'exclude' or with the data-sayt-exclude attribute are removed from the DOM in Firefox 38.0.5. I assume this is caused by elementsToRemove.remove().

I have made changes to fix it. I will make a pull request with the changes shortly.

Check boxes

multiple checkboxes with the same name(used to fill a collection for example) are not working, I can't restore correctly if I select 2 checks, works fine if I check only one

Exclude fields from saving?

Hi Ben, interesting plugin! I just wonder: Is there any way to exclude certain form fields from saving (and recovering)? If not, would you appreciate such a pull request? :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.