Sep032010
Easy Autofill jQuery Plugin
Here’s a little ditty I drew up in jQuery. It makes it so your autofill isn’t a parameter in your js, but pulls it directly from the hiding label that should already be there for accessibility/non-js users. Here is what you need to know:
The JS:
<script src="jquery.easy-autofill.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#search-form,#contact-form').autofill();
});
</script>
The html:
<form id="targeted-form"> <fieldset> <legend>Contact Me</legend> <label class="off-screen" for="contact-form">Name</label> <input name="s" type="text" /> <label class="off-screen" for="contact-form">Email</label> <input name="s" type="text" /> <label class="off-screen" for="contact-form">Comment</label> <textarea></textarea> <input class="submit" type="submit" value="Submit" /> </fieldset> </form>
It is important to know that the text that is used for the autofill is grabbing the label tag just before the input or textarea.