How to save the value of INPUT in variable?

Question

How to save the value of INPUT in variable to not to write a lot of duplicate code?

like var input = $(this).val();

<div id="form">
    1. <input type="text" value="title" />
    2. <input type="text" value="value" />
</div>

$(function(){
  $('#form input:eq(0)').bind({
    focus: function(){
       if($(this).val()=='title'){
            $(this).val('');
        }
     },
     blur: function(){
       if($(this).val() == ''){
          $(this).val('title');
        }
     }
  });

  $('#form input:eq(1)').bind({
    focus: function(){
      if($(this).val()=='value'){
         $(this).val('');
      }
    },
     blur: function(){
        if($(this).val() == ''){
           $(this).val('value');
        }
    }
  });
});

Scott · Accepted Answer · 2010-10-29 08:43:24Z

3

I'm not exactly sure what you are asking, but this refactoring will work for toggling the value. EDIT: added default attribute to the html elements and shortened jQuery (still readable though) http://jsfiddle.net/UmZeZ/

<div id="form">
    1. <input type="text" value="title" default="title" />
    2. <input type="text" value="value" default="value" />
</div>


$(function() {
    $('#form input').bind('focus blur', function() {
        var value = $(this).attr('default');
        if ($(this).attr('value') == value) {
            $(this).attr('value', '');
        } else if ($(this).attr('value') === '') {
            $(this).attr('value', value);
        }
    });
});

edited Oct 29, 2010 at 8:43

answered Oct 29, 2010 at 7:52

Scott

1,47712 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Over a year ago

I refactored again, this time editing the input elements and combining the bindings. I think this is as short as you're going to get while still being readable.

Yi Jiang · Accepted Answer · 2010-10-29 10:50:34Z

3

To accomplish what you want, I would suggest using the HTML5 placeholder attribute. With Modernizr, we can detect browser support for this feature, and with this simple piece of code, we can get it to work even for browsers that do not support placeholder.

if(!Modernizr.input.placeholder){
    var input = $('input[type="text"]');

    input.focus(function(){
        if(this.value === this.getAttribute('placeHolder')) this.value = '';
    }).blur(function(){
        if(this.value === '') this.value = this.getAttribute('placeHolder');
    }).blur();
}

See a live demo of this here: http://www.jsfiddle.net/yijiang/cTDsL/1

edited Oct 29, 2010 at 10:50

answered Oct 29, 2010 at 8:38

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

2 Comments

Nik Chankov Over a year ago

your code work only if user doesn't go again in that field. If he return the field get blank again, but this is not useful. Also why you need to rely on HTML5 while jQuery (as you said) provide .data() function. If the user work with browser without HTML5 support your solution wont work.

Yi Jiang Over a year ago

@Nik Right, fixed. This works no matter whether HTML5 is used and supported or not. There's no reason why HTML5 shouldn't be used as soon as the browsers support them.

Nik Chankov · Accepted Answer · 2010-10-29 10:31:16Z

2

Here is my solution. I would work to any field which has class="set-default"

Checkout the working example

Here is the code:

$(function(){
    $('.set-default').bind({
    focus: function(){
        if(typeof($(this).data('def')) == 'undefined'){
               $(this).data('def', this.value)
        }
        if(this.value == $(this).data('def')){
           this.value = '';
        }
     },
     blur: function(){
       if(this.value == ''){
          this.value = $(this).data('def');
       }
     }
    })
});

basically all fields which had the class set-default will act as you like. You can always change the selector to $('#form input') but I think it's not useful.

HTH

edited Oct 29, 2010 at 10:31

answered Oct 29, 2010 at 8:17

Nik Chankov

6,0371 gold badge22 silver badges30 bronze badges

2 Comments

Yi Jiang Over a year ago

Don't compare against undefined - use typeof, don't create custom attributes - use .data(), don't wrap everything in jQuery's $() when you can use the DOM instead.

Nik Chankov Over a year ago

@Yi Jiang - totally right! re factored the code according to the best practives :)

Collectives™ on Stack Overflow

How to save the value of INPUT in variable?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related