Author: | 0kyn |
---|---|
Views Total: | 160 views |
Official Page: | Go to website |
Last Update: | February 22, 2023 |
License: | MIT |
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