Question

I have an HTML form that takes the user name,password & occupation. If the occupation happens to be a student then I create a new box using JavaScript to input the users university email. This works fine & I am also able to watermark the username and password boxes. However when the new university email box shows up i am unable to watermark it. I cant understand why.

$('#editfill_occupation').change(function() {
    if ($("#editfill_occupation").val() == "0") {
        $('#editfill_uniemail').watermark("Please enter your university email address ");
        $('#editfill_uniemail').show();
    }
    else {
        $('#editfill_uniemail').hide();
    }
});​

My editfill_uniemail is defined like this :

<input type="text" name="editfill_uniemail"  id="editfill_uniemail" style="display: none;" >

I also tried to make use of the placeholder attribute in the above definition but it does not work . What am i possibly doing wrong ? or is not the write way to watermark ?

Answer 1

Have you tried an HTML placeholder attribute?

EDIT: I see that you have, but my code works correctly.

Demo: http://jsfiddle.net/SO_AMK/4nGdQ/

HTML:

<select id="editfill_occupation">
    <option value="0">Providing demos for questions</option>
    <option value="1">Just kidding about that</option>
    <option value="2">But next time,</option>
    <option value="3">Please do your own :D</option>
</select>
<input type="text" name="editfill_uniemail" placeholder="Please enter your university email address" id="editfill_uniemail" style="display: none;" >​

The placeholder attribute is currently supported in all modern browsers except IE and will be supported in IE 10 (In this case, caniuse.com just doesn’t show one in IE)

Don’t forget a document.ready() handler…