Fork me on GitHub
jQuery form autofill

jQuery form autofill 0.1

simply autofill an empty form with data.

Download

jquery.formautofill.js   jquery.formautofill.min.js

How 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 );

Try it !

yes   no

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>

yes   no

 

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>

First form
Second form

 

With all html elements - my "unit test" 


						
			   			

			   		

			   		
					

			   			
			   						   			
						

							

								

									
									

										
									

								

								
								

									
									

										
									

								

									
								

									
									

										
									

								

									
								

									
									

										
									

								

								
								

									
									

										
									

								

								
								

									
									

										
    
											
  • 
												
											
    • 
										

									

								

								
								

									
									

										
    
											
  • 
												
											
    • 
										

									

								

								
								

									
									

										
    
											
  • 
												
											
    • 
											
  • 
												
											
    • 
											
  • 
												
											
    • 
											
  • 
												
											
    • 
										

									

								

								
								

									
									

										
    
											
  • 
												
											
    • 
											
  • 
												
											
    • 
											
  • 
												
											
    •