jQuery/JavaScript Get input values and then copy to clipboard

Question

I have a bunch of input elements and with javascript on click i'm getting the values of these inputs and paste it in a div somewhere
Please run the code snipped below to check

$('#getthelist').click(function() {
  $('.inputs>li .color').map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e) {
    $('.list').append('<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>');
  });
});

ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list {
    margin: 10px;
    width: 270px;
    padding: 25px;
    background-color: #fafafb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values

  
  <li id="color_white">
	  <div>
		  <input type="text" value="#fff" class="color">
	  </div>
  </li>
  
  <li id="color_black">
	  <div>
		  <input type="text" value="#000" class="color">
	  </div>
  </li>
  
</ul>

<div class="list"></div>

So i have got one question and a problem i cant figure out how to fix.

The problem is, each time you click the button it pastes the values in the div repeatedly. It is a mess to me for what i'm trying to do. so, How do i force it not to repeat the same values when you click every time.
Question: How do i copy the input values to clipboard with the same click function?

As for your 1st Question what you can do is store the values in an object array like [{"col1":"#00","col2":"#ff"},....n] and then on every insert just do a filter and check if the values exists and for your 2nd question you can refer to this link stackoverflow.com/q/400212/2417602 — vikscool
– vikscool, Commented May 17, 2018 at 5:22
can you try my answer if not working then please review I have updated with the more efficient way and cross-browser compatibility with ff and chrome? — Dipak
– Dipak, Commented May 17, 2018 at 6:56

Sakata Gintoki · Accepted Answer · 2018-05-21 09:33:12Z

Please check my snippet codes.

function copyToClipboad(texts) {
  var textareaElCloned = $('<textarea>' + texts + '</textarea>');
  $('.list').append(textareaElCloned);
  /* Select the text field */
  textareaElCloned[0].select();
  /* Copy the text inside the text field */
  document.execCommand("copy");
}

$('#getthelist').click(function() {
  var html = '';
  var texts = '';
  var itemEls = $('.inputs > li .color');
  
  itemEls.map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e, index) {
    var text = '\"' + e.name + '\": \"' + e.value + '\",';
    texts += text;
    html += ('<div>' + text + '</div>');
    
    if (index === itemEls.length-1) {
       copyToClipboad(texts);
    }
  });
  
  $('.list').html(html); // the textarea will be removed at this moment
});

ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list {
    margin: 10px;
    width: 270px;
    padding: 25px;
    background-color: #fafafb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values

  
  <li id="color_white">
	  <div>
		  <input type="text" value="#fff" class="color">
	  </div>
  </li>
  
  <li id="color_black">
	  <div>
		  <input type="text" value="#000" class="color">
	  </div>
  </li>
  
</ul>

<div class="list" tabindex="1"></div>

Pang · Accepted Answer · 2018-05-17 06:17:39Z

1

save your data in localStorage.setItem (return value of .map must save in localstorage)
get your data with localStorage.getItem (get data from localstorage with key that you set for item)
create a template with handlebar.js, and when click on checkbox, render template with data that get from localstorage.

for new data, you must update localstorage.

edited May 17, 2018 at 6:17

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered May 17, 2018 at 5:32

Amin Ashtiani

111 silver badge3 bronze badges

Comments

Damian Dziaduch · Accepted Answer · 2018-05-17 06:35:48Z

I have tested the solution from Dipak chavda but it does not work for me also. The problem is that the input is type of hidden. So I changed it to hidden textarea. When you try to copy, I make it visible for a while, focus it, select it's value and then exec the copy. And it works ;)

function copyData(copyText) {
  var $txtCopyArea = $("#txtCopyArea");
  // set the text as value
  $txtCopyArea.val(copyText);
  // make textarea visible
  $txtCopyArea.removeClass('hidden');
  /* focus & select the text field */
  $txtCopyArea.focus().select();
  /* Copy the text inside the text field */
  document.execCommand("copy");
  /* Alert the copied text */
  alert("Copied the text: " + copyText);
  // hide textarea
  $txtCopyArea.addClass('hidden');
}

$('#getthelist').click(function() {
  // Clear html div content
  $('.list').html("");
  var copyText = "";
  $('.inputs>li .color').map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e) {
    var _data = '<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>';
    $('.list').append(_data);
    copyText += _data;
  });
  copyData(copyText);
});

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list {
  margin: 10px;
  width: 270px;
  padding: 25px;
  background-color: #fafafb;
}

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
  <ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values


    <li id="color_white">
      <div>
        <input type="text" value="#fff" class="color">
      </div>
    </li>

    <li id="color_black">
      <div>
        <input type="text" value="#000" class="color">
      </div>
    </li>
  </ul>
  <textarea id="txtCopyArea" class="hidden"></textarea>

  <div class="list"></div>

Dipak · Accepted Answer · 2018-05-17 06:54:52Z

1

I tried to give you both questions answer.

Answer of Q1 you should reset HTML content before set new value.

Answer of Q2 you should use document.executeCommand("copy") to copy the text.

Hope it may help to resolve your issue.

function copyData(copyText) {
  $("body").append($("<textarea/>").val(copyText).attr({id:"txtareaCopyData"}));
  var copyText = document.querySelector("#txtareaCopyData");
  copyText.select();
  document.execCommand("copy");
  $("#txtareaCopyData").remove();
}

$('#getthelist').click(function() {
  // Clear html div content
  $('.list').html("");
  var copyText = "";
  $('.inputs>li .color').map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e) {
    var _data = '<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>';
    $('.list').append(_data);
    copyText += _data;
  });
  copyData(copyText);
  document.querySelector("#txtCopyArea").addEventListener("click", copyData);
});

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list {
  margin: 10px;
  width: 270px;
  padding: 25px;
  background-color: #fafafb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
  <ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values


    <li id="color_white">
      <div>
        <input type="text" value="#fff" class="color">
      </div>
    </li>

    <li id="color_black">
      <div>
        <input type="text" value="#000" class="color">
      </div>
    </li>
  </ul>
  <input type="hidden" id="txtCopyArea" name="txtCopyArea" />

  <div class="list"></div>

edited May 17, 2018 at 6:54

answered May 17, 2018 at 5:24

Dipak

2,3065 gold badges26 silver badges56 bronze badges

3 Comments

Nippledisaster Over a year ago

Hi, I will mark this answer if you fix the copy to clipboard function. it does not work

Dipak Over a year ago

@Nippledisaster what an issue you have faced let me know

Dipak Over a year ago

@Nippledisaster I have tested same code with my application and it may copy properly it will working in ff and chrome well.

Collectives™ on Stack Overflow

jQuery/JavaScript Get input values and then copy to clipboard

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related