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>
