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.

autofill()

4. Or specific data.

autofill({
  email: '[email protected]',
  selectMultiple: ['UKNW', 'PLCE'],
  checkboxes: ['option1', 'option2'],
  // ...
})

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 the plugin
  autofill: true,
  // auto submit the form
  autosubmit: false,
  // allows property 'inputName' to handle input 'input-name' or 'input_name'
  camelize: false,
  // generate random value where an input's value is formatted as follow {{ password|len:16 }}
  generate: false, 
  // input attributes used to autofill
  inputAttributes: ['data-autofill', 'name', 'id', 'class'],
  // skip these attributes:
  inputAttributesSkip: [],
  // skip these input types
  inputTypesSkip: [],
  // default form selectors
  formsSelectors: ['form'],
  // defaupt input selectors
  inputsSelectors: ['input', 'textarea', 'select', 'progress', 'meter'],
  // truncate if value length > maxlength attribute
  maxlength: false, 
  // fill with random char if value length < minlength attribute
  minlength: false, 
  // display an overlay with config infos & reset/autofill buttons
  // requies: autofill.min.css
  overlay: false, 
  // override already defined input value
  override: true, 
  // 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, 
})

Changelog:

02/22/2023

• v1.2.4