locked
only copy selected items to clip board RRS feed

  • Question

  • User-2051535749 posted

    My form as a checkbox next to each line, this checkbox will exclude those items from copying to the clipboard. Is there a way using JQuery to exclude items from copying to the clipboard, but keep the remaining non checked items? 

    if they select, State, Price and Agency, then they should not be copied to the clipboard, but Manager and Name should be.
    <div id="Sales">
     <div class="saleRegion">
         <input type="checkbox" id="salesId_1" value="state"/><label for="State">State/label>
    	 <input type="checkbox" id="salesId_2" value="salePrice"/><label for="Price">Price</label>
    	 <input type="checkbox" id="salesId_3" value="manager"/><label for="Manager">Manager</label>
    	 <input type="checkbox" id="salesId_4" value="Name"/><label for="Name">Name</label>
    	 <input type="checkbox" id="salesId_5" value="Agency"/><label for="Agency">Agency</label>
     </div>
    </div>
    Tuesday, February 11, 2020 12:19 PM

All replies

  • User283571144 posted

    Hi,  IGotYourDotNet,

    I think you want to copy unselected items (label content) which is different from the title you described. 

    You can use jquery to select the group of the checkboxes and check for the "checked" property for each check box. If it is not checked, then you can fetch the text of the label and add it to the clipboard.

    More details, you could refer to below code.

    JS code:

    function copySelect() {
                var copyString="";
                $(".saleRegion>input").each(function (index, element) {
                    if (!element.checked) {
                        copyString += element.nextSibling.innerText + " ";
                    }
                });
    
                copyToClipboard(copyString);
            }
    
            function copyToClipboard(text) {
                var $temp = $("<input>");
                $("body").append($temp);
                $temp.val(text).select();
                document.execCommand("copy");
                $temp.remove();
            }
    
    

    HTML Makeup:

    <div id="Sales">
                <div class="saleRegion">
                    <input type="checkbox" id="salesId_1" value="state" /><label for="State">State</label>
                    <input type="checkbox" id="salesId_2" value="salePrice" /><label for="Price">Price</label>
                    <input type="checkbox" id="salesId_3" value="manager" /><label for="Manager">Manager</label>
                    <input type="checkbox" id="salesId_4" value="Name" /><label for="Name">Name</label>
                    <input type="checkbox" id="salesId_5" value="Agency" /><label for="Agency">Agency</label>
                </div>
                <input id="copybtn" type="button" value="Copy" onclick="copySelect()" />
                <input id="copybox" type="text" style="width: 400px;" />
            </div>
    

    Demo:

    Best Regards,

    Brando

    Wednesday, February 12, 2020 8:48 AM
  • User-2051535749 posted

    This works, thanks

    Now, what If I take it to the next level and have input for each question there may be other input types?

    <div id="Sales">
     <div class="sale">
         <input type="checkbox" id="salesId_1" value="state"/><label for="State">State/label><br>
    	 <select id="states">
    		  <option value="AL">Alabama</option>
    		  <option value="Cal">California</option>
    		  <option value="Col">Colorado</option>
    		  <option value="Del">Delaware</option>
    	</select>
    	 <input type="checkbox" id="salesId_2" value="salePrice"/><label for="Price">Price</label><br>
    	 <input type="textbox" id"price">
    	 <input type="checkbox" id="salesId_3" value="manager"/><label for="Manager">Manager</label>
    	 <br>
    	 <input type="textbox" id="manager"/>
    	 <input type="checkbox" id="salesId_4" value="Name"/><label for="Name">Name</label><br>
    	 	 <input type="textbox" id="name"/>
    
    	 <input type="checkbox" id="salesId_5" value="Agency"/><label for="Agency">Agency</label><br>
    	 <select id="agencies">
    		  <option value="1">Johnson and Sons</option>
    		  <option value="2">Myers and Myers</option>
    		  <option value="3">Coastal</option>
    		 
    	</select>
    	 
     </div>
    </div>


    Wednesday, February 12, 2020 2:41 PM
  • User283571144 posted

    Hi,  IGotYourDotNet,

    Almost the same, you can target the HTML element, and use switch to judge its type and fetch the value.

    More details, you could refer to below code.

    JS Code:

    <script type="text/javascript">
            function copySelect() {
                var copyString = "";
                $(".sale").find(":checkbox").each(function (index, element) {
                    
                    if (!element.checked) {
                        var valueNode = element.nextElementSibling.nextElementSibling;
                        switch (valueNode.nodeName) {
                            case "SELECT":
                                copyString += valueNode.options[valueNode.selectedIndex].innerText;
                                break;
                            case "INPUT":
                                copyString += valueNode.value;
                                break;
                            default:
                        }
                        copyString += " ";
                    }
                });
    
                
                copyToClipboard(copyString);
            }
    
            function copyToClipboard(text) {
                var $temp = $("<input>");
                $("body").append($temp);
                $temp.val(text).select();
                document.execCommand("copy");
                $temp.remove();
            }
    
        </script>
    
    

    HTML:

    <div id="Sales">
                <div class="sale">
                    <div>
                        <input type="checkbox" id="salesId_1" value="state" /><label for="states">State</label><select id="states">
                            <option value="AL">Alabama</option>
                            <option value="Cal">California</option>
                            <option value="Col">Colorado</option>
                            <option value="Del">Delaware</option>
                        </select>
                    </div>
    
                    <div>
                        <input type="checkbox" id="salesId_2" value="salePrice" /><label for="price">Price</label>
                        <input type="text" id="price" />
                    </div>
                    <div>
                        <input type="checkbox" id="salesId_3" value="manager" /><label for="manager">Manager</label>
                        <input type="text" id="manager" />
                    </div>
                    <div>
                        <input type="checkbox" id="salesId_4" value="Name" /><label for="name">Name</label>
                        <input type="text" id="name" />
                    </div>
                    <div>
                        <input type="checkbox" id="salesId_5" value="Agency" /><label for="agencies">Agency</label>
                        <select id="agencies">
                            <option value="1">Johnson and Sons</option>
                            <option value="2">Myers and Myers</option>
                            <option value="3">Coastal</option>
                        </select>
                    </div>
    
                </div>
                <input id="copybtn" type="button" value="Copy" onclick="copySelect()" />
                <input id="copybox" type="text" style="width: 400px;" />
            </div>

    Result:

    Best Regards,

    Brando

    Thursday, February 13, 2020 9:40 AM