jquery clear input default value

Question

How can I clear the default value of an input form onfocus with jquery and clear it again when tha submit button is pressed?

<html>
        <form method="" action="">
            <input type="text" name="email" value="Email address" class="input" />
            <input type="submit" value="Sign Up" class="button" />
        </form>
</html>

<script>
$(document).ready(function() {
    //hide input text
    $(".input").click(function(){
        if ($('.input').attr('value') == ''){
            $('.input').attr('value') = 'Email address'; alert('1');}
        if  ($('.input').attr('value') == 'Email address'){
            $('.input').attr('value') = ''}
    });
});
</script>

Could you use the native placeholder attribute instead? There are various polyfills available to make it work in older browsers. — James Allardice
– James Allardice, Commented Aug 1, 2012 at 8:09
@JamesAllardice Why you not posted it as an answer? I think is the easiest and best solution. — jelies
– jelies, Commented Aug 1, 2012 at 8:16
@jelies - I didn't post it as an answer because while it does the same thing as what the OP is trying to do, it doesn't really answer what's wrong with their code. But I agree, it is definitely the easiest solution! — James Allardice
– James Allardice, Commented Aug 1, 2012 at 8:21
Yes it is a good answer and I have upvoted it, but I do not want to use the placeholder tag. — viktor
– viktor, Commented Aug 1, 2012 at 10:34

rj487 · Accepted Answer · 2016-12-06 07:49:49Z

138

You may use this..

<body>
    <form method="" action="">
        <input type="text" name="email" class="input" />
        <input type="submit" value="Sign Up" class="button" />
    </form>
</body>

<script>
    $(document).ready(function() {
        $(".input").val("Email Address");
        $(".input").on("focus", function() {
            $(".input").val("");
        });
        $(".button").on("click", function(event) {
            $(".input").val("");
        });
    });
</script>

Talking of your own code, the problem is that the attr api of jquery is set by

$('.input').attr('value','Email Adress');

and not as you have done:

$('.input').attr('value') = 'Email address';

edited Dec 6, 2016 at 7:49

rj487

4,6647 gold badges50 silver badges95 bronze badges

answered Aug 1, 2012 at 9:57

Kaustubh

1,5052 gold badges12 silver badges12 bronze badges

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

3 Comments

viktor Over a year ago

I have decided to use this answer as it seems the most elegant.

Kaustubh Over a year ago

thnx.i myself am new to jquery.this is my 1st accepted anser here,and third overall(as you can probably deduce by my reputation points)

Almino Melo Over a year ago

Why $('.input').removeAttr('value') does not work?

Sasha · Accepted Answer · 2015-08-12 07:59:21Z

18

$(document).ready(function() {
  //...
//clear on focus
$('.input').focus(function() {
    $('.input').val("");
});
   //clear when submitted
$('.button').click(function() {
    $('.input').val("");
});

});

edited Aug 12, 2015 at 7:59

answered Aug 1, 2012 at 8:12

Sasha

1,8161 gold badge17 silver badges18 bronze badges

2 Comments

Toni Michel Caubet Over a year ago

This is wrong $('.input').attr('value') = 'Email address';, should be $('.input').attr('value', 'Email address'); how is this answer upvoted?

Sasha Over a year ago

@ToniMichelCaubet Edited the answer, thank you. That code wasn't related to the question anyway. I copied it from topicstarter's code.

Faust · Accepted Answer · 2012-08-01 08:11:02Z

10

$('.input').on('focus', function(){
    $(this).val('');
});

$('[type="submit"]').on('click', function(){
    $('.input').val('');
});

answered Aug 1, 2012 at 8:11

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Comments

ToniWidmo · Accepted Answer · 2018-12-13 11:51:14Z

8

Unless you're really worried about older browsers, you could just use the new html5 placeholder attribute like so:

<input type="text" name="email" placeholder="Email address" class="input" />

edited Dec 13, 2018 at 11:51

ToniWidmo

5092 gold badges14 silver badges39 bronze badges

answered Aug 1, 2012 at 8:12

DJ Forth

1,5182 gold badges18 silver badges27 bronze badges

2 Comments

James Allardice Over a year ago

"Unless your really worried about older browser"... you can polyfill the placeholder attribute so it works in older browsers too. See my comment on the question, and see the Modernizr wiki for other examples.

DJ Forth Over a year ago

Yeah that's true, or you could just write a bit of JQuery to pull the attribute yourself if your keen.

Sébastien - Vélhost · Accepted Answer · 2012-08-01 08:10:24Z

3

Try that:

  var defaultEmailNews = "Email address";
  $('input[name=email]').focus(function() {
    if($(this).val() == defaultEmailNews) $(this).val("");
  });

  $('input[name=email]').focusout(function() {
    if($(this).val() == "") $(this).val(defaultEmailNews);
  });

answered Aug 1, 2012 at 8:10

Sébastien - Vélhost

6644 silver badges8 bronze badges

Comments

Toni Michel Caubet · Accepted Answer · 2015-08-21 19:11:46Z

2

Just a shorthand

$(document).ready(function() {
    $(".input").val("Email Address");
        $(".input").on("focus click", function(){
            $(this).val("");
        });
    });
</script>

answered Aug 21, 2015 at 19:11

Toni Michel Caubet

20.3k59 gold badges219 silver badges390 bronze badges

Comments

Mustapha GHLISSI · Accepted Answer · 2024-10-30 14:00:44Z

0

Here is the smallest and easiest way to clear a html input field using jQuery

$('#inputFieldId').val('');

That's it !

edited Oct 30, 2024 at 14:00

answered Oct 30, 2024 at 13:50

Mustapha GHLISSI

1,8161 gold badge20 silver badges21 bronze badges

Collectives™ on Stack Overflow

jquery clear input default value

7 Answers 7

3 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related