SO-27975313

Add text to a field when the text is clicked.

by Stephen

HTML

<section>
    <p>Here are the words you can choose from:</p>
    <p>
        <span class="selectable">One</span>
        <span class="selectable">Two</span>
        <span class="selectable">Three</span>
        <span class="selectable">Four</span>
    </p>
</section>
<form action="#" method="GET">
    <input type="text" name="chosen" id="chosen"/>
    <input type="submit" name="Submit"/>
</form>

CSS

.selectable {
    font-family: sans-serif;
    border: 1px dotted blue;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

JavaScript

var $chosenField = $('#chosen');
$('.selectable').on('click', function() {
    $chosenField.val( $chosenField.val() + ' ' + $(this).text() );
});