place selected text element into textbox, or submit selected words without a textbox [ANSWERED]

place selected text element into textbox, or submit selected words without a textbox

Asked By: Growler
Originally Asked On: 2014-01-07 03:48:04
Asked Via: stackoverflow

I would like to allow users to select given words from a word bank and place those into a text box. Once the user submits the input, I will create a script to verify the correct order of the words.

What I’m focused on now is how to select words from the word bank and place them as text (with spaces between each word) into the text box.

How can this be done? When the user clicks the word, just the Chinese word is placed, not the English.

---

Edit: The words don’t necessarily need to be in a text box. I just want the user to be able to select words from the word bank, hit submit, and then allow the words in that order to be parsed. I figured the way to submit a string of words was thru a text box though.

---

Image may be NSFW.
Clik here to view.

HTML:

Create sentence:

<input type="text" id="test"  value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>

<div class="wordBank_Headings">Word Bank:
    <span class="wordBank_Words"></span>
</div>

JavaScript:

var words = {
    "task1" :
    {
        'Ni'    : 'you',
        'Wo'    : 'I',
        'Hao'   : 'good',
        'Shi'   : 'am'  
    }
}

function bank() {
    $(".wordBank_Words").empty();
    for (obj in words) {
        for (key in words[obj]) {
            $(".wordBank_Words").append("<li><b>" + key + "</b>: " + words[obj][key] + "</li>");
        }
    }
}

function submitMe() {
//will eventually verify input from textbox
    var value = document.getElementById('test').value;
    alert(value);
}

He received 2 answers
eventually accepting:

Nogusta’s answer to

place selected text element into textbox, or submit selected words without a textbox

Add an attribute to the li. Then you can pull that off in the click event

function bank() {
        $(".wordBank_Words").empty();
        for (obj in words) {
            for (key in words[obj]) {
                $(".wordBank_Words").append("<li class='bank-word' data-display-word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
            }
        }
    }

    bank();

    $(".bank-word").click(function (event) {

        $('#test').val($('#test').val() + " " + $(this).attr('data-display-word'));
        $(this).hide();
    });

The answer with the highest score with 1 points was:

EyalAr’s answer to

place selected text element into textbox, or submit selected words without a textbox

You need a way to associate each <li> element with its Chinese word.
You can, for example:

1. Extract it from the html of the <li> element (wouldn’t recommend).
2. Use a custom attribute such as data-chinese with each of the <li> elements. Just define it when you create the element, and access it later using $.attr().
3. Use $.data() to store the Chinese word of each <li> element. As in 2, store this data when you create the element.

Number 3 would look like:

function bank() {
    $(".wordBank_Words").empty();
    for (obj in words) {
        for (key in words[obj]) {
            $("<li><b>" + key + "</b>: " + words[obj][key] + "</li>")
                // append the new <li> element:
                .appendTo(".wordBank_Words")
                // store the chinese word in the element's data:
                .data('chinese', words[obj][key])
                // define the click event on the element:
                .on('click', function () {
                    var chinese = $(this).data('chinese');
                    var txt = $("#test").val() + " " + chinese;
                    // (you can conditionally add the space only if txt is not empty)
                    // update the text box:
                    $("#test").val(txt);
                });
        }
    }
}

See a working example here (click the words in the list).

If the selected answer did not help you out, the other answers might!

All Answers For: place selected text element into textbox, or submit selected words without a textbox

Nogusta’s answer to

place selected text element into textbox, or submit selected words without a textbox

Add an attribute to the li. Then you can pull that off in the click event

function bank() {
        $(".wordBank_Words").empty();
        for (obj in words) {
            for (key in words[obj]) {
                $(".wordBank_Words").append("<li class='bank-word' data-display-word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
            }
        }
    }

    bank();

    $(".bank-word").click(function (event) {

        $('#test').val($('#test').val() + " " + $(this).attr('data-display-word'));
        $(this).hide();
    });

EyalAr’s answer to

place selected text element into textbox, or submit selected words without a textbox

You need a way to associate each <li> element with its Chinese word.
You can, for example:

1. Extract it from the html of the <li> element (wouldn’t recommend).
2. Use a custom attribute such as data-chinese with each of the <li> elements. Just define it when you create the element, and access it later using $.attr().
3. Use $.data() to store the Chinese word of each <li> element. As in 2, store this data when you create the element.

Number 3 would look like:

function bank() {
    $(".wordBank_Words").empty();
    for (obj in words) {
        for (key in words[obj]) {
            $("<li><b>" + key + "</b>: " + words[obj][key] + "</li>")
                // append the new <li> element:
                .appendTo(".wordBank_Words")
                // store the chinese word in the element's data:
                .data('chinese', words[obj][key])
                // define the click event on the element:
                .on('click', function () {
                    var chinese = $(this).data('chinese');
                    var txt = $("#test").val() + " " + chinese;
                    // (you can conditionally add the space only if txt is not empty)
                    // update the text box:
                    $("#test").val(txt);
                });
        }
    }
}

See a working example here (click the words in the list).

Of course, you should really check out the original question.

The post place selected text element into textbox, or submit selected words without a textbox [ANSWERED] appeared first on Tech ABC to XYZ.