How to input multiple values into input(textarea) field?

Question

I want to make make suggested text, that a user can click on and create a sentence in a tag. If I have sentences like "my cat is" , "my dog is" , and "awesome" , the user could click them and make sentences like: "my dog is awesome" or "my cat is awesome" depending on which button the user clicks first. But with longer text in the buttons (like sentences).

I don't have code yet because I don't know where to start. I only have an image to demonstrate my idea:

Answer 1

First of all, a working jsFiddle can be found here: http://jsfiddle.net/k3y9fa1v/

You could make the buttons like this:

<button>My dog is </button>
<button>My cat is </button>
<button>awesome </button>

Then create the textarea:

<textarea id='my-area'></textarea>

Now to interact with these, create an onClick event handler using JQuery:

// Create a listener that is fired when any button is clicked
$('button').click(function() {
    // Get the text that is inside the button
    var text = $(this).text();

    // Get the current content of the textarea
    var content = $('#my-area').val();

    // Add the text to the textarea
    $('#my-area').val(content + text);
});

Additional code to insert links
If we want to insert links, without putting a link element in the button itself, we can use the data attribute which allows us to store any arbitrary data on an element an let jQuery and CSS interact with it.

For starters, we add this button to the HTML code:

// The data-type will be used in our jQuery code to determine that this
// button should be interpreted as a link
// data-link-to provides the URL of the link
<button data-type='link' data-link-to='http://google.com'>google link</button>

Note that the data- attributes can have any name you want (so data-link-to is not a special name, just something I made up). This data attribute is really useful. More examples for your case might be data-capital-first (always capitalize the first letter, data-capital-word (always capitalize each individual word) etc... These examples might seem silly, as you can just put a string in the button that already has the right capitalized characters. However if you were to make your code for this more complex (detecting the start of a sentence so you can add a capital letter, these might be useful).

You can use plain CSS to target this element using the following selector:

[data-type='link'] {
    background-color:rgb(110, 177, 252);
}

See this link for more information on the selector and its browser compatibility.

I modified the above jQuery to work with the new button we added. jQuery has a very useful builtin .data() function, which allows us to get the specific data attributes of an element.

$('button').click(function() {
    // Get the text that is inside the button
    var text = $(this).text();

    // Get the data-type attribute value
    var type = $(this).data('type');

    // Get the current content of the textarea
    var content = $('#my-area').val();

    // Check whether to add the text normally or add a link
    if (type == 'link') {
        // Retrieve the link address from the button and create the anchor text
        var link_ref = $(this).data('link-to');

        // Alter the text variable to be surrounded by tha anchor tag
        // with its specified href
        text = '<a href="' + link_ref + '">' + text + '</a>';
    }

    // Set the value of the textarea to the new value
    $('#my-area').val(content + text);
});