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,094
  • 11
  • 58
  • 74
Z with a Z
  • 603
  • 2
  • 6
  • 11

3 Answers3

42

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/ ​

skia.heliou
  • 1,670
  • 2
  • 19
  • 30
PhearOfRayne
  • 4,860
  • 3
  • 30
  • 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

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,607
  • 5
  • 27
  • 43
3

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
  • 15,634
  • 7
  • 44
  • 61