Getting the value of textarea inside form

Question

I want to get the value of this textarea inside form and copy the the value to another textarea outside form using javascript. How should I do that? here's my textarea...

<form>
    <textarea id="tpName" name="tpName" onchange="tpName(this)" style="margin-top: -9px; width: 275px; height: 40px;"></textarea>
</form>

<textarea id="copytpName" name="copytpName" style="margin-top: -9px; width: 275px; height: 40px;"></textarea>

Whenever I type a value in textarea inside form, I also want to update the value of textarea outside form.

Answer 1

You could do like this in javascript,

HTML

<form>
<textarea id="tpName" name="tpName" onkeyup="copyThis(this);" style="margin-top: -9px; width: 275px; height: 40px;"></textarea>
</form>

<textarea id="copytpName" name="copytpName" style="margin-top: -9px; width: 275px; height: 40px;"></textarea>

JAVASCRIPT

function copyThis(txObj) {
    document.getElementById("copytpName").value = txObj.value;   
}

Note: You need to change the function name. The function name matches with the textarea name, so its creating the issue in your case.

Try this http://jsfiddle.net/CZCnx/2/

Answer 2

There's no need for jQuery as some others have posted in their answer. Simply don't name your function the same thing you use for IDs and form names and it works:

jsFiddle example

<form>
    <textarea id="ttpName" name="ttpName" onchange="tpName(this)" style="margin-top: -9px; width: 275px; height: 40px;"></textarea>
</form>
<textarea id="copytpName" name="copytpName" style="margin-top: -9px; width: 275px; height: 40px;"></textarea>
function tpName(data) {
    document.getElementById("copytpName").value = data.value;
}

I changed your textarea to <textarea id="ttpName" name="ttpName" ...

Answer 3

I would try this:

var text = document.getElementById("tpName").value;

$("#copytpName").attr("value", text);

Answer 4

I have added the code here, it uses jquery

http://jsfiddle.net/5B6KC/1/

CODE:

$("#tpName").keyup(function(){
    $("#copytpName").val($(this).val());
})