jQuery Populate Plugin – Accessibly auto-populate text inputs with ease.

As a follow up to my original post, I decided to take a stab at a jQuery plugin that people can use with ease.

It’s very simple, simple send a selector string to the jQuery function and call the populate() method:

Let’s assume the following markup in the body:

<form method="post" action="process_form.php">
<p>
    <label for="name">Enter your name:</label>
    <input type="text" name="name" id="name" class="autopop" title="Enter your name..." value="" />
</p>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.j"></script>
<script type="text/javascript" src="jquery.populate.js"></script>
<script type="text/javascript">
$(function(){
    $("form input.autopop").populate({color: "#999"});
});
</script>

It’s that simple. It’s fast, elegant, and accessible. You can even send an optional settings object with a color property. This will be used for the auto-populated text’s color.

See the demo, or download the zip.

5 Comments

  1. Kenny says…

    Perhaps I am just missing something but it seems like the demo doesn’t work? Where am I sending the values for the populate?

  2. andy says…

    @Kenny The text that is pre-populated is pulled from the element’s title attribute.

    Check out my original post for more info.

  3. Yamen Elasadi says…

    Missing the js which you can find at: http://www.456bereastreet.com/lab/autopopulating-text-input-fields/autopopulate.js

  4. Dave Stewart says…

    Might want to check out this: http://www.keyframesandcode.com/code/development/javascript/jquery-populate-plugin/

  5. andy says…

    @Dave awesome plugin! Way more comprehensive than mine. I want to keep this link in the comments thread, as mine is for more of a visual cue to the user than a true pre-population of form data, but I feel like not all traffic hitting this page is looking for the my functionality.

    Oh, and yours totally deserves the Populate naming rights!

RSS feed for comments on this post. TrackBack URL

Leave a Comment

April 28, 2009

Filed in Development, Tools

There are 5 comments »


« Back to the Blog