Copy text into text box via Javascript when button clicked

  • Slobrob
  • Born
  • Born
  • Slobrob
  • Posts: 2

Post 3+ Months Ago

Hi There,

I'm a bit of a newbie but im doing a little project for myself and have started to learn javascript.
What I am after is to create buttons so that each time a button is clicked it is copied and pasted into the text box below. I've to do this but i have seem to have an issue - I have several buttons and everytime i press a different button it comes up with the same information on the first button.

for example, i have button 1, 2, 3, 4 etc. and if i press button 1 or button 2 or 3 it will still paste button 1. Any ideas? Ive attached my code below

Code: [ Select ]
<script language="JavaScript">
function clipboard()
{
var copyclip = document.getElementById('copy').createTextRange();
copyclip.select();
copyclip.execCommand("Copy");

}

function paste()
{
document.getElementById('text').focus();
var paste = document.selection.createRange();
paste.execCommand("Paste");
}

if (window.clipboardData != "") {
    window.clipboardData.clearData("Text");
}
</script>

<div id="">
<BUTTON id="copy"onClick="clipboard(); paste(); clear();">Option 1 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 2 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 3 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 4 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 5 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:250px;">
</TEXTAREA>
  1. <script language="JavaScript">
  2. function clipboard()
  3. {
  4. var copyclip = document.getElementById('copy').createTextRange();
  5. copyclip.select();
  6. copyclip.execCommand("Copy");
  7. }
  8. function paste()
  9. {
  10. document.getElementById('text').focus();
  11. var paste = document.selection.createRange();
  12. paste.execCommand("Paste");
  13. }
  14. if (window.clipboardData != "") {
  15.     window.clipboardData.clearData("Text");
  16. }
  17. </script>
  18. <div id="">
  19. <BUTTON id="copy"onClick="clipboard(); paste(); clear();">Option 1 <br /> </BUTTON>
  20. <BUTTON id="copy"onClick="clipboard(); paste();">Option 2 <br /> </BUTTON>
  21. <BUTTON id="copy"onClick="clipboard(); paste();">Option 3 <br /> </BUTTON>
  22. <BUTTON id="copy"onClick="clipboard(); paste();">Option 4 <br /> </BUTTON>
  23. <BUTTON id="copy"onClick="clipboard(); paste();">Option 5 <br /> </BUTTON>
  24. <BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  25. <BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  26. <BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  27. <BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  28. <BUTTON id="copy"onClick="clipboard(); paste();">Option 1 <br /> </BUTTON>
  29. <p />
  30. </div>
  31. <TEXTAREA ID="text" style="height:100px; width:250px;">
  32. </TEXTAREA>
Moderator Remark: Made title of topic more specific
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Posts: 214
  • Loc: Sweden

Post 3+ Months Ago

All your buttons have the same Id.
So the line:

Code: [ Select ]
var copyclip = document.getElementById('copy').createTextRange();


Will probably just pick up the first instance of copy ( the first button ) and stop there. Especially since Id's are usually unique.

I made some small changes to your script. First I gave each button a unique number id and added so that what I think is the correct id is sent when clicking some button:

Code: [ Select ]

<BUTTON id="1"onClick="clipboard(1); paste(); clear();">Option 1

<br /> </BUTTON>
<BUTTON id="2"onClick="clipboard(2); paste();">Option 2 <br />

</BUTTON>
<BUTTON id="3"onClick="clipboard(3); paste();">Option 3 <br />

</BUTTON>
<BUTTON id="4"onClick="clipboard(4); paste();">Option 4 <br />

</BUTTON>
<BUTTON id="5"onClick="clipboard(5); paste();">Option 5 <br />

</BUTTON>
<BUTTON id="6"onClick="clipboard(6); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="7"onClick="clipboard(7); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="8"onClick="clipboard(8); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="9"onClick="clipboard(9); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="10"onClick="clipboard(10); paste();">Option 1 <br />

</BUTTON>
  1. <BUTTON id="1"onClick="clipboard(1); paste(); clear();">Option 1
  2. <br /> </BUTTON>
  3. <BUTTON id="2"onClick="clipboard(2); paste();">Option 2 <br />
  4. </BUTTON>
  5. <BUTTON id="3"onClick="clipboard(3); paste();">Option 3 <br />
  6. </BUTTON>
  7. <BUTTON id="4"onClick="clipboard(4); paste();">Option 4 <br />
  8. </BUTTON>
  9. <BUTTON id="5"onClick="clipboard(5); paste();">Option 5 <br />
  10. </BUTTON>
  11. <BUTTON id="6"onClick="clipboard(6); paste();">Option 1 <br />
  12. </BUTTON>
  13. <BUTTON id="7"onClick="clipboard(7); paste();">Option 1 <br />
  14. </BUTTON>
  15. <BUTTON id="8"onClick="clipboard(8); paste();">Option 1 <br />
  16. </BUTTON>
  17. <BUTTON id="9"onClick="clipboard(9); paste();">Option 1 <br />
  18. </BUTTON>
  19. <BUTTON id="10"onClick="clipboard(10); paste();">Option 1 <br />
  20. </BUTTON>


I added a variable called ID_value to handle the ID's that the button send.
Code: [ Select ]
function clipboard(ID_value)
{
var copyclip =

document.getElementById(ID_value).createTextRange();
copyclip.select();
copyclip.execCommand("Copy");

}
  1. function clipboard(ID_value)
  2. {
  3. var copyclip =
  4. document.getElementById(ID_value).createTextRange();
  5. copyclip.select();
  6. copyclip.execCommand("Copy");
  7. }


The ID_value variable that has been added is being used by the getElementById(ID_value) to select the correct button(s).

Complete code:

Code: [ Select ]
<script language="JavaScript">
function clipboard(ID_value)
{
var copyclip =

document.getElementById(ID_value).createTextRange();
copyclip.select();
copyclip.execCommand("Copy");

}

function paste()
{
document.getElementById('text').focus();
var paste = document.selection.createRange();
paste.execCommand("Paste");
}

if (window.clipboardData != "") {
  window.clipboardData.clearData("Text");
}
</script>

<div id="">
<BUTTON id="1"onClick="clipboard(1); paste(); clear();">Option 1

<br /> </BUTTON>
<BUTTON id="2"onClick="clipboard(2); paste();">Option 2 <br />

</BUTTON>
<BUTTON id="3"onClick="clipboard(3); paste();">Option 3 <br />

</BUTTON>
<BUTTON id="4"onClick="clipboard(4); paste();">Option 4 <br />

</BUTTON>
<BUTTON id="5"onClick="clipboard(5); paste();">Option 5 <br />

</BUTTON>
<BUTTON id="6"onClick="clipboard(6); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="7"onClick="clipboard(7); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="8"onClick="clipboard(8); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="9"onClick="clipboard(9); paste();">Option 1 <br />

</BUTTON>
<BUTTON id="10"onClick="clipboard(10); paste();">Option 1 <br />

</BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:250px;">
</TEXTAREA>
  1. <script language="JavaScript">
  2. function clipboard(ID_value)
  3. {
  4. var copyclip =
  5. document.getElementById(ID_value).createTextRange();
  6. copyclip.select();
  7. copyclip.execCommand("Copy");
  8. }
  9. function paste()
  10. {
  11. document.getElementById('text').focus();
  12. var paste = document.selection.createRange();
  13. paste.execCommand("Paste");
  14. }
  15. if (window.clipboardData != "") {
  16.   window.clipboardData.clearData("Text");
  17. }
  18. </script>
  19. <div id="">
  20. <BUTTON id="1"onClick="clipboard(1); paste(); clear();">Option 1
  21. <br /> </BUTTON>
  22. <BUTTON id="2"onClick="clipboard(2); paste();">Option 2 <br />
  23. </BUTTON>
  24. <BUTTON id="3"onClick="clipboard(3); paste();">Option 3 <br />
  25. </BUTTON>
  26. <BUTTON id="4"onClick="clipboard(4); paste();">Option 4 <br />
  27. </BUTTON>
  28. <BUTTON id="5"onClick="clipboard(5); paste();">Option 5 <br />
  29. </BUTTON>
  30. <BUTTON id="6"onClick="clipboard(6); paste();">Option 1 <br />
  31. </BUTTON>
  32. <BUTTON id="7"onClick="clipboard(7); paste();">Option 1 <br />
  33. </BUTTON>
  34. <BUTTON id="8"onClick="clipboard(8); paste();">Option 1 <br />
  35. </BUTTON>
  36. <BUTTON id="9"onClick="clipboard(9); paste();">Option 1 <br />
  37. </BUTTON>
  38. <BUTTON id="10"onClick="clipboard(10); paste();">Option 1 <br />
  39. </BUTTON>
  40. <p />
  41. </div>
  42. <TEXTAREA ID="text" style="height:100px; width:250px;">
  43. </TEXTAREA>


I guess you tested this in IE? What you should note (and be aware of) is that neither your or mine example seems to be cross browser compatible - I have a feeling you will note why.
  • Slobrob
  • Born
  • Born
  • Slobrob
  • Posts: 2

Post 3+ Months Ago

Great! thanks for that WritingBadCode, I thought i might have been along the right lines just wasnt sure where i was going wrong. Yes I am aware that it only works in IE - which is the only web browser i will be using for this project.

I have a couple of questions though. Firstly, whenever I click one of the buttons it copies itself into the text box below but if I accidently click into the whitespace it resets itself and any buttons I press after clicking in the whitespace supersedes the buttons ive already clicked. is there a way to get around this so that it doesnt happen?

my second question is how would i go about adding code that makes an undo button deleting the last line of information?

Cheers
  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Posts: 214
  • Loc: Sweden

Post 3+ Months Ago

Slobrob wrote:
I have a couple of questions though. Firstly, whenever I click one of the buttons it copies itself into the text box below but if I accidently click into the whitespace it resets itself and any buttons I press after clicking in the whitespace supersedes the buttons ive already clicked. is there a way to get around this so that it doesnt happen?


If I understand correctly the issue is the users ability to click in the text field and by doing so the pasted text can end up removing "things".

You can start with making the text area read only:

Code: [ Select ]
<TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
</TEXTAREA>
  1. <TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
  2. </TEXTAREA>


The user will have less things to do in the text box now, however the user can still click in the textbox and by doing so the text may end up being pasted somewhere you might not like it.

A possible solution is simply rewriting a few things and end up with something random:
Code: [ Select ]
<script language="JavaScript">
function copy(ID_value)
{
var textToCopy = document.getElementById(ID_value).innerHTML;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}
</script>

<div id="">
<BUTTON id="1"onClick="copy(1);">Option 1 <br /> </BUTTON>
<BUTTON id="2"onClick="copy(2);">Option 2 <br /> </BUTTON>
<BUTTON id="3"onClick="copy(3);">Option 3 <br /> </BUTTON>
<BUTTON id="4"onClick="copy(4);">Option 4 <br /> </BUTTON>
<BUTTON id="5"onClick="copy(5);">Option 5 <br /> </BUTTON>
<BUTTON id="6"onClick="copy(6);">Option 1 <br /> </BUTTON>
<BUTTON id="7"onClick="copy(7);">Option 1 <br /> </BUTTON>
<BUTTON id="8"onClick="copy(8);">Option 1 <br /> </BUTTON>
<BUTTON id="9"onClick="copy(9);">Option 1 <br /> </BUTTON>
<BUTTON id="10"onClick="copy(10);">Option 1 <br /> </BUTTON>
<p />
</div>
<TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
</TEXTAREA>
  1. <script language="JavaScript">
  2. function copy(ID_value)
  3. {
  4. var textToCopy = document.getElementById(ID_value).innerHTML;
  5. var whereToCopy = document.getElementById("text");
  6. whereToCopy.value += textToCopy;
  7. }
  8. </script>
  9. <div id="">
  10. <BUTTON id="1"onClick="copy(1);">Option 1 <br /> </BUTTON>
  11. <BUTTON id="2"onClick="copy(2);">Option 2 <br /> </BUTTON>
  12. <BUTTON id="3"onClick="copy(3);">Option 3 <br /> </BUTTON>
  13. <BUTTON id="4"onClick="copy(4);">Option 4 <br /> </BUTTON>
  14. <BUTTON id="5"onClick="copy(5);">Option 5 <br /> </BUTTON>
  15. <BUTTON id="6"onClick="copy(6);">Option 1 <br /> </BUTTON>
  16. <BUTTON id="7"onClick="copy(7);">Option 1 <br /> </BUTTON>
  17. <BUTTON id="8"onClick="copy(8);">Option 1 <br /> </BUTTON>
  18. <BUTTON id="9"onClick="copy(9);">Option 1 <br /> </BUTTON>
  19. <BUTTON id="10"onClick="copy(10);">Option 1 <br /> </BUTTON>
  20. <p />
  21. </div>
  22. <TEXTAREA ID="text" readonly="readonly" style="height:100px; width:250px;">
  23. </TEXTAREA>


The user can now click all they want and the text will still end up on the bottom of the textarea. However the code may end up being slow if the amount of data gets big and it will paste text in a way that may or may not be wanted. The better option would be adding a new "node object" eg create a new paragraf or div containing the text. I guess this was not the code you wanted, anyhow:

Slobrob wrote:
my second question is how would i go about adding code that makes an undo button deleting the last line of information?


You have several options one being using string manipulation and keeping a history on any changes and use some cut and/or paste technique. Searching through text however (especially if the amount gets big) is probably less effective than creating new objects and simply selecting and deleting the latest addition from the DOM three. Also nodes should offer more flexibility in general.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 158 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.