Question

I’m building my new theme and I’ve a problem. I use jQuery to display the input’s label into the input :

this.label2value = function(){  

    var inactive = "inactive";
    var active = "active";
    var focused = "focused";

    $("label").each(function(){
        obj = document.getElementById($(this).attr("for"));
        if(($(obj).attr("type") == "text") || (obj.tagName.toLowerCase() == "textarea")){
            $(obj).addClass(inactive);
            var text = $(this).text();
            $(this).css("display","none");
            $(obj).val(text);
            $(obj).focus(function(){
                $(this).addClass(focused);
                $(this).removeClass(inactive);
                $(this).removeClass(active);
                if($(this).val() == text) $(this).val("");
            });
            $(obj).blur(function(){
                $(this).removeClass(focused);
                if($(this).val() == "") {
                    $(this).val(text);
                    $(this).addClass(inactive);
                } else {
                    $(this).addClass(active);
                };
            });
        };
    });
};
$(document).ready(function(){
    label2value();
});

But, the problem is when I submit the comm, if there’s not a website url WP uses the label as an URL (http://YourWebsiteURL).

How can I solve this problem ?

Answer 1

Your code fills the inputs with their labels, so they end up being submitted to the server.

The clean solution would be to stop toying with the input values, to use CSS to move the labels below the inputs (same position, lower z-index), and use jQuery to add/remove a transparent background on the inputs depending on whether they are under focus and/or empty.

This way, you can see the label through the input if it’s empty and not under focus

The quick and dirty solution, given your existing code, is to set up the submit event of your form, so that any fields containing the text of their own label are cleared whenever the form is submitted.