22

Basically just trying to add text to an input field that already contains a value.. the trigger being a button..

Before we click button, form field would look like.. (user inputted some data)

[This is some text]
(Button)

After clicking button, field would look like.. (we add after clicking to the current value)

[This is some text after clicking]
(Button)

Trying to accomplish using javascript only..

Alexander
  • 23,432
  • 11
  • 63
  • 73
Z with a Z
  • 603
  • 2
  • 6
  • 12

4 Answers4

44

Example for you to work from

HTML:

<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />​

jQuery:

<script type="text/javascript">
$(function () {
    $('#button').on('click', function () {
        var text = $('#text');
        text.val(text.val() + ' after clicking');    
    });
});
<script>

Javascript

<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
    var text = document.getElementById('text');
    text.value += ' after clicking';
});
</script>

Working jQuery example: http://jsfiddle.net/geMtZ/ ​

nikodaemus
  • 1,918
  • 3
  • 21
  • 32
PhearOfRayne
  • 4,990
  • 3
  • 31
  • 44
  • 1
    This looks to be best solution.. i just don't get why it won't work on my end.. driving me nuts – Z with a Z Dec 18 '12 at 21:10
  • Ya.. It works great.. But when I put it on my end nothing is happening for whatever reason (even with tweaking it various ways).. I don't get it. Going to see if other suggestions work for me.. – Z with a Z Dec 18 '12 at 21:19
  • @ZwithaZ This might sound like a Duh moment, but have you included jQuery on your page as well? – PhearOfRayne Dec 18 '12 at 21:22
  • There's already a bunch on this page.. I am trying to figure out what I'm doing incorrectly or what is perhaps affecting this code. – Z with a Z Dec 18 '12 at 21:29
  • @ZwithaZ It sounds like your not using jQuery, if thats the case you only need to use a pure javascript example. I've updated my answer to include a pure javascript example. Give that a try, remember to not include the jQuery code. Let us know how it goes! – PhearOfRayne Dec 18 '12 at 21:31
  • No luck with any of it.. whatever.. I am not a programmer obviously.. I'll wait til my developer can do it tomorrow (just needed an urgent solution to something and was hoping to do it myself) Thanks again – Z with a Z Dec 18 '12 at 21:44
  • Although my solution was more complicated (took developer a little while to handle within our system) I am choosing this answer given it's the simplest with a working example. Thanks for your time! – Z with a Z Dec 24 '12 at 11:28
  • jQuery works but Javascript dose not seems to work. Since i am tryin similar functionlity though Android webview, i have to user javascript code not jQuery. and here Javascript code dose not seems to work in given example – Manisha Jan 12 '17 at 21:41
4

Here it is: http://jsfiddle.net/tQyvp/

Here's the code if you don't like going to jsfiddle:

html

<input id="myinputfield" value="This is some text" type="button">​

Javascript:

$('body').on('click', '#myinputfield', function(){
    var textField = $('#myinputfield');
    textField.val(textField.val()+' after clicking')       
});​
Peter Rasmussen
  • 16,474
  • 7
  • 46
  • 63
4

this will do it with just javascript - you can also put the function in a .js file and call it with onclick

//button
<div onclick="
   document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>
Hat
  • 1,691
  • 6
  • 28
  • 44
1

HTML

<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>​
</form>

Javascript

const myinputfield = document.querySelector("#myinputfield");

function text() {
  myinputfield.value = myinputfield.value + "after clicking";
}

I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.

https://codepen.io/frog22222/full/oNdPdVB

Potter Edgerton
  • 103
  • 6