Change Placeholder Text using jQuery

Question

I am using a jQuery placeholder plugin(https://github.com/danielstocks/jQuery-Placeholder). I need to change the placeholder text with the change in dropdown menu. But it is not changing. Here is the code:

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
});

My Html:

<div class="filterbox">
        <select name="ddselect" id="serMemdd">
            <option value="1" selected="selected">Search by Name</option>
            <option value="2">Search by ID</option>
            <option value="3">Search by Location</option>
        </select>
        <input id="serMemtb" type="text" style="width: 490px" placeholder="Type a name    (Lastname, Firstname)" />
        <input id="seMemBut" type="button" value="Search" />
    </div>

Can anyone figure this out?

@Blankasaurus - BS does not have this built in. Placeholder attribute works natively in modern browsers, but there is no polyfill for IE: https://github.com/twitter/bootstrap/issues/2401 — Jannie Theunissen, Mar 09 '13 at 17:43

score 433 · Accepted Answer · edited Oct 31 '12 at 07:00

433

$(document).ready(function(){ 
  $('form').find("input[type=textarea], input[type=password], textarea").each(function(ev)
  {
      if(!$(this).val()) { 
     $(this).attr("placeholder", "Type your answer here");
  }
  });
});

Copy and paste this code in your js file, this will change all placeholder text from whole site.

edited Oct 31 '12 at 07:00

bipen

36,319
9
49
62

answered Oct 31 '12 at 06:40

Neshat Khan

4,354
1
13
3

3

You should omit the `if`-statement, as usually you want to set the placeholder no matter if the input element has a value or not. Otherwise, no placeholder is shown if the user empties the input element. – isnot2bad May 07 '18 at 10:18

score 102 · Answer 2 · edited Jul 06 '16 at 05:35

102

You can use following code to update a placeholder by id:

$("#serMemtb").attr("placeholder", "Type a Location").val("").focus().blur();

edited Jul 06 '16 at 05:35

RadioRaheem

198
1
14

answered Sep 10 '13 at 09:28

Creator

1,021
1
7
2

score 28 · Answer 3 · answered May 15 '15 at 09:43

28

simply you can use

$("#yourtextboxid").attr("placeholder", "variable");

where, if variable is string then you can use like above, if it is variable replace it with the name like "variable" with out double quotes.

eg: $("#youtextboxid").attr("placeholder", variable); it will work.

answered May 15 '15 at 09:43

Krish

648
1
8
17

I have tested this but it seems you need to clear the value first if it was there. __$("#youtextboxid").val("");__ – Ajowi Jan 30 '22 at 13:20

ori · Answer 4 · 2012-02-10T19:29:48.840

The plugin doesn't look very robust. If you call .placeholder() again, it creates a new Placeholder instance while events are still bound to the old one.

Looking at the code, it looks like you could do:

$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();

EDIT

placeholder is an HTML5 attribute, guess who's not supporting it?

Your plugin doesn't really seem to help you overcome the fact that IE doesn't support it, so while my solution works, your plugin doesn't. Why don't you find one that does.

Jason · Answer 5 · 2012-02-10T19:38:09.653

10

$(this).val() is a string. Use parseInt($(this).val(), 10) or check for '1'. The ten is to denote base 10.

$(function () {
    $('input[placeholder], textarea[placeholder]').blur();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == '1') {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == '2') {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == '3') {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

Or

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = parseInt($(this).val(), 10);
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

Other Plugins

ori has brought to my attention that the plugin you are using does not overcome IEs HTML failure.

Try something like this: http://archive.plugins.jquery.com/project/input-placeholder

edited Feb 10 '12 at 19:38

answered Feb 10 '12 at 18:47

Jason

11,435
24
77
131

Note for OP: Also note that the change event is hooked to the select box, not the text input. `$('#serMemdd').change(function () {` – Benjam Feb 10 '12 at 18:51
I think hes trying to make the placeholder text context sensitive based on the serMemdd DDL. I dunno. – Jason Feb 10 '12 at 18:52
Yeah, that's what it seems like to me, but in his JS, he has the change event hooked to the textarea, which is not where it should be hooked if that is the functionality he is after. That's why I called out a note to that change in your code, in case he wasn't aware. – Benjam Feb 10 '12 at 18:54
Updated my answer with blur() since .placeholder() messes stuff up if you call it more than one time. You should call it in your doc.ready to set it up though. – Jason Feb 10 '12 at 18:55
– Jason Feb 10 '12 at 18:56
I Have tried with your code, but it is not working in IE. In chrome due to HTML5 placeholder, it works fine. What happens in IE is that , on select from dropdown, placeholder becomes normal text(with prev text) and I have to remove it manually and when I click outside the textbox, the correct placeholder text appears – Krishh Feb 10 '12 at 19:05
I think this still answers your initial question as to why the code you has wasn't being executed. If you want IE support you will have to get a new plugin that doesn't rely on HTML5. Sorry =( – Jason Feb 10 '12 at 19:39
And **if** you copied the `blur` from my answer, you should've mentioned it. – ori Feb 10 '12 at 19:39

score 9 · Answer 6 · edited Dec 10 '19 at 07:47

9

$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});

edited Dec 10 '19 at 07:47

Ankur Loriya

3,276
8
31
58

answered Dec 10 '19 at 06:00

Bunty Kazi

111
1
3

score 4 · Answer 7 · answered Jan 13 '15 at 08:44

working example of dynamic placeholder using Javascript and Jquery http://jsfiddle.net/ogk2L14n/1/

<input type="text" id="textbox">
 <select id="selection" onchange="changeplh()">
     <option>one</option>
     <option>two</option>
     <option>three</option>
    </select>

function changeplh(){
    debugger;
 var sel = document.getElementById("selection");
    var textbx = document.getElementById("textbox");
    var indexe = sel.selectedIndex;

    if(indexe == 0) { 
     $("#textbox").attr("placeholder", "age");

}
       if(indexe == 1) { 
     $("#textbox").attr("placeholder", "name");
}
}

Love Kumar · Answer 8 · 2019-07-05T09:58:21.233

2

change placeholder text using jquery

try this

$('#selector').attr("placeholder", "Type placeholder");

edited Jul 05 '19 at 09:58

answered Jul 05 '19 at 09:23

Love Kumar

1,056
9
10

score 2 · Answer 9 · edited Jul 05 '19 at 10:31

2

If the input is inside the div than you can try this:

$('#div_id input').attr("placeholder", "placeholder text");

edited Jul 05 '19 at 10:31

Anna Tolochko

1,795
14
20

answered Jul 05 '19 at 09:59

Love Kumar

1,056
9
10

score 2 · Answer 10 · answered Nov 01 '19 at 06:01

2

try this

$('#Selector_ID').attr("placeholder", "your Placeholder");

answered Nov 01 '19 at 06:01

Love Kumar

1,056
9
10

score 2 · Answer 11 · answered Dec 10 '19 at 06:04

2

$(document).ready(function(){ 
  $('form').find("input[type=search]").each(function(ev)
  {
     $(this).attr("placeholder", "Search Whatever you want");
  });
});

answered Dec 10 '19 at 06:04

Bunty Kazi

111
1
3

Timothy Aaron · Answer 12 · 2012-02-10T19:07:38.450

1

Moving your first line to the bottom does it for me: http://jsfiddle.net/tcloninger/SEmNX/

$(function () {
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
    $('input[placeholder], textarea[placeholder]').placeholder();
});

edited Feb 10 '12 at 19:07

answered Feb 10 '12 at 18:53

Timothy Aaron

3,059
19
22

...well, the placeholder attribute is changing in Chrome for me anyways. When I check it in IE, the attribute is getting changed, but it's not actually displaying it. Are you sure that's a reliable plugin? – Timothy Aaron Feb 10 '12 at 19:13

score 0 · Answer 13 · answered Nov 17 '19 at 19:31

this worked for me:

jQuery('form').attr("placeholder","Wert eingeben");

but now this don't work:

// Prioritize "important" elements on medium.
            skel.on('+medium -medium', function() {
                jQuery.prioritize(
                    '.important\\28 medium\\29',
                    skel.breakpoint('medium').active
                );
            });

Change Placeholder Text using jQuery

13 Answers13

Or

Other Plugins

Linked