How to make the shipping address and billing address the same?

Question

I have a checkout page where a user puts in their shipping address. At the bottom is a checkmark which by default sets the shipping address to be the same as the billing address. This however does not work.

<input type="hidden" name="sameAddress" class="sameAddressValue" value="1">

<div class="use-same-address">
  <label for="sameAddress"><input id="sameAddress" name="sameAddress" type="checkbox" checked="checked"/>
    <span class="label-body">Use same address for billing</span>
  </label>
</div>

If the checkmark is unchecked the sameAddress value is set to 0, the billing address fields appear and you can type in a different billing address. This does work.

I'm using sameAddress = 1 as advised in the documentation but it doesn't seem to work. Here's the relevant js that toggles the billing address and same address value. Is hiding he billing address fields causing some sort of error?

    $("#sameAddress").change(function (e) {
        $('.billingAddress').toggleClass('hidden');
        if (this.checked) {
            $('.required-toggle').removeAttr('required');
            $('.sameAddressValue').val(1);
        } else{
            $('.required-toggle').attr('required', '');
            $('.sameAddressValue').val(0);
        }
    });

Edit: Adding all the form code

<form method="post">

        <input type="hidden" name="action" value="commerce/cart/updateCart">
        <input type="hidden" name="redirect" value="shop/checkout/payment"/>

        {{ getCsrfInput() }}

        <h3>Delivery address</h3>

        <div class="half-width">
            <div class="field">
                <label for="shippingAddress-firstName">First Name</label>
                <input type="text" id="shippingAddress-firstName" name="shippingAddress[firstName]" pattern=".{2,}" required value="">
            </div>

            <div class="field">
                <label for="shippingAddress-lastName">Last Name</label>
                <input type="text" id="shippingAddress-lastName" name="shippingAddress[lastName]" required value="">
            </div>
        </div>

        <div class="field  clear">
            <label for="shippingAddress-businessName">Company (optional)</label>
            <input type="text" id="shippingAddress-businessName" name="shippingAddress[businessName]" value="">
        </div>

        <div class="field  clear">
            <label for="">Email</label>
            <input type="text" value="{{ cart.email }}" name="email" required placeholder="example@site.com"/>
        </div>

        <div class="field  clear">
            <label for="shippingAddress-phone">Phone</label>
            <input type="text" id="shippingAddress-phone" class="u-full-width" placeholder="020 7946 0123" name="shippingAddress[phone]" required value="">
        </div>


        <div class="field clear">
            <label for="shippingAddress-address1">Address 1</label>
            <input type="text" id="shippingAddress-address1" name="shippingAddress[address1]" required value="">
        </div>

        <div class="field clear">
            <label for="shippingAddress-address2">Address 2</label>
            <input type="text" id="shippingAddress-address2" name="shippingAddress[address2]" value="">
        </div>

        <div class="half-width">
            <div class="field">
                <label for="shippingAddress-city">City</label>
                <input type="text" id="shippingAddress-city" name="shippingAddress[city]" required value="">
            </div>

            <div class="field">
                <label for="shippingAddress-postCode">Post Code</label>
                <input type="text" id="shippingAddress-postCode" name="shippingAddress[postCode]" maxlength="8" required value="">
            </div>
        </div>

        <div class="field clear">
            <label for="shippingAddress-countryId">Country</label>
            <select class="address-country u-full-width form-control input-sm" id="shippingAddress-countryId" name="shippingAddress[countryId]">
                <option value="77">United Kingdom</option>
            </select>
        </div>

        {# Use same address button #}
        <input type="hidden" name="sameAddress" class="sameAddressValue" value="1">
        <div class="use-same-address">
            <label for="sameAddress"><input id="sameAddress" name="sameAddress" type="checkbox" checked="checked"/><span class="label-body">Use same address for
        billing</span></label>
        </div>

        <div class="billingAddress hidden">
            <h3>Billing address</h3>

            <div class="half-width">
                <div class="field">
                    <label for="billingAddress-firstName">First Name</label>
                    <input class="required-toggle" type="text" id="billingAddress-firstName" name="billingAddress[firstName]" value="">
                </div>

                <div class="field">
                    <label for="billingAddress-lastName">Last Name</label>
                    <input class="required-toggle" type="text" id="billingAddress-lastName" name="billingAddress[lastName]" value="">
                </div>
            </div>

            <div class="field  clear">
                <label for="billingAddress-businessName">Company (optional)</label>
                <input type="text" id="billingAddress-businessName" name="billingAddress[businessName]" value="">
            </div>

            <div class="field  clear">
                <label for="">Email</label>
                <input class="required-toggle" type="text" value="{{ cart.email }}" name="email" placeholder="email@site.com"/>
            </div>

            <div class="field  clear">
                <label for="billingAddress-phone">Phone</label>
                <input class="required-toggle" type="text" id="billingAddress-phone" class="u-full-width" name="billingAddress[phone]" value="">
            </div>


            <div class="field clear">
                <label for="billingAddress-address1">Address 1</label>
                <input class="required-toggle" type="text" id="billingAddress-address1" name="billingAddress[address1]" value="">
            </div>

            <div class="field clear">
                <label for="billingAddress-address2">Address 2</label>
                <input type="text" id="billingAddress-address2" name="billingAddress[address2]" value="">
            </div>

            <div class="half-width">
                <div class="field">
                    <label for="billingAddress-city">City</label>
                    <input class="required-toggle" type="text" id="billingAddress-city" name="billingAddress[city]" value="">
                </div>

                <div class="field">
                    <label for="billingAddress-postCode">Post Code</label>
                    <input class="required-toggle post-code" type="text" id="billingAddress-postCode" name="billingAddress[postCode]" value="">
                </div>
            </div>

            <div class="field">
                <label for="billingAddress-countryId">Country</label>
                <select class="address-country u-full-width form-control input-sm" id="billingAddress-countryId" name="billingAddress[countryId]">
                    <option value="77">United Kingdom</option>
                </select>
            </div>
        </div>

        <div class="continue-button-wrapper">
            <input class="continue button" type="submit" value="Continue">
        </div>

    </form>

Answer 1

Docs

As you can see from both examples, the shipping address is always submitted, and the billingAddress can either be also included, or set to the same address as the shipping address with the sameAddress param.

The shippings address is always submitted -> the billing address can be included or not

Your statement:

At the bottom is a checkmark which by default sets the shipping address to be the same as the billing address. This however does not work.

You set the shipping address like billing address which is the other way around and won't work unless you change the logic