jQuery AutoForm Script Easy Form AutoComplete

Tired of filling in web forms? Testing heaps of web forms and keep losing your default values because you have to clear your cookies? Well do I have a treat for you! I have written this jQuery script called jQuery AutoForm and what it does is simple – it auto fills your web forms for you . It works on any forms, signup forms, registration forms, contact forms, basically any browser based form. Good for repetitive form testing saving you heaps of developing time. As most forms have different names such as “name”, “fullname”, “full-name” etc… it can handle this and is fully customisable for every type of form fields.

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.

Date
Name
Address



Email
Phone
Message

Newsletter


Run jQuery AutoForm

Create your own AutoForm

1. Download JQUERY4U.UTIL.autoForm.js
2. Customise your name, email and other form fields
3. Edit the input field names to match specific forms
4. Obfuscate (optional but nice)
5. Prepend ‘javascript:’ to your obfuscated code and create a new bookmark
6. Visit a form and simply click the bookmark

jQuery AutoForm Full Script

<span>(function($) {
</span> 
<span>;var JQUERY4U = {};
</span> 
<span>;JQUERY4U.UTIL =
</span><span>{
</span> 
    <span>name: 'JQUERY4U.UTIL',
</span> 
    <span>autoForm: function ()
</span>    <span>{
</span>        <span>/* field values fill forms */
</span>        <span>var formValues  = [];
</span>        formValues<span>['firstname'] = 'jQuery';
</span>        formValues<span>['middlename'] = '4u';
</span>        formValues<span>['lastname'] = 'Blog';
</span>        formValues<span>['mobile'] = '0416425699';
</span>        formValues<span>['email'] = 'email@domain.com';
</span>        formValues<span>['house'] = '123';
</span>        formValues<span>['street'] = 'Bank Street';
</span>        formValues<span>['city'] = 'Sunnybank';  
</span>        formValues<span>['country'] = 'Australia';
</span>        formValues<span>['postcode'] = '4109';
</span>        formValues<span>['message'] = 'This is the demo example of jQuery AutoForm.';
</span>        formValues<span>['emailnewsletter'] = true;
</span>     
        <span>/* field name mappings */
</span>        formValues<span>['newsletter'] = formValues['emailnewsletter'];
</span>        formValues<span>['housenumber'] = formValues['house'];
</span>        formValues<span>['name'] = formValues['firstname'] + ' ' + formValues['middlename'] + ' ' + formValues['lastname'];
</span>        formValues<span>['fullname'] = formValues['name'];
</span>        formValues<span>['phone'] = formValues['mobile'];
</span>        formValues<span>['suburb'] = formValues['city'];
</span>        formValues<span>['address1'] = formValues['housenumber'] + ' ' + formValues['street'];
</span>        formValues<span>['address2'] = formValues['suburb'];
</span>        formValues<span>['address3'] = formValues['country'] + ' ' + formValues['postcode'];
</span>        <span>/* enter more field mappings here */
</span>
        <span>/* date functions */
</span>        <span>function twodigits(digits) {
</span>            <span>return (digits > 9) ? digits : '0' + digits;
</span>        <span>}
</span>        <span>var fullDate = new Date();
</span>        <span>var twoDigitDays = twodigits(fullDate.getDate());
</span>        <span>var twoDigitMonth = twodigits(fullDate.getMonth() + 1);
</span>        <span>var date = twoDigitDays + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
</span>        fullDate<span>.setDate(fullDate.getDate()+7);
</span>        formValues<span>['date'] = date;  
</span>     
        <span>/*serialize every input field on page */
</span>        <span>var fields = $("input, select, textarea").serializeArray();
</span>     
        <span>/* init - special input type fixes */
</span>        <span>$('input[type=checkbox], input[type=radio]').attr('checked', true);
</span>     
        jQuery<span>.each(fields, function(i<span>, field</span>){
</span>            <span>/* check if field has a value in array */
</span>            <span>if (formValues[field.name] !== 'undefined') {
</span>                <span>$('input[name='+field.name+']').val(formValues[field.name]); /* generic inputs */
</span>                <span>$('textarea[name='+field.name+']').val(formValues[field.name]); /* textarea */
</span>                <span>$('select[name='+field.name+']').attr('selectedIndex', 1); /* select */
</span>                <span>$('input[name='+field.name+']').attr('checked', formValues[field.name]); /* checkbox/radio */
</span>            <span>}
</span>        <span>});
</span>    <span>}
</span><span>};
</span><span>JQUERY4U.UTIL.autoForm();
</span> 
<span>})(jQuery);</span>

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></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!”.

The above is the detailed content of jQuery AutoForm Script Easy Form AutoComplete. For more information, please follow other related articles on the PHP Chinese website!