CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Nyxynyx
Nyxynyx

Reputation: 63619

Using jQuery to set input box title to value

I am creating input text boxes that will set its title attribute as its value when the page is loaded. When the user clicks on a textbox, its value will be cleared, and when the textbox loses focus, either the user entered value will remain, or the default value will take its place.

Problem: I cant seem to make the textbox's value to be set on page load. Changing the value on focus and on blur works well though. What is wrong?

jQuery code

$(function() {
    ///////////////////
    // Register Form //
    ///////////////////
    $(".splash_register_short_input, .splash_register_long_input").value = $(this).attr('title');
    $(".splash_register_short_input, .splash_register_long_input").value = $(".splash_register_short_input, .splash_register_long_input").attr('title');

    $(".splash_register_short_input, .splash_register_long_input").focus(function() {
        if (this.value == $(this).attr('title')) {
            this.value = '';
        }
    });

    $(".splash_register_short_input, .splash_register_long_input").blur(function() {
        if (this.value == '') {
            this.value = $(this).attr('title');
        }
    });
});

HTML code

<div id="splash_register_form">
    <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" />
    <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" />
    <input type="text" name="register_email" class="splash_register_long_input" title="Email" />
    <input type="text" name="register_password" class="splash_register_long_input" title="Password" />
</div>

Upvotes: 2

Views: 8398

Answers (3)

j_freyre
j_freyre

Reputation: 4738

Something like that should work :

$(document).ready(function(){ 
  $('input[type=text]').focus(function(){ 
    if($(this).val() == $(this).attr('title'))
    {
      $(this).val('');
    }
  });

  $('input[type=text]').blur(function(){
    if($(this).val() == '')
    {
      $(this).val($(this).attr('title'));
    } 
  });
});

But you can also search for a jQuery plugin concerning "placeholder".

Upvotes: 1

Amritpal Singh
Amritpal Singh

Reputation: 1785

I think we need to enumerate here .each function should be used for assigning value to each textbox such as

    $(".splash_register_short_input, .splash_register_long_input").each(function(){
     $(this).val($(this).attr('title'));
    });

Upvotes: 1

James Hill
James Hill

Reputation: 61792

You're attempting to set a property that doesn't exist (.value) on a jQuery object. Use $("[YourSelector]").val() instead.

Change this:

$(".splash_register_short_input, .splash_register_long_input").value = $(this).attr('title');
$(".splash_register_short_input, .splash_register_long_input").value = $(".splash_register_short_input, .splash_register_long_input").attr('title');

To this:

$(".splash_register_short_input, .splash_register_long_input").val($(this).attr('title'));
$(".splash_register_short_input, .splash_register_long_input").val($(".splash_register_short_input, .splash_register_long_input").attr('title'));

Upvotes: 5

Related Questions