Populate a form with data from a query string
JavaScript Makefile
Latest commit 1784690 Mar 21, 2015 @fitnr 0.0.4
Permalink
Failed to load latest commit information.
lib add ender module Jan 31, 2015
.gitignore Initial commit Jan 31, 2015
LICENSE
Makefile makefile Jan 31, 2015
README.md expand readme Mar 20, 2015
bower.json add bower.json Mar 20, 2015
package.json 0.0.4 Mar 20, 2015
populateform.jquery.min.js
populateform.js simplify license Feb 1, 2015
populateform.min.js add compiled modules Jan 31, 2015
populateform.zepto.min.js add compiled modules Jan 31, 2015

README.md

Populateform

Populate a form with data from a query string. Super useful if you have a form as part of some dynamic content on your page, but don't need the weight of an entire library or framework.

Populateform is dependency-free, platform-agnostic and super-lightweight (< 1 KB).

Basics

<form action="" id="myForm">
    <input type="text" name="myField" type="text">
</form>

<script src="populateform.min.js"></script>
<script>
    var form = document.getElementById('myForm');
    var data = {'myField': 'Hello World'};

    // populate the form!
    populateform(form, data);
</script>

When the above is run, the text entry field will be populated with "Hello World".

The real fun is when you have a page with a query string, say: http://example.com?my_field=Hello+World.

// the form will be populated. 
populateform(form, document.location.search)

Extra keys in the data will be ignored, and form fields not in the data aren't touched.

Populate form will try to fire a change event at the appropriate time, old browsers may have trouble with that.

Use

Works great with Browserify:

// src/my-form.js
populateform = require('populateform');

/* 
    some code that defines an element and data...
*/
populateform(elem, data);

Then do something like this (maybe you use Grunt or Gulp).

$ browserify src/my-form.js > build/my-form.min.js

jQuery, Zepto, Ender, whatever

If you prefer to run with a library, use populateform.%.min.js. If you use Ender, run ender add populateform).

Use it like so:

// in real life, you would likely want to process and parse this.
var data = document.location.search;
$('#my_form').populateform(data);