Wordpress inline label (jQuery)

Question

I'm building my new theme and I've a problem. I use jQuey 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, if, when I submit the comm, 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.

Answer 2

Why reinventing the wheel, while there are great plugins to do this, labelify. It can use the field's original label as the text displayed inside the field. Just check the plugin's page for the examples.