jQuery form autofill
simply autofill an empty form with data.Download
jquery.formautofill.js jquery.formautofill.min.jsHow to use it
you have a form
<form id="f">
name <input type="text" name="name">
email <input type="text" name="email">
love jQuery
<input type="radio" name="lovejquery" value="yes"> yes
<input type="radio" name="lovejquery" value="no"> no
</form>
and data
var data = {
"name": "John Doe",
"email": "johndoe@mail.com",
"lovejquery": "yes"
}
autofill the form with data ? just do
$("#f").autofill( data );
Optional parameters:
you can pass an optional object as second argument. available options with default values are
var options = {
findbyname: true,
restrict: true
}
// autofill with options :
$("#f").autofill( data, options );
findbyname true : if true, find elements by name attribute. if false, find elements by id.
restrict true : if true, restrict the fields search in the node childs. if false, search in all the document.
Examples
findbyname false
<form id="f_findbyname">
name <input type="text" name="name" id="name_id">
email <input type="text" name="email" id="email_id">
love jQuery
<input type="radio" name="lovejquery" id="lovejquery_yes"
value="yes"> yes
<input type="radio" name="lovejquery" id="lovejquery_no"
value="no"> no
<input type="button" class="btn" value="autofill by id">
</form>
<script>
var data = {
"name_id": "John Doe",
"email_id": "johndoe@mail.com",
// always use "name" to find radio or checkbox multiple
"lovejquery": "yes"
}
$("#f_findbyname .btn").bind("click", function() {
$("#f_findbyname").autofill(data, {
findbyname: false
});
});
</script>
restrict false , findbyname false
<form id="f_restrict">
name <input type="text" name="name" id="name_not_restricted">
email <input type="text" name="email" id="email_not_restricted">
<input type="button" class="btn" value="autofill by id">
</form>
<script>
var data = {
"name_not_restricted": "John Doe",
"email_not_restricted": "johndoe@mail.com"
}
$("#f_restrict .btn").bind("click", function() {
$("body").autofill(data, {
findbyname: false,
restrict: false
});
});
</script>
restrict false , findbyname true
<form>
<legend>First form</legend>
name <input type="text" name="name_multiple">
email <input type="text" name="email_multiple">
</form>
<form>
<legend>Second form</legend>
name <input type="text" name="name_multiple">
email <input type="text" name="email_multiple">
<div id="f_restrict_only">
<input type="button" class="clickaction" value="autofill">
</div>
</form>
<script>
var data = {
"name_multiple": "John Doe",
"email_multiple": "johndoe@mail.com"
}
$("#f_restrict_only .clickaction").bind("click", function() {
$("body").autofill(data, {
restrict: false
});
});
</script>