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.
RSS feed for comments on this post. TrackBack URL
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?
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.
Yamen Elasadi says…
Missing the js which you can find at: http://www.456bereastreet.com/lab/autopopulating-text-input-fields/autopopulate.js
Dave Stewart says…
Might want to check out this: http://www.keyframesandcode.com/code/development/javascript/jquery-populate-plugin/
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!