Populatr is a JavaScript plugin that will populate any form with pre-defined data to help reduce testing time.

What is Populatr?

On a recent project I needed to handle multiple large forms and monitor how the data handled each step of the way. Going through the forms manually is not only tedious, but very time consuming. To overcome this I decided to write a small, lightweight JavaScript plugin which will auto-fill form inputs based on given data.

Getting started

Populatr is very simple to use. We can use CSS selectors to target a form (ID, class, etc) and for inputs—including selects—it targets the name attribute. Take the following form for example:

<form id="demo-form">
  <input name="first-name" type="text">
  <input name="last-name" type="text">
  <input name="email" type="email">
</form>

To populate this form we need to initiate Populatr and then feed in some data:

Populatr.init(true, {
  '#demo-form': {             // CSS selector to select the form
    'first-name': 'Mark',     // 'Input name': 'Input value'
    'last-name': 'Goodyear',
    'email': '[email protected]'
  }
});

We initialise Populatr with Populatr.init() then pass in if it’s active using either true or false. Following this, we set the data to be used. The data can be passed in as a standard JavaScript object—as above—or we can specify an external JSON file, keeping the form data separate and to prevent bloating template files. Using the example above, initiate Populatr with a file to use:

Populatr.init(true, 'populatr.json');

Then populatr.json would look like:

{
  "#demo-form": {
    "first-name": "Mark",
    "last-name": "Goodyear",
    "email": "[email protected]",
  }
}

Note: double quotes are required for JSON.

Multiple forms

Defining multiple forms is possible by passing in multiple objects:

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

Input types

Most input types are supported, including newer HTML5 inputs. See the demo for the full range along with an example on populating them.

Thoughts?

If you have any thoughts, suggestions or issues, please leave a comment below.