CODEWITHSUNDEEP
javascripthtml
Jay Hogan
Jay Hogan

Reputation: 18

Copy entire form to clipboard

I have a simple form that allows users to input different information into multiple fields and spit out a calculation.

HTML

<form id="coPayTotalAmount" action="">
    <fieldset>
        <legend>CoPay Calculator</legend>
        <p>
            <label for="coinsurance">Coinsurance</label>
            <input class="bottom-input text-right copayCopy" id="coinsurance" name="coinsurance" type="text" autocomplete="off" value="%"/>
        </p>
        <p>
            <label for="orderTotal">Total Deductible</label>
            <input class="bottom-input text-right copayCopy" id="totalDeductible" name="totalDeductible" type="text" autocomplete="off"/>
        </p>
        <p>
            <label for="deductible">Remaining Deductible</label>
            <input class="bottom-input text-right copayCopy" id="remainingDeductible" name="remainingDeductible" type="text" autocomplete="off"/>
        </p>
        <p>
            <label for="deductible">Total Allowable</label>
            <input class="bottom-input text-right copayCopy" id="totalAllow" name="totalAllow" type="text" autocomplete="off"/>
        </p>
        <p>
            <input type="submit" value="Calculate CoPay" />
            or
            <input type="reset" value="Reset" />
        </p>
        <p>
            <label for="amount">Amount</label>
            <input class="bottom-input text-right copayCopy" id="amount" name="amount" type="number" disabled /> 
        </p>
    </fieldset>
</form>

JS

(function () {
    function calculateCoPay(totalDeductible, coinsurance, remainingDeductible, totalAllow) {
        totalDeductible = parseFloat(totalDeductible);
        coinsurance = parseFloat(coinsurance);
        remainingDeductible = parseFloat(remainingDeductible);
        totalAllow = parseFloat(totalAllow);
        if (remainingDeductible > totalAllow) {
            return totalAllow;
        } else {
            return ((totalAllow - remainingDeductible) * (coinsurance / 100));
        }
    }

    var coPayTotalAmount = document.getElementById("coPayTotalAmount");
        if (coPayTotalAmount) {
            coPayTotalAmount.onsubmit = function () {
                this.amount.value = calculateCoPay(this.totalDeductible.value, this.coinsurance.value, this.remainingDeductible.value, this.totalAllow.value);
                return false;
            };
        }
    }());

I want to now take that information inputted by the user and allow them to copy it with a copy to clipboard function like so

function copyForm() {
    var copyText = document.getElementById("coPayTotalAmount");
    copyText.select();
    document.execCommand("copy");
}

So that the user will receive information like so: Coinsurance 20% Total Deductible 1000 etc...

This copyForm function works if I take 1 id that contains a unique value such as coinsurance, but doesn't work when I try to get multiple values to copy to the clipboard.

Upvotes: 0

Views: 223

Answers (1)

Anirban Roy
Anirban Roy

Reputation: 23

You can extract all the information in a single hidden div and then use your copyForm function to copy that div.

<div style="display:none;" id="copyThis"></div>
<script>
var coinsurance=document.getElementById("coinsurance").value;
var totaldeductible=document.getElementById("totaldeductible").value;
document.getElementById("copyThis").innerHTML="Coinsurance: "+coinsurance+" Total Deductible: "+totaldeductible;
</script>

and now use your copyForm function to copy the content from the copyThis div.

Upvotes: 1

Related Questions