jQuery add text to input on click

Question

I am trying to use javascript to have a link created on page load and then when that link is clicked to insert content into a div.

This is where I'm at so far...

<div class="inside">
</div>

<div class="content">
<input type="textarea">
</div>

<script>
jQuery( document ).ready(function() {
   jQuery( ".inside" ).append( '<p><a href="">Insert Content</a></p>' );
});
</script>

Fiddle: https://jsfiddle.net/03afj8fd/

Now I need to be able to insert some preset content into the input box when the generated link is clicked. Anyone point me in the right direction of an example?

See [value in an input text box](http://stackoverflow.com/questions/4088467/get-the-value-in-an-input-text-box#answer-15903284) and [api.jquery.com/val](http://api.jquery.com/val/) — showdev, Nov 18 '15 at 20:55
Here is a working [JSFiddle](https://jsfiddle.net/03afj8fd/9/) — Raphael Parent, Nov 18 '15 at 21:00

score 2 · Accepted Answer · answered Nov 18 '15 at 20:58

Here is an example. Also there is no type textarea. textarea is the element tag.

Fiddle: https://jsfiddle.net/AtheistP3ace/03afj8fd/3/

HTML:

<div class="inside"></div>
<div class="content">
    <textarea></textarea>
</div>

JS:

jQuery(document).ready(function () {
    $(".inside").append('<p><a id="myLink" href="#">Insert Content</a></p>');
    $('#myLink').on('click',
        function () {
            $('textarea').val('some content');
        }
    );
});

score 1 · Answer 2 · answered Nov 18 '15 at 21:07

You can put the preset content in the a element so that if you have so many such elements then it would be flexible as each element will have it's own preset content.

jQuery( document ).ready(function() {
   jQuery( ".inside" ).append( '<p><a href="" data-preset="Preset Content">Insert Content</a></p>' )
   
   //set up an event listner for the a element
   .on('click', 'p > a', function( e ) {
       e.preventDefault();
       jQuery('.content > textarea').val( $(this).data('preset') );
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="inside"></div>
<div class="content"><textarea></textarea></div>

score 0 · Answer 3 · answered Nov 18 '15 at 20:57

jQuery( document ).ready(function() {
   jQuery( ".inside" ).append( '<p><a href="#" id="samplelink">Insert Content</a></p>' );
});

Now you need to define .on for the a#samplelink as it was dynamically added to the DOM. (.click() won't work)

jQuery(document).on("click", "a#samplelink", function(e){
    e.preventDefault(); // To prevent redirection from link
    $("div.content input").val("Sample Preset Content"); // Setting value of input
})

Alon Eitan · Answer 4 · 2015-11-18T21:05:34.830

0

You can do something like this:

jQuery( document ).ready(function() {
   jQuery( ".inside" ).append( 
        jQuery('<p />').append(
            jQuery('<a href="">Insert Content</a>').on('click', function(e) {
                e.preventDefault();
                jQuery('input').val('hi');
            }) 
        )
    );
});

edited Nov 18 '15 at 21:05

answered Nov 18 '15 at 20:57

Alon Eitan

11,997
8
49
58

score 0 · Answer 5 · answered Nov 18 '15 at 20:59

you'll want to give the link and input a class or id, and delegate an event to it.

'<p><a class='content' href="">Insert Content</a></p>'
<input class='context-input' type="textarea" />

and in your script

jQuery('.inside').on('click', '.content', function(){
  jQuery('.context-input').val('Your Presets')
})

what this did was create a delegated event so that dynamic content within .inside that has the class .content will trigger on click. this step is necessary because the .content div is not present when the origin script is loaded, and thus needs a delegated listener, instead of a direct one

score 0 · Answer 6 · answered Nov 18 '15 at 21:00

I updated the fiddle with an example solution.

You can find it here: https://jsfiddle.net/03afj8fd/11/

jQuery( document ).ready(function($) {
   $clickMe = $('<span>Insert Content</span>');

   $clickMe.on('click', function(e) {
      e.preventDefault();
      $('#fillMe').val('test');  
   });

   $( ".inside" ).append($clickMe);
});

There are multiple ways how you can achieve this though.

I'm not sure if you need the "a" tag or if you just added it because you thought it would be needed to have it work as a clickable element - i removed it in my fiddle.

jQuery add text to input on click

6 Answers6