CODEWITHSUNDEEP
javascriptjqueryhtml
Calvin Ananda
Calvin Ananda

Reputation: 1530

Possible Paste From Textarea into another textarea input using button? | jQuery

How to make Paste Button Working?

I have 1 element textarea for My Text.

<textarea id="myText">Ananda</textarea>

I want to Paste it into another input text .

<input type="text" id="resultPaste">

I have button for Paste from #myText to #resultPaste .

<span class="btn-main btn-paste">PASTE</span>

My code jQuery :

$(document).ready(function() {
 $(".btn-paste").click(function() {
        var text = $('#myText').val()
    $('#resultPaste').append(text);
 });
});

Code Snippet Demonstration:

$(".btn-paste").click(function() {
		var text = $('#myText').val();
    $('#resultPaste').append(text);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste">

JSFiddle

Upvotes: 2

Views: 675

Answers (4)

Tobias Gassmann
Tobias Gassmann

Reputation: 11819

I don't know what append does, but in order to set the value, you must use 

el.val('something')


$(".btn-paste").click(function() {
  var text = $('#myText').val();
  $('#resultPaste').val(text);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste">

Upvotes: 3

kadir
kadir

Reputation: 64

$(document).ready(function() {
  $(".btn-primary").click(function() {
    var text = $('#myText').val();

  $('#resultPaste').val( $('#resultPaste').val()+text);
  });
});

append dont work on textarea

Upvotes: 5

ESCM
ESCM

Reputation: 262

No jquery

  • Wait DOM loaded
  • Get the button for change the text
  • Get the input to put the text
  • Get the text and put that.

window.addEventListener("DOMContentLoaded", () => {
 document.getElementsByClassName("btn-paste")[0].addEventListener("click", () => {
 document.getElementById("resultPaste").value = document.getElementById("myText").value;
 });
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste"/>

Upvotes: -1

Intervalia
Intervalia

Reputation: 10945

Since you are just copying all of the text over just use .val() on both the copy <textarea> and the past <textarea>.

$(".btn-paste").click(function() {
    $('#resultPaste').val($('#myText').val());
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste">

Upvotes: 1

Related Questions