Miss any of our Open RFC calls?Watch the recordings here! »

jquery-prefill-form

1.0.0 • Public • Published

jqueryPrefillForm

This is a jQuery plugin which simply pre-fills form inputs based on JSON data passed in; that said, it is smart enough to find the correct form to autofill for you and it knows how to fill all different kinds of inputs.

Basic Usage

Include the plugin, and then either in a document ready block or simply at the bottom of your page, include code like the following:

$("#someForm").prefillForm({
  data: {
    name: 'foo',
    birthday: '1/18/2013',
    gender: 'm',
    contact_prefs: ['email', 'sms'],
    referral_source: 'stackoverflow',
    bio: "I am the very model of a modern major general,<br />I've information vegetable, animal, and mineral."
  }
});

Note that this method will only fill the form indicated by the selection criteria, and it will always use the values you see above (not the ones submitted in the form).

Better Examples Using PHP

A more "real" example would be to use a server language like PHP to get the submitted values and fill the form:

$("#someForm").prefillForm({
  data: eval(<?= json_encode($_REQUEST) ?>)
});

Of course, if you wanted to abstract use of the plugin to some kind of startup script, you could do this:

$(document.ready(function() {
  // handles POST or GET on any form on the page that matches an action with the current location
  var p = new $.Prefiller({
    data: eval(<?= json_encode($_REQUEST) ?>),
    method: "<?= $_SERVER['REQUEST_METHOD'] ?>"
  });
  p.doFill();
});

And if you had some data retrieved from an Active Record class like User, you could pre-fill an edit form like this:

$("#userEditForm").prefillForm({
  data: eval(<?= $myUserObject->toJSON() ?>),
  dateFormat: 'Y-m-d',
  dateClasses: ['birthday'],
  ignoreNames: ['newStatus'] // maybe this should always be blank...
});

Features

  • Auto-form finding: You can abstract the use of this plugin to a central controller and simply pass in the data necessary to fill the form. The plugin will try to find the correct form to prefill for you, so you don't need to burden your page with extra code.
  • Fill any input type: The plugin will correctly fill all standard form fields in the correct manner. This includes detecting if the field is a radio button, checkbox, selct box, etc and correctly check, select, or fill with the appropriate value. (Works with hidden inputs as well.)
  • Simple date formatting: If you add a class to your input (default is 'date' or 'datepicker'), then the plugin will format the value you provide. (Useful if you get back MySQL timestamps, but you need a pretty date displayed.)
  • Ignore fields by name, id, or type: Just add the name, id, or type (or tagname) to the appropriate array in the options and you can ignore any field you need to. (For example, inputs with a type of "password" are ignored by default.)

Options

  • form: The form to prefill. Note that using this option will override a jQuery selected &lt;form&gt; node if called in a chain: $("form").prefillForm(...) (default: null)
  • action: If provided, only forms with an exact matching action will be selected (default: null)
  • data: The request data to prefill with (should probably either be POST or GET data as a hash, see examples for more info) (default: {})
  • findForm: If no form is provided directly, should the plugin find a matching form on the page? (default: true)
  • matchMethod: Should the form finder match the method as well as action? (default: true)
  • method: The form method to check for (only used when the matchMethod option set to true) (default: "get")
  • matchEmptyAction: Should the form finder match empty form action attributes? (default: true)
  • ignoreNames: A list of field names to ignore when prefilling; case insensitive (default: ["MAX_FILE_SIZE"])
  • ignoreIds: A list of field id's to ignore when prefilling (default: [])
  • ignoreTypes: A list of field type attributess (for &lt;input&gt;) or tag names (&lt;textareagt;, etc) to ignore (NOTE: always make these are lower case! The matching input type or tag name will be converted to lower case.) (default: ['button', 'submit', 'reset', 'password'])
  • convertBrToNewLine: For texarea's, should &lt;br /&gt; tags be converted to new line characters for display in the textarea? (default: true)
  • dateClasses: A list of classes to check for in order to do date formatting (make this null (or empty) to disable date formatting). (default: ['date', 'datepicker'])
  • dateFormatter: The format function being used. If you provide your own function it must take the Date object as the first argument and the string format as the second. (default: $.Prefiller.formatDate)
  • dateParser: The parsing function used to create Date objects from data. You can provide your own date parsing function, but it must take a string date value as it's sole argument. (default: function(v) { return (new Date(v)); } )
  • dateFormat: The format to be used for display, passed into the dateFormatter option as the second argument. For the interal dateFormatter function this string uses PHP date() characters (but only some, see Date formatters below) (default: "m/d/Y")
  • location: Should only be used for testing, must include valid pathname and host entries. (default: window.location)

The following date format characters are used in the date formatter, this is a subset of the PHP date() characters, and no character escaping is allowed:

  • 'Y': four digit year
  • 'm': two digit month
  • 'n': one or two digit month
  • 'j': two digit day
  • 'd': one or two digit day
  • 'H': two digit hours on 24-hour clock
  • 'G': one or two digit hours on 24-hour clock
  • 'h': two digit hours on 12-hour clock
  • 'g': one or two digit hours on 12-hour clock
  • 'i': two digit minutes
  • 's': two digit seconds
  • 'a': meridiem ("am"/"pm")

Install

npm i jquery-prefill-form

DownloadsWeekly Downloads

3

Version

1.0.0

License

MIT

Last publish

Collaborators

  • avatar