Auto Fill Form Fields With Random Or Specific Values – Autofill.js

Preview:

Description:

Autofill forms on web pages is intended to facilitate the completion of forms by reducing the effort required of users. However most real-world HTML5 forms require user interaction and are intentionally left blank.

This tiny JavaScript library allows you to autofill form fields (text boxes, checkboxes, radio buttons, select boxes, etc) with either specific values or random values of your choice, so form filling will be a breeze.

How to use it:

1. Download and load the minified version of the Autofill.js library in the document.

<script src="./dist/js/autofill.min.js"></script>

2. Add significant attributes (such as type, name or id) to form fields as follows:

<input name="fullname" type="text" class="form-control" id="fullname">
<input type="text" class="form-control" id="search">
<input type="url" class="form-control" id="url">
<input type="datetime-local" class="form-control" id="datetime-local">
<select id="select" class="form-select">
  <option value="">-- Choose an option --</option>
  <option value="option1">1</option>
  <option value="option2">2</option>
  <option value="option3">3</option>
</select>
<input class="form-check-input" type="checkbox" id="checkbox">
<input class="form-check-input" type="radio" name="radio" id="radio-1" value="option1">
<progress id="progress" max="100"></progress>

3. Initialize the form fields with random data.

(async() => {
  await autofill()
  console.log('form inputs filled')
})()

4. Or specific data.

autofill({
  inputs: {
    email: '[email protected]',
    // username: 'jdoe', // input is not defined so it lets it empty
    selectMultiple: ['UKNW', 'PLCE'],
    checkboxes: ['option1', 'option2'],
    // as for selectMultiple you can check inputs by values
    checkboxes: [0, 1],
    // or by index position (result is the same as above)
  }
})

5. Or load data from JSON.

// data.json
{
  "config": {
    // options here
  },
  "forms": {
    "form": {
      "inputs": {
        "title": "Mr.",
        "name": "Doe",
        "firstname": "John",
        "age": "33",
        "email": "[email protected]",
        "username": "jdoe",
        "password": "J0hNDo3",
        "password_confirmation": "J0hNDo3",
        "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis ipsum eget lacus sagittis tempus...",
        "select": "option1",
        "select-multiple": [
          2,
          3
        ],
        "checkbox": false,
        "checkboxMultiple": [
          0,
          2
        ],
        "radio": [true, false, true],
        "range": 75
      }
    },
  }
}

autofill({
  url: 'data.json',
})

6. It also supports multiple forms.

autofill({
  generate: true,
  forms: {
    '#formId-1': {
      autosubmit: true,
      generate: false,
      inputs: {
        email: '[email protected]',
        password: '{{ password|len:16 }}'
      },
      'form.formClasses': {
        email: '[email protected]',
        password: '{{ password|len:100 }}'
      },
    },
    '#formId-2': {
      // ...
    }
  }
})

7. All possible options.

autofill({
  // enable autofill
  enable: true,
  // display an overlay with config infos & reset/autofill buttons
  overlay: false,
  // JSON config file url
  url: false,
  // form query selector
  formsSelectors: ['form'],
  // generated value must be valid according to inputs attributes ['type', 'minlength',
  validateInputAttributes: ['minlength', 'maxlength'],
  // emit submit event after form's inputs filling
  autosubmit: false,
  // e.g. allow input property 'inputName' to handle 'input-name' or 'input_name'
  camelize: false,
  // trigger events after value set
  events: ['input', 'change'],
  // generate random value where an input's value is formatted as follow {{ password|len?:16 }}
  generate: false,
  // input key attributes targets ordered from the highest priority to the lowest
  inputAttributes: ['data-autofill', 'name', 'id', 'class'],
  // skip autofilling when input has specific attribute. e.g. 'disabled' or 'readonly',
  inputAttributesSkip: [],
  // skip autofilling when input has specific type
  inputTypesSkip: [],
  // inputs support
  inputsSelectors: ['input', 'textarea', 'select', 'progress', 'meter'],
  // override already defined input value
  override: false,
  // if an input value is not defined it fills with a random value
  random: false,
  // if random === true && randomPreset === true then it tries to find a significant preset
  randomPreset: false,
  // handle value in html attribute
  valueAttribute: true,e, 
})

Changelog:

03/24/2025

• v2.0.0