CODEWITHSUNDEEP
javascripthtmljquery
Praneeth Avvari
Praneeth Avvari

Reputation: 33

Javascript code to copy text from multiple textboxes,

I want to have multiple text boxes with text and a button beside them to copy text in it, I have the Javascript for copy but I don't want to write javascript for every textarea, Is there a way to define variable so that I don't need to add javascript to every text box? You can understand better with attached snippet.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="src/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  
  <div class="form-group col-md-6">         
            <div class="input-group">
<textarea class="form-control" rows="2" id="textarea" value="<?php echo $row['duties']; ?>">This is text one</textarea> <br>
        <div class="input-group-append">
<button class="btn btn-success dabba" type="button">Button</button>
        </div>  </div>  
</div>  

<div class="form-group col-md-6">           
            <div class="input-group">
<textarea class="form-control" rows="2" id="textarea" value="<?php echo $row['duties']; ?>">This is text two</textarea> <br>
        <div class="input-group-append">
<button class="btn btn-success dabba" type="button">Button</button>
        </div>  </div>  
</div>  

    <script type="text/javascript">
        $(document).ready(function() {

            //Code for dabba1
            $('.dabba').click(function() {
                $('#textarea').select();
                document.execCommand("copy");           
            });     
        });
    </script>

Upvotes: 0

Views: 89

Answers (1)

Rohit Utekar
Rohit Utekar

Reputation: 848

You can closest jquery selector to select the common parent of the clicked button and textarea. Then fire select event on the textarea inside the parent.

Check below sample.

$('.dabba').click(function() {
    $(this).closest('.input-group').find('textarea').select();
    document.execCommand("copy");           
});     
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="form-group col-md-6">
    <div class="input-group">
        <textarea class="form-control" rows="2" id="textarea">This is text one</textarea>
        <br>
        <div class="input-group-append">
            <button class="btn btn-success dabba" type="button">Button</button>
        </div>
    </div>
</div>
<div class="form-group col-md-6">
    <div class="input-group">
        <textarea class="form-control" rows="2" id="textarea">This is text two</textarea>
        <br>
        <div class="input-group-append">
            <button class="btn btn-success dabba" type="button">Button</button>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions