Javascript - copy text from one field to another using a button
Question
I am trying to figure out how to insert text from one text field to another using a button. This is what I have so far:
function copy(ID_value) {
var textToCopy = document.getElementById(ID_value).innerHTML;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}
HTML
<div id="opt">
<BUTTON id="1"onClick="copy(1);"> Option 1</BUTTON>
<BUTTON id="11"onClick="copy(11);"> Option 2</BUTTON><br>
<BUTTON id="2"onClick="copy(2);"> Option 3</BUTTON> or
<TEXTAREA ID="name" style="height:25px; width:300px;"></TEXTAREA>
<BUTTON id="3"onClick="copy(name);">Send</BUTTON><br>
<BUTTON id="4"onClick="copy(4);"> Option 4</BUTTON>
<BUTTON id="5"onClick="copy(5);"> Option 5</BUTTON>
<BUTTON id="6"onClick="copy(6);"> Option 6</BUTTON>
<BUTTON id="7"onClick="copy(7);"> Option 7</BUTTON>
<BUTTON id="8"onClick="copy(8);"> Option 8</BUTTON>
<BUTTON id="9"onClick="copy(9);"> Option 9</BUTTON>
<BUTTON id="10"onClick="copy(10);"> Option 10</BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:600px;">
</TEXTAREA>
Just as the buttons work, I need the "Send" button to send the text in the small field, to the large field, in any given order (Just as how each Option button inserts text in to the large field with proper spacing reguardless of order)
Any help would be greatly appreciated.
6 answers
solution1
1 2014-07-28 05:11:07
There are two problems in your question.
1) you are passing name not "name" so it will say name is undefined .
2) Because textbox has property value to get it's content your function is not working.
Leave your copy function as it is. Add one more function copyFromTextBox and call that on send button click .
<BUTTON id="3"onClick="copyFromTextbox();">Send</BUTTON><br>
function copyFromTextbox(id){
var textToCopy = document.getElementById('name').value;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}
solution2
0 2014-07-28 05:05:15
what you want to do is just copy the value of one text field into another. You can do this:
function copyToAnother()
{
var text1 = document.getElementById(id_of_first_text_field);
var text2 =document.getElementById(id_of_second_text_field);
text2.value = text1.value; // copy value of Ist field into second Field
}
and then on your copy button's onclick action reffer that function.
solution3
0 2014-07-28 05:10:48
Your problem here is that your passing a number and not a string to the copy function.
Change copy(1) to copy('1') and things will work.
solution4
0
Try this code,This is a program similar to your question
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("text_to").value=a
}
</script>
</head>
<TEXTAREA ID="text_from" style="height:100px; width:600px;">
</TEXTAREA>
<TEXTAREA ID="text_to" style="height:100px; width:600px;">
</TEXTAREA>
<button onclick=copy_data(text_from)>Copy</button>
<html>
solution5
0 2015-08-21 17:44:30
I testing it desktop browsers: Firefox, Chrome, Safari.
<BUTTON id="3"onClick="if(document.getElementById('name').value!='')
text.value+=' '+document.getElementById('name').value">Send</BUTTON>
or
for(i=0;i<10;i++)document.querySelectorAll('button')[i].onclick=function(){ text.value+=this.innerHTML}; snd.onclick=function(){if(document.getElementById('name').value!='') text.value+=' '+document.getElementById('name').value}
<div id="opt"> <button> Option 1</button> <button> Option 2</button><br> <button> Option 3</button> or <textarea id="name" style="height:25px;width:300px"></textarea> <input type="button" id="snd" value="Send"/><br> <button> Option 4</button> <button> Option 5</button> <button> Option 6</button> <button> Option 7</button> <button> Option 8</button> <button> Option 9</button> <button> Option 10</button> </div> <br><br><textarea id="text" style="height:100px;width:600px"></textarea>
name. -not work. That question asked Jul 28 '14 at 4:55 Why that question is top on main page?
solution6
-1 2014-07-28 05:05:49
function copy() {
var areaA = document.getElementById("areaA");
var areaB = document.getElementById("areaB");
var valueA = areaA.value;
areaB.value = valueA;
}
just from a quick look you need to add "" to getElementById, and use .value instead of innerHTML should work find.
here is a example. http://jsfiddle.net/6e67Y/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.