How to get text field values in Javascript

Question

I have the following HTML/JS code:

<!DOCTYPE html>
<html>
<body>
<input type='text' id='action' placeholder='defualt'>
<button type='button' onclick='document.getElementById("action").placeholder="it worked!"'>Change Placeholder</button>
</body>
</html>

When the button is pressed, the placeholder value of the action text input field is set to 'it worked!'

What I would like to do is make the script set the placeholder of the field whatever the user puts into it when the user presses the button. How should I do this?

Have you attempted this first? Based on your code (using document.getElementById) it appears you would know how to do that. — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 26, 2017 at 4:35

Nisarg Shah · Accepted Answer · 2017-11-26 04:44:47Z

2

To access the input element's value, you can access .value property. Then just like you set the placeholder, you can assign that to .placeholder property.

Finally, if you wish to have the placeholder visible immediately, you can reset the value by setting it to an empty string.

function setPlaceHolder() {
  var input= document.getElementById("action");
  input.placeholder=input.value;
  input.value = "";
}

<!DOCTYPE html>
<html>

<body>
  <input type='text' id='action' placeholder='defualt'>
  <button type='button' onclick='setPlaceHolder();'>Change Placeholder</button>
</body>

</html>

answered Nov 26, 2017 at 4:44

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

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

Comments

Nisal Edu · Accepted Answer · 2017-11-26 04:41:25Z

2

Try this

function myfns() {

var x = document.getElementById("action").value;
console.log(x)

  document.getElementById("action").placeholder = x
  
  document.getElementById("action").value = "";

}

<html>

<body>
  <input type='text' id='action' placeholder='defualt'>
  <button type='button' onclick='myfns()'>Change Placeholder</button>
</body>

</html>

answered Nov 26, 2017 at 4:41

Nisal Edu

7,6294 gold badges32 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to get text field values in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related