How to pass innerText from a dxTextArea into a function in Javascript?

Question

we are using javascript/typescript and have been unable to pass the 'in-putted text' from a dxTextArea in a DevExtreme (Typescript) Project.

We are using:

 <div id="myTextArea" data-bind="dxTextArea: {showClearButton: true,value: 'MyTests'}" ></div>

 <div  data-bind="dxButton: { text: 'Save text' }" onclick="saveMyData(document.getElementById('myTextArea').innerText)"></div>

With the function "saveMyData" defined as:

<script>
function saveMyData(myData)
{
alert("text is "+myData.innerText);
mytext.innerText += myData.innerText;
}
</script>

However, the alert only contains

text is

We have also tried textContent, but got the same results.

Anyone got an idea(s) of why this is happening?

there isn't an error on screen, so we don't think it's a declaration error.

(N.B. this code has been simplified for demonstration purposes).

Below is a link to the 'most helpful/detailed' docs:

Link to dxTextArea documentation

please feel free to ask for clarification/details as I know i'm pretty bad at explaining myself 'on paper'. I would post a fiddle only it doesn't/won't recognise the dxTextArea nor dxButton, so pretty useless!

EDIT

using innerHTML as suggested gives:

enter image description here

You have to use `innerHTML` instead of `innerText` and then `alert(myData);`. You are using `document.getElementById('myTextArea').innerHTML` so the text itself is passed to the `saveMyData` function. — GuyT, Sep 17 '14 at 09:01
@GuyT - thanks for your suggestion, but this also yields incorrect results: (please see edit in Q) — jbutler483, Sep 17 '14 at 09:04
Ok, step by step: 1. change `saveMyData(document.getElementById('myTextArea').innerText)` to `saveMyData(document.getElementById('myTextArea').textContent)` 2. Change `function saveMyData(myData) { alert("text is "+myData.innerText); mytext.innerText += myData.innerText; } ` to `function saveMyData(myData) { alert(myData); } ` — GuyT, Sep 17 '14 at 09:09
@GuyT, only the date/time bit works (created/added in script) - the part in the function call must be empty of something - as it returns "" with both **innerText** AND **textContent** — jbutler483, Sep 17 '14 at 09:13
Do you use the `observable`? From the documentation: `Declare an observable variable and pass it to the value option to update the variable each time widget value changes.` — GuyT, Sep 17 '14 at 09:16

score 1 · Accepted Answer · answered Sep 17 '14 at 19:53

You can get the instance of dxTextArea widget and get value of option value

See fiddle: http://jsfiddle.net/tabalinas/c4dmsmeL/2/

<div id="textArea" data-bind="dxTextArea: { value: 'My value' }"></div>
<div data-bind="dxButton: { clickAction: buttonClick, text: 'Get value' }"></div>

var vm = {
    buttonClick: function() {
        var val = $("#textArea").dxTextArea("instance").option("value");
        alert(val);
    }
};

ko.applyBindings(vm);

But better to use ko.observable in your view model bound to value option of dxTextArea

See fiddle: http://jsfiddle.net/tabalinas/c4dmsmeL/

<div data-bind="dxTextArea: { value: textAreaValue }"></div>
Text entered: <span data-bind="text: textAreaValue">

var vm = {
    textAreaValue: ko.observable("My value")
};

ko.applyBindings(vm);

If you want to play with widget guts, you can do following: http://jsfiddle.net/tabalinas/c4dmsmeL/3/

<div id="textArea" data-bind="dxTextArea: { value: 'My Value' }"></div>
<button id="getValue">Get value</button>


ko.applyBindings();

$("#getValue").click(function() {
    alert($("#textArea").find("textarea").val());
});

But I don't see any reason to act this way having much cleaner approaches.

Thank you!!! Think I had gone mad! But your **var val = $("#textArea").dxTextArea("instance").option("value");** Really helped in getting the value into a 'usable' variable! :) — jbutler483, Sep 18 '14 at 08:21

Wolfgang · Answer 2 · 2014-09-17T09:23:39.253

0

<div
    id="myTextArea"
    data-bind="dxTextArea: {showClearButton: true,value: 'MyTests'}">
    CONTENT
</div>
 <div
    data-bind="dxButton: { text: 'Save text' }"
    onclick="saveMyData('myTextArea')">TEXT TO CLICK
 </div>

<script>
    function saveMyData(objID) {
        if (obj = document.getElementById(objID))
        {
            alert(obj.innerHTML);
            obj.innerHTML = obj.innerHTML + " MORE TEXT.. ";
        } else
        {
            alert("Object with ID " + objID + " not found");
        }
    }
</script>

Maybe this helps you:http://www.devexpress.com/Support/Center/Question/Details/Q461148

edited Sep 17 '14 at 09:23

answered Sep 17 '14 at 08:55

Wolfgang

320
3
12

This prints **[objectHTMLDivElement]** - not the text that was inputted :( – jbutler483 Sep 17 '14 at 08:59
unfortunately, this may work with a 'normal' **textArea**, but it doesn't seem to with a **dxTextArea** ? – jbutler483 Sep 17 '14 at 09:07
those methods are available, but still doesn't give me the text within the **dxTextArea** - God, i miss developing in C#!!! – jbutler483 Sep 17 '14 at 09:16
as dxTextArea documentation tells you, you should use ".value" - try obj.value instead of .innerHTML. – Wolfgang Sep 17 '14 at 09:19
@jbutler483 C# is for amateurs :p Wolfgang, he first has to use the observable to update the value otherwise his value will be always empty. What you could try is to start with a default value. This should give you some result. – GuyT Sep 17 '14 at 09:23
@GuyT - i think you are right. I have no idea to the dx... "Framework", thought it's a "normal" Javascript Problem. :D – Wolfgang Sep 17 '14 at 09:25
@GuyT - I've used the ko.observable - but there isn' a clear way of actually *updating* this on user input. It's back to square one really :( – jbutler483 Sep 17 '14 at 09:38

How to pass innerText from a dxTextArea into a function in Javascript?

2 Answers2