Question

I am using the following script to add default values to input text boxes:

$('.default-value').each(function() {
    var default_value = this.value;
    $(this).css('color', '#746F66'); // this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', 'black');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#746F66');
            this.value = default_value;
        }
    });
});

With the following form:

<form method="post" action="contactengine.php">
    <input type="textbox" class="default-value" name="Name" id="Name" value="Full Name">

    <input type="textbox" class="default-value" name="Email" id="Email" value="Email">

    <textarea name="Message" class="default-value" name="Message" id="Message" value="Your message"></textarea>

    <input type="submit" name="submit" id="submit" value="Submit" class="submit-button" />
</form>

The default values work fine for the textboxes, but I can’t work out how to get the default value into the textarea. At the moment nothing is showing up in the textarea, as you can see here.

Could someone help with this?

Thanks,

Nick

Answer 1

Try changing this line:

var default_value = this.value;

To:

var default_value = $(this).val();

This is because a textarea doesn’t have a value attribute, to assign a default text to this element simple place the text between the opening, and closing, tags of the element, as such:

<textarea name="Message" class="default-value" name="Message" id="Message">Your message.</textarea>

JS Fiddle demo.

---

Edited after testing, in Chromium 12/Ubuntu 11.04, to discover that as far as JavaScript is concerned (at least for this browser/platform) var default_value = this.value; works to assign the default_value correctly.

JS Fiddle demo.