jQuery AutoForm Script Easy Form AutoComplete
Key Takeaways
- jQuery AutoForm script offers a fast and customizable solution for auto-filling web forms, supporting various form fields and automatically updating date fields to the current date.
- The script is easily integrated into web projects, allowing for quick setup via a bookmarklet that users can click to auto-fill forms on any page.
- Despite its versatility, jQuery AutoForm does not support forms embedded in iFrames or popup windows, and only works with fields that have “name” attributes.
jQuery AutoForm Features
- Fast – Fills forms in under 1 second
- Stable – Works on any browser
- Accessible – Can take the form of a browser bookmark for easy use
- Customisable – You can add inputs with any name/any value.
- Smart – Dates do not expire, it auto populates the date to the current date.
jQuery AutoForm Demo
This is a form containing some standard fields.
Create your own AutoForm
- Download JQUERY4U.UTIL.autoForm.js
- Customise your name, email and other form fields
- Edit the input field names to match specific forms
- Obfuscate (optional but nice)
- Prepend ‘javascript:’ to your obfuscated code and create a new bookmark
- Visit a form and simply click the bookmark
jQuery AutoForm Full Script
(function($) {
;var JQUERY4U = {};
;JQUERY4U.UTIL =
{
name: 'JQUERY4U.UTIL',
autoForm: function ()
{
/* field values fill forms */
var formValues = [];
formValues['firstname'] = 'jQuery';
formValues['middlename'] = '4u';
formValues['lastname'] = 'Blog';
formValues['mobile'] = '0416425699';
formValues['email'] = 'email@domain.com';
formValues['house'] = '123';
formValues['street'] = 'Bank Street';
formValues['city'] = 'Sunnybank';
formValues['country'] = 'Australia';
formValues['postcode'] = '4109';
formValues['message'] = 'This is the demo example of jQuery AutoForm.';
formValues['emailnewsletter'] = true;
/* field name mappings */
formValues['newsletter'] = formValues['emailnewsletter'];
formValues['housenumber'] = formValues['house'];
formValues['name'] = formValues['firstname'] + ' ' + formValues['middlename'] + ' ' + formValues['lastname'];
formValues['fullname'] = formValues['name'];
formValues['phone'] = formValues['mobile'];
formValues['suburb'] = formValues['city'];
formValues['address1'] = formValues['housenumber'] + ' ' + formValues['street'];
formValues['address2'] = formValues['suburb'];
formValues['address3'] = formValues['country'] + ' ' + formValues['postcode'];
/* enter more field mappings here */
/* date functions */
function twodigits(digits) {
return (digits > 9) ? digits : '0' + digits;
}
var fullDate = new Date();
var twoDigitDays = twodigits(fullDate.getDate());
var twoDigitMonth = twodigits(fullDate.getMonth() + 1);
var date = twoDigitDays + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
fullDate.setDate(fullDate.getDate()+7);
formValues['date'] = date;
/*serialize every input field on page */
var fields = $("input, select, textarea").serializeArray();
/* init - special input type fixes */
$('input[type=checkbox], input[type=radio]').attr('checked', true);
jQuery.each(fields, function(i, field){
/* check if field has a value in array */
if (formValues[field.name] !== 'undefined') {
$('input[name='+field.name+']').val(formValues[field.name]); /* generic inputs */
$('textarea[name='+field.name+']').val(formValues[field.name]); /* textarea */
$('select[name='+field.name+']').attr('selectedIndex', 1); /* select */
$('input[name='+field.name+']').attr('checked', formValues[field.name]); /* checkbox/radio */
}
});
}
};
JQUERY4U.UTIL.autoForm();
})(jQuery);
jQuery AutoForm Script (bookmark obfuscated minified version)
When your finished any customisations of auto populated field names your final script should look something like the code below. To convert this into a bookmark simple prepend “javascript:”.var _0xdd45=["x55x54x49x4C","x4Ax51x55x45x52x59x34x55x2Ex55x54x49x4C","x66x69x72x73x74x6Ex61x6Dx65","x6Ax51x75x65x72x79","x6Dx69x64x64x6Cx65x6Ex61x6Dx65","x34x75","x6Cx61x73x74x6Ex61x6Dx65","x42x6Cx6Fx67","x6Dx6Fx62x69x6Cx65","x30x34x31x36x34x32x35x36x39x39","x65x6Dx61x69x6C","x65x6Dx61x69x6Cx40x64x6Fx6Dx61x69x6Ex2Ex63x6Fx6D","x68x6Fx75x73x65","x31x32x33","x73x74x72x65x65x74","x42x61x6Ex6Bx20x53x74x72x65x65x74","x63x69x74x79","x53x75x6Ex6Ex79x62x61x6Ex6B","x63x6Fx75x6Ex74x72x79","x41x75x73x74x72x61x6Cx69x61","x70x6Fx73x74x63x6Fx64x65","x34x31x30x39","x6Dx65x73x73x61x67x65","x54x68x69x73x20x69x73x20x74x68x65x20x64x65x6Dx6Fx20x65x78x61x6Dx70x6Cx65x20x6Fx66x20x6Ax51x75x65x72x79x20x41x75x74x6Fx46x6Fx72x6Dx2E","x65x6Dx61x69x6Cx6Ex65x77x73x6Cx65x74x74x65x72","x6Ex65x77x73x6Cx65x74x74x65x72","x68x6Fx75x73x65x6Ex75x6Dx62x65x72","x6Ex61x6Dx65","x20","x66x75x6Cx6Cx6Ex61x6Dx65","x70x68x6Fx6Ex65","x73x75x62x75x72x62","x61x64x64x72x65x73x73x31","x61x64x64x72x65x73x73x32","x61x64x64x72x65x73x73x33","x30","x67x65x74x44x61x74x65","x67x65x74x4Dx6Fx6Ex74x68","x2F","x67x65x74x46x75x6Cx6Cx59x65x61x72","x73x65x74x44x61x74x65","x64x61x74x65","x73x65x72x69x61x6Cx69x7Ax65x41x72x72x61x79","x69x6Ex70x75x74x2Cx20x73x65x6Cx65x63x74x2Cx20x74x65x78x74x61x72x65x61","x63x68x65x63x6Bx65x64","x61x74x74x72","x69x6Ex70x75x74x5Bx74x79x70x65x3Dx63x68x65x63x6Bx62x6Fx78x5Dx2Cx20x69x6Ex70x75x74x5Bx74x79x70x65x3Dx72x61x64x69x6Fx5D","x75x6Ex64x65x66x69x6Ex65x64","x76x61x6C","x69x6Ex70x75x74x5Bx6Ex61x6Dx65x3D","x5D","x74x65x78x74x61x72x65x61x5Bx6Ex61x6Dx65x3D","x73x65x6Cx65x63x74x65x64x49x6Ex64x65x78","x73x65x6Cx65x63x74x5Bx6Ex61x6Dx65x3D","x65x61x63x68","x61x75x74x6Fx46x6Fx72x6D"];(function (_0x65dfx1){;;var _0x65dfx2={};;;_0x65dfx2[_0xdd45[0]]={name:_0xdd45[1],autoForm:function (){var _0x65dfx3=[];_0x65dfx3[_0xdd45[2]]=_0xdd45[3];_0x65dfx3[_0xdd45[4]]=_0xdd45[5];_0x65dfx3[_0xdd45[6]]=_0xdd45[7];_0x65dfx3[_0xdd45[8]]=_0xdd45[9];_0x65dfx3[_0xdd45[10]]=_0xdd45[11];_0x65dfx3[_0xdd45[12]]=_0xdd45[13];_0x65dfx3[_0xdd45[14]]=_0xdd45[15];_0x65dfx3[_0xdd45[16]]=_0xdd45[17];_0x65dfx3[_0xdd45[18]]=_0xdd45[19];_0x65dfx3[_0xdd45[20]]=_0xdd45[21];_0x65dfx3[_0xdd45[22]]=_0xdd45[23];_0x65dfx3[_0xdd45[24]]=true;_0x65dfx3[_0xdd45[25]]=_0x65dfx3[_0xdd45[24]];_0x65dfx3[_0xdd45[26]]=_0x65dfx3[_0xdd45[12]];_0x65dfx3[_0xdd45[27]]=_0x65dfx3[_0xdd45[2]]+_0xdd45[28]+_0x65dfx3[_0xdd45[4]]+_0xdd45[28]+_0x65dfx3[_0xdd45[6]];_0x65dfx3[_0xdd45[29]]=_0x65dfx3[_0xdd45[27]];_0x65dfx3[_0xdd45[30]]=_0x65dfx3[_0xdd45[8]];_0x65dfx3[_0xdd45[31]]=_0x65dfx3[_0xdd45[16]];_0x65dfx3[_0xdd45[32]]=_0x65dfx3[_0xdd45[26]]+_0xdd45[28]+_0x65dfx3[_0xdd45[14]];_0x65dfx3[_0xdd45[33]]=_0x65dfx3[_0xdd45[31]];_0x65dfx3[_0xdd45[34]]=_0x65dfx3[_0xdd45[18]]+_0xdd45[28]+_0x65dfx3[_0xdd45[20]];function _0x65dfx4(_0x65dfx5){return (_0x65dfx5>9)?_0x65dfx5:_0xdd45[35]+_0x65dfx5;} ;var _0x65dfx6= new Date();var _0x65dfx7=_0x65dfx4(_0x65dfx6[_0xdd45[36]]());var _0x65dfx8=_0x65dfx4(_0x65dfx6[_0xdd45[37]]()+1);var _0x65dfx9=_0x65dfx7+_0xdd45[38]+_0x65dfx8+_0xdd45[38]+_0x65dfx6[_0xdd45[39]]();_0x65dfx6[_0xdd45[40]](_0x65dfx6[_0xdd45[36]]()+7);_0x65dfx3[_0xdd45[41]]=_0x65dfx9;var _0x65dfxa=_0x65dfx1(_0xdd45[43])[_0xdd45[42]]();_0x65dfx1(_0xdd45[46])[_0xdd45[45]](_0xdd45[44],true);jQuery[_0xdd45[54]](_0x65dfxa,function (_0x65dfxb,_0x65dfxc){if(_0x65dfx3[_0x65dfxc[_0xdd45[27]]]!==_0xdd45[47]){_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[51]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[53]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[52],1);_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[44],_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);} ;} );} };_0x65dfx2[_0xdd45[0]][_0xdd45[55]]();} )(jQuery); [/cc]
Further Notes
- Will not work on iFrame embedded forms or popup windows.
- Will only fill in fields with “name” attributes.
- Dates do not expire – it auto populates the date to the current date.
Frequently Asked Questions about jQuery Autoform
How can I implement jQuery Autoform in my HTML code?
Implementing jQuery Autoform in your HTML code is a straightforward process. First, you need to include the jQuery library in your HTML file. You can do this by adding the following script tag in your HTML file’s head section: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
. After that, you can use the .autoform()
method to automatically fill your form. Here’s an example of how you can use it:$("#myForm").autoform({
data: {
name: "John Doe",
email: "john.doe@example.com"
}
});
In this example, #myForm
is the ID of your form, and data
is an object containing the form fields and their values.
Can I use jQuery Autoform with other JavaScript libraries?
Yes, jQuery Autoform can be used alongside other JavaScript libraries. However, you need to ensure that there are no conflicts between the libraries. jQuery provides a $.noConflict()
method that you can use to avoid conflicts with other libraries that use the `= symbol. Here’s how you can use it:$.noConflict();
jQuery(document).ready(function($) {
$("#myForm").autoform({
data: {
name: "John Doe",
email: "john.doe@example.com"
}
});
});
In this example, $.noConflict()
is called to give control of the = variable back to the other library. Then, jQuery's
$(document).ready()` method is used to ensure that the code inside it will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
How can I handle errors when using jQuery Autoform?
Handling errors in jQuery Autoform can be done using the .fail()
method. This method is called when the request to the server fails. Here’s an example of how you can use it:$("#myForm").autoform({
data: {
name: "John Doe",
email: "john.doe@example.com"
}
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("An error occurred: " + textStatus);
});
In this example, if the request fails, an alert box will be displayed with the error message.
Can I use jQuery Autoform to fill multiple forms at once?
Yes, you can use jQuery Autoform to fill multiple forms at once. You just need to select the forms using a common class or attribute and call the .autoform()
method on them. Here’s an example:$(".myForms").autoform({
data: {
name: "John Doe",
email: "john.doe@example.com"
}
});
In this example, all forms with the class myForms
will be filled with the specified data.
How can I customize the behavior of jQuery Autoform?
jQuery Autoform provides several options that you can use to customize its behavior. For example, you can use the onSuccess
option to specify a function that will be called when the form is successfully filled. Here’s an example:$("#myForm").autoform({
data: {
name: "John Doe",
email: "john.doe@example.com"
},
onSuccess: function() {
alert("Form successfully filled!");
}
});
In this example, an alert box will be displayed when the form is successfully filled.
Can I use jQuery Autoform with AJAX?
Yes, you can use jQuery Autoform with AJAX. You can use the $.ajax()
method to send a request to the server and then use the .done()
method to fill the form when the request is successful. Here’s an example:$.ajax({
url: "myData.json"
}).done(function(data) {
$("#myForm").autoform({
data: data
});
});
In this example, a request is sent to the server to fetch the data from the myData.json
file. When the request is successful, the form is filled with the fetched data.
How can I use jQuery Autoform with dynamic data?
You can use jQuery Autoform with dynamic data by passing a function to the data
option. This function should return the data that will be used to fill the form. Here’s an example:$("#myForm").autoform({
data: function() {
return {
name: $("#nameInput").val(),
email: $("#emailInput").val()
};
}
});
In this example, the form is filled with the values of the #nameInput
and #emailInput
input fields.
Can I use jQuery Autoform to fill select elements?
Yes, you can use jQuery Autoform to fill select elements. You just need to specify the value of the option that you want to select in the data
object. Here’s an example:$("#myForm").autoform({
data: {
country: "USA"
}
});
In this example, the country
select element will be filled with the “USA” option.
How can I use jQuery Autoform to fill checkbox and radio elements?
You can use jQuery Autoform to fill checkbox and radio elements by specifying a boolean value in the data
object. If the value is true
, the checkbox or radio button will be checked; if it’s false
, it will be unchecked. Here’s an example:$("#myForm").autoform({
data: {
agree: true
}
});
In this example, the agree
checkbox will be checked.
Can I use jQuery Autoform to fill textarea elements?
Yes, you can use jQuery Autoform to fill textarea elements. You just need to specify the text that you want to insert in the data
object. Here’s an example:$("#myForm").autoform({
data: {
message: "Hello, world!"
}
});
In this example, the message
textarea will be filled with the text “Hello, world!”.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.