Question

I’m creating a form, that needs to have examples in the input fields. So when you click in them, example will toggle away and you can insert your own value.

Also the examples need to be in a different class. And I think the best way to load the examples, is from the title tag. Because, when I submit the form.. I don’t want the examples to count.

Currently Im using this jQuery plugin: http://jquery.kuzemchak.net/toggleval.php
It basically works like it should, but the issue is with the submit. To clear out the input fields on submit, I made this script:

$(".formtable_submit").hover(function () {
    $(this).parents("form").find("input").each(function () {
        $(".toggleval:not(.toggleval_foc)").val("");
    });
});

So if you hover over submit, it will clear out all input fields with .toggleval class, but not the ones with user-inserted values in them (.toggleval_foc class).

I could also add to that script, that when you hover-out, then it would display the examples again.. But its not the best solution. The best way would be display them from title tag and on submit, the value tag would as it is.

If you could point me to a script or some idea, that would be awesome. I could not find any such script that worked.

Answer 1

What you are describing is placeholder functionality, and it should not be accomplished as a polyfill by putting any values into the real input fields, thus negating your need to clear out invalids on form submittal.

I suggest switching to a plugin that already has this stuff figured out, such as any of the plugins on this page under Web Forms: input placeholder. Modern browsers let you style the placeholder using the ::placeholder CSS pseudo-element and most of these polyfills give you a classed element to style for older browsers.