Javascript for checkbox to copy billing text boxes over to shipping text boxes

Question

So far, I have been trying to find a good way of taking Billing information in text boxes and copying the information over to Shipping information text boxes when a user checks the checkbox stating that their billing info is the same as their shipping info.

I have this code so far:

    function InputInformation(n) {   
        if(n.checked === false) { return; }
        document.subscribe.billingfname.value = document.subscribe.shippingfname.value;
        document.subscribe.billinglname.value = document.subscribe.shippinglname.value;
        document.subscribe.billingaddress.value = document.subscribe.shippingaddress.value;
        document.subscribe.billingcity.value = document.subscribe.shippingcity.value;
        document.subscribe.billingstate.value = document.subscribe.shippingstate.value;
        document.subscribe.billingzip.value = document.subscribe.shippingzip.value;
        document.subscribe.billingphone.value = document.subscribe.shippingphone.value;
        }
          return InputInformation;

And I cannot get it work. I'm not sure what I'm doing wrong. Any help would be great!

The javascript goes along to this form:

<form class="wrap" name="subscribe">
            <tr class="left-container">
            <h2>Billing Information:</h2>
            <td>
                <span class="labels">First name: </span>
            <input type="text" name="billingfname">
            </td>
                <br>
                <td>
            <span class="labels"> Last name: </span>
            <input type="text" name="billinglname">
            </td>
                <br>
                <td>
            <span class="labels">Address: </span>
            <input type="text" name="billingaddress" style="width: 200px">
           </td>
                <br>
                <td>
            <span class="labels">City: </span>
            <input type="text" name="billingcity">
            </td>
                <br>
                <td>
            <span class="labels">State: </span>
            <input type="text" name="billingstate">
            </td>
                <br>
                <td>
            <span class="labels">Zip Code: </span>
            <input type="text" name="billingzip" style="width: 80px">
            </td>
                <br>
                <td>
            <span class="labels">Telephone </span>
            <input type="text" name="billingphone" style="width: 80px">
                    </td>
            </tr>
            <tr class="right-container">
            <h2>Shipping Information:</h2>
                <td>
                <input class="shipping" type="checkbox" onclick="InputInformation(this)">Check if Shipping is the same as Billing
                </td>
                <br>
                <td>
            <span class="labels">First name: </span>
            <input type="text" name="shippingfname">
            </td>
                <br>
                <td>
            <span class="labels"> Last name: </span>
            <input type="text" name="shippinglname">
            </td>
                <br>
                <td>
            <span class="labels">Address: </span>
            <input type="text" name="shippingaddress" style="width: 200px">
             </td>
                <br>
                <td>
            <span class="labels">City: </span>
            <input type="text" name="shippingcity">
            </td>
                <br>
                <td>
            <span class="labels">State: </span>
            <input type="text" name="shippingstate">
           </td>
                <br>
                <td>
            <span class="labels">Zip Code: </span>
            <input type="text" name="shippingzip" style="width: 80px">
            </td>
                <br>
                <td>
            <span class="labels">Telephone </span>
            <input type="text" name="shippingphone" style="width: 80px">
                    </td>
            </tr>
</form>

Answer 1

I guess you are trying to copy the shipping to the billing in your code snippet should be other way round.

Check the snippet below.

 function InputInformation(n) { if(n.checked === false) { alert('sdf');return false; } document.subscribe.shippingfname.value = document.subscribe.billingfname.value; document.subscribe.shippinglname.value = document.subscribe.billinglname.value; document.subscribe.shippingaddress.value = document.subscribe.billingaddress.value; document.subscribe.shippingcity.value = document.subscribe.billingcity.value; document.subscribe.shippingstate.value = document.subscribe.billingstate.value; document.subscribe.shippingzip.value = document.subscribe.billingzip.value; document.subscribe.shippingphone.value = document.subscribe.billingphone.value; } 

 <form class="wrap" name="subscribe"> <tr class="left-container"> <h2>Billing Information:</h2> <td> <span class="labels">First name: </span> <input type="text" name="billingfname"> </td> <br> <td> <span class="labels"> Last name: </span> <input type="text" name="billinglname"> </td> <br> <td> <span class="labels">Address: </span> <input type="text" name="billingaddress" style="width: 200px"> </td> <br> <td> <span class="labels">City: </span> <input type="text" name="billingcity"> </td> <br> <td> <span class="labels">State: </span> <input type="text" name="billingstate"> </td> <br> <td> <span class="labels">Zip Code: </span> <input type="text" name="billingzip" style="width: 80px"> </td> <br> <td> <span class="labels">Telephone </span> <input type="text" name="billingphone" style="width: 80px"> </td> </tr> <tr class="right-container"> <h2>Shipping Information:</h2> <td> <input class="shipping" type="checkbox" onchange="InputInformation(this)">Check if Shipping is the same as Billing </td> <br> <td> <span class="labels">First name: </span> <input type="text" name="shippingfname"> </td> <br> <td> <span class="labels"> Last name: </span> <input type="text" name="shippinglname"> </td> <br> <td> <span class="labels">Address: </span> <input type="text" name="shippingaddress" style="width: 200px"> </td> <br> <td> <span class="labels">City: </span> <input type="text" name="shippingcity"> </td> <br> <td> <span class="labels">State: </span> <input type="text" name="shippingstate"> </td> <br> <td> <span class="labels">Zip Code: </span> <input type="text" name="shippingzip" style="width: 80px"> </td> <br> <td> <span class="labels">Telephone </span> <input type="text" name="shippingphone" style="width: 80px"> </td> </tr> </form>