CODEWITHSUNDEEP
javascriptjqueryhtml
xknozi
xknozi

Reputation: 1495

Change placeholder text

How can I change the placeholder text of an input element?

For example I have 3 inputs of type text.

<input type="text" name="Email" placeholder="Some Text">
<input type="text" name="First Name" placeholder="Some Text">
<input type="text" name="Last Name"placeholder="Some Text">

How can I change the Some Text text using JavaScript or jQuery?

Upvotes: 118

Views: 323263

Answers (8)

Pratik Rana
Pratik Rana

Reputation: 27

In your javascript file

document.getElementsByName('Email')[0].placeholder = 'new text for email';

Upvotes: 3

Naz
Naz

Reputation: 2775

If you wanna use Javascript then you can use getElementsByName() method to select the input fields and to change the placeholder for each one... see the below code...

document.getElementsByName('Email')[0].placeholder='new text for email';
document.getElementsByName('First Name')[0].placeholder='new text for fname';
document.getElementsByName('Last Name')[0].placeholder='new text for lname';

Otherwise use jQuery:

$('input:text').attr('placeholder','Some New Text');

Upvotes: 208

Murtaza Manasawala
Murtaza Manasawala

Reputation: 725

For JavaScript use:

document.getElementsByClassName('select-holder')[0].placeholder = "This is my new text";

For jQuery use:

$('.select-holder')[0].placeholder = "This is my new text";

Upvotes: 1

Rajitha Alluri
Rajitha Alluri

Reputation: 117

Try accessing the placeholder attribute of the input and change its value like the following:

$('#some_input_id').attr('placeholder','New Text Here');

Can also clear the placeholder if required like:

$('#some_input_id').attr('placeholder','');

Upvotes: 2

arulmr
arulmr

Reputation: 8836

This solution uses jQuery. If you want to use same placeholder text for all text inputs, you can use

$('input:text').attr('placeholder','Some New Text');

And if you want different placeholders, you can use the element's id to change placeholder

$('#element1_id').attr('placeholder','Some New Text 1');
$('#element2_id').attr('placeholder','Some New Text 2');

Upvotes: 30

padma
padma

Reputation: 191

var input = document.getElementById ("IdofInput");
input.placeholder = "No need to fill this field";

You can find out more about placeholder here: http://help.dottoro.com/ljgugboo.php

Upvotes: 19

Lulu Pte
Lulu Pte

Reputation: 51

I have been facing the same problem.

In JS, first you have to clear the textbox of the text input. Otherwise the placeholder text won't show.

Here's my solution.

document.getElementsByName("email")[0].value="";
document.getElementsByName("email")[0].placeholder="your message";

Upvotes: 4

Rusty
Rusty

Reputation: 1303

Using jquery you can do this by following code:

<input type="text" id="tbxEmail" name="Email" placeholder="Some Text"/>

$('#tbxEmail').attr('placeholder','Some New Text');

Upvotes: 6

Related Questions