Watermark works on only one field

floridaguy · August 15th, 2011, 10:25 AM

Page 387 Try It Out Step 3

The watermark is working for the Comments field but not for the other five

Just FYI at the bottom of step three it says "If you don't feel like typing all this code, remember you can get a copy of it from the code download that goes with the book." but the code in step three isn't in the download.

Here is the current version of my code:
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
height: 31px;
margin-left: 40px;
}
.Watermark
{
font-style: italic;
color: Gray;
}
</style>

</asp:UpdateProgress>
<script type="text/javascript">
$(function()
{
$(':input[type-text], textarea').each
(
function()
{
var newText = 'Please enter your ' +
$(this).parent().prev().text().toLowerCase().trim( );
$(this).attr('value', newText);
}).one('focus', function()
{
this.value = '', this.className = ''
}).addClass('Watermark').css('width', '300px');
});
</script>

floridaguy · August 15th, 2011, 10:29 AM

From the View Source:

<tr>
<td>
Business phone number</td>
<td>
<input name="ctl00$cpMainContent$ContactForm1$PhoneBusine ss" type="text" id="cpMainContent_ContactForm1_PhoneBusiness" />
</td>

<td>
 </td>
</tr>
<tr>
<td>
Comments</td>
<td>
<textarea name="ctl00$cpMainContent$ContactForm1$Comments" rows="2" cols="20" id="cpMainContent_ContactForm1_Comments" style="height:72px;width:397px;">

</textarea>
</td>
<td>
<span id="cpMainContent_ContactForm1_RequiredFieldValida tor4" class="ErrorMessage" style="display:none;">Enter a comment</span>
</td>
</tr>
<tr>

floridaguy · August 15th, 2011, 10:33 AM

Just noticed the resizing is not working for the first five fields either.

Imar · August 15th, 2011, 10:46 AM

Quote:

"If you don't feel like typing all this code, remember you can get a copy of it from the code download that goes with the book."

I think that's actually a "bug" in the book ;-) The code was there initially, but it's being replaced by a watermark plugin later in the chapter. Since the downloads contains the state of the application at the end of each chapter, this code isn't there. Anyway, the issue might be in this:

Code:

 
   $(':input[type-text], textarea').each

It's type=text as you're filtering input controls whose type is text. For you reference, here's the complete code from the book:

Code:

 
<script type="text/javascript">
$(function()
{
  $(':input[type=text], textarea').each
  (
    function()
    {
      var newText = 'Please enter your ' + $(this).parent().prev().text().toLowerCase().trim();
      var$(this).attr('value', newText);
    }).one('focus', function()
    {
      this.value = '', this.className = ''
    }).addClass('Watermark').css('width', '300px');
  });
</script>

floridaguy · August 15th, 2011, 10:52 AM

That solved the problem. Thanks for the great support!