Serial Number Field

There are a few posts on this already (like this one) but they’re not really adaptable to this situation.

I have a shortcode that dynamically generates text content based on a custom field in my CRM, this is used to display a users serial number for their software, shown below:

The direct parent container for the serial number is #copyTarget2.

When the container is empty it is still rendered on the page but with no content, shown here:

I need to populate the empty container with ‘placeholder’ text, but not the kind that you can type over, just so that there is text visible that just reads – ‘No active serial number.’

Lastly, when the field is populated, the placeholder text needs to be hidden, it doesn’t really matter how it’s hidden so long as it’s not visible and doesn’t affect the text generated by the shortcode.

I also tried to adapt this JS Fiddle: http://jsfiddle.net/davidThomas/LAfN2/

From:

$('input:text').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = 'placeholdertext';
            /* or:
            el.placeholder = $('label[for=' + el.id + ']').text();
            */
        }
    });

To:

jQuery('#copyTarget2').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = 'No valid serial number.';
            /* or:
            el.placeholder = $('label[for=' + el.id + ']').text();
            */
        }
    });

CSS and HTML are like second languages to me but I’m new to JS so I can modify code a little but I can’t write it (yet), I’m wondering what the best JS solution would be to achieve this and why?

Read more here: Adding ‘placeholder’ text to an element using JS


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: