Appending text to input field on button click

Question

I'm trying to put 3 or 4 buttons that would help registering users to enter their e-mail addresses. Basically what I need is when they click "@gmail.com" button, their address will be completed with that. I ended up with a code like this:

function insertText(elemID, text) {
  var elem = document.getElementById(elemID);
  elem.innerHTML += text;
}

<form>
  <textarea id="txt1"></textarea>
  <input type="button" value="Insert some text" onclick="insertText('txt1', 'Hello');">
</form>

However as you can try and see, it's not working when a user enters some text inside and clicks the button. I want to resolve this issue with minimum amount of script and preferably without jQuery.

Note: I will place this code snippet inside a block, but the textarea might be not in the same block. Is that possible to still make use of it?

twharmon · Accepted Answer · 2020-04-13 20:18:12Z

1

A <textarea> element uses value not innerHTML:

function insertText(elemID, text) {
  var elem = document.getElementById(elemID);
  elem.value += text;
}

answered Apr 13, 2020 at 20:18

twharmon

3,7905 gold badges27 silver badges50 bronze badges

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

3 Comments

mert2312 Over a year ago

this is working perfectly fine, thanks for your help. but i'm unable to make it work in my page, since the text field is outside of the area i will put the code, in other words i won't create the text but will make use of an existing one. how can I achieve this?

twharmon Over a year ago

"i won't create the text" - are you referring to a string or to the textarea element?

mert2312 Over a year ago

i meant textarea, sorry if I couldn't explain it well. I will put this script and the button on an existing page, so button and text area will be in different div's. I tried to put the button and script, and it didn't worked, so I think the reason is their placement. I think I have no choice of putting them together. If that gives a clue, I'm using Ultimate Member and trying to modify their registration form with buttons for common mail domains, which will be appended to the given text on button click.

Kunal Raut · Accepted Answer · 2020-04-13 20:21:38Z

0

Change elem.text to elem.value in your code

function insertText(elemID, text) {
  var elem = document.getElementById(elemID);
  elem.value += text;
}

answered Apr 13, 2020 at 20:21

Kunal Raut

2,6042 gold badges14 silver badges25 bronze badges

1 Comment

mert2312 Over a year ago

this is working perfectly fine, thanks for your help. but i'm unable to make it work in my page, since the text field is outside of the area i will put the code, in other words i won't create the text but will make use of an existing one. how can I achieve this?

Collectives™ on Stack Overflow

Appending text to input field on button click

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related