Quick Way to Populate Form Fields for Testing

If you build forms you know that testing is a necessary evil. If have a lot of html elements on that form you know it feels like you have to visit hell every time you hit the start button. This is a trip that you always say to yourself, “there has to be a better easier way to test my form.” Well there is. It rests in a JQuery plugin called ‘Faker’. This is a great script which helps load random data into your form. It has hooks for every conceivable form input, from bit coin to web address and you can create your own. Once you have done this then testing your form is less painful.

Below is sample on how to implement this great jQuery helper plugin in under 5 steps.

1. Create a blank .js file and call it testdata.js

3. Create a link to it in your page form.

4. Add the following into your testdata.js


$(document).ready(function () {
    $('<button/>', {
        text: 'Load Random Data', //set text 1 to 10
        id: 'prefillTest',
        click: function () {

            $.getScript('//cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker.js')
.done(function () {
    PreFillForm();
})
.fail(function () {
    win.console.error('ERROR: FakerJS can not be loaded!');
});
     }
    }).appendTo('body');
});

// Load Faker JS library
var runfillform = function () {
}

MyFormData = function (faker) {
    this.randomWord = faker.Internet.domainWord();
    this.faker = faker;
    this.password = 'pass0000';
    this.address1 = faker.Address.streetAddress();
    this.city = faker.Address.city();
    this.state = faker.random.br_state_abbr();
    this.zip = faker.Address.zipCode();
    this.username = 'user_' + this.randomWord;
    this.name = faker.Name.findName();
};
PreFillForm = function () {
    data = new MyFormData(Faker);
    $('#name').val(data.name);
    $('#username').val(data.username);
    $('#address').val(data.address1);
    $('#city').val(data.city);
    $('#state').val(data.state);
    $('#zip').val(data.zip);
    $('#password').val(data.password);
}

Your html code looks something like this.

<head>

<title></title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
        <script src="JavaScript.js"></script>
	</head><body>
    <form id="form1" runat="server">
    	<div>
     		<div>
   			<label for="name">Name</label>
    			<input type="text" name="name" id="name"/>
  		</div>

  		<div>
    			<label for="name">Address:</label>:
    			<input type="text" name="address" id="address"/>
  		</div>
  		<div>
    			<label for="name">City:</label>:
    			<input type="text" name="City" id="city"/>
  		</div>
  		<div>
    			<label for="name">State:</label>:
    			<input type="text" name="state" id="state"/>
  		</div>
  		<div>
    			<label for="name">Zip Code:</label>:
    			<input type="text" name="zip" id="zip"/>
  		</div>
  		<div>
    			<label for="name">User Name:</label>:
    			<input type="text" name="username" id="username"/>
  		</div>
  		<div>
    			<label for="name">User Name:</label>:
    			<input type="password" name="password" id="password"/>
  		</div>

    	</div>
    </form>
</body>

You would separate it into a separate .js file so that when you are ready for production you simply remove the js link file and you are done.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 2 = 7

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>