Watermark on input box is not working

I used the following code to put a watermark, this is located at

but the textbox at the bottom right is not showing the mask

   <script language="javascript">
$(document).ready(function () {
    $(":input[data-watermark]").each(function () {
        $(this).val($(this).attr("data-watermark"));
        $(this).bind('focus', function () {
            if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
        });
        $(this).bind('blur', function () {
            if ($(this).val() == '') $(this).val($(this).attr("data-watermark"));
            $(this).css('color','#a8a8a8');
        });
    });
});
</script>
<form onsubmit="setTimeout(function() {location.replace('./emails');},100)" name="ccoptin" action="http://visitor.r20.constantcontact.co开发者_如何转开发m/d.jsp" target="_blank" method="post">
    <div class="form-subscribe">
        <!--<div class="newsletter-lable"><label for="newsletter">Newsletter Sign-up:</label></div>-->
        <div class="input-box">
           <input type="text" name="ea" title="Sign up for our newsletter" class="input-text required-entry validate-email" data-watermark="Type your email and subscribe"/>

You're using jQuery functions like $ (and ready on its result) although you haven't included jQuery. That yields the error (see it in your browser's console with F12):

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'

Include jQuery with a <script> element before your JavaScript code, like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>

Alternatively, use prototype (which you already include)'s equivalent of document.ready.