257

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?

3

13 Answers 13

438
$(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.

1
  • 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 7, 2018 at 10:18
102

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

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

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.

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

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.

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

8
  • 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, 2012 at 18:51
  • I think hes trying to make the placeholder text context sensitive based on the serMemdd DDL. I dunno.
    – Jason
    Feb 10, 2012 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, 2012 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, 2012 at 18:55
  • <select name="ddselect" id="serMemdd">
    – Jason
    Feb 10, 2012 at 18:56
9
$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});
4

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");
}
}
2

change placeholder text using jquery

try this

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

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

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

try this

$('#Selector_ID').attr("placeholder", "your Placeholder");
2
$(document).ready(function(){ 
  $('form').find("input[type=search]").each(function(ev)
  {
     $(this).attr("placeholder", "Search Whatever you want");
  });
});
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();
});
1
  • ...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? Feb 10, 2012 at 19:13
0

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
                );
            });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.