Populatr

Taking the pain out of testing forms.

What is it?

Populatr will populate any form with pre-defined data so you don't have to keep filling in forms during testing. Take a look below and see how it works.

Browser support: IE8+ and other major browsers. No library required.

Demo

Populatr supports the following inputs:

Check me
Option 1
Option 2
Option 3

Behind the scenes:

Populatr.init(true, {
  '#demo-form': {
    'text': 'Some text...',
    'email': '[email protected]',
    'password': 'Top secret password',
    'tel': '123456789',
    'number': '40',
    'url': 'http://markgoodyear.com',
    'search': 'value',
    'checkbox': 'true',
    'radiogroup': 'option2',
    'color': '#BADA55',
    'date': '2013-09-01',
    'month': '2013-09',
    'range': '3',
    'time': '17:39',
    'select': 'option2',
    'multi': ['option1', 'option3']
  },
});

How to use

Simply add populatr.js to the footer:

<script src="populatr.js"></script>

Basic setup

Populatr hooks onto the input's name attrbute. The form is specified by either an ID or class.

Example form:
<form id="demo-form">
  <input name="first-name" type="text">
  <input name="last-name" type="text">
  <input name="email" type="email">
</form>
Example form setup:
Populatr.init(true, {               // Initiate Populatr. Set false to quickly disable.
  '#demo-form': {                   // CSS selecor to match form markup
    'first-name': 'Mark',           // 'Input name': 'Input value'
    'last-name': 'Goodyear',
    'email': '[email protected]'
  }
});

Multiple forms

Multiple forms are very simple to set up:

Populatr.init(true, {
  '#form-one': {
    // Form one inputs...
  },
  '#form-two': {
    // Form two inputs...
  },
  '#form-three': {
    // Form three inputs...
  }
});

Advanced setup

Rather than define all form data within the page, you can specify to use an external JSON file. This can be useful incase you have large amounts of form data.

Initiate Populatr with JSON:
Populatr.init(true, 'populatr.json'); // Filename can be anything
populatr.json:
{
  "#demo-form": {
    "first-name": "Mark",
    "last-name": "Goodyear",
    "email": "[email protected]"
  }
}

Remember to use double quotes for JSON files.

Support

If you have any issues, feedback or suggestions, please log an issue on GitHub or find me on Twitter: @markgdyr.