Forum

Thread tagged as: Question, Shop

Checkbox same as billing address

Hi!

I've built a shop and was wondering if there was a way for have the customer to choose the shipping address the same as the billing address? I'm using the passwordless form as there is no account login for this shop and the template is below.

Any help is much appreciated!

<perch:form id="register" method="post" app="perch_shop" action="payment.php">

    <h2>Your details</h2>


    <fieldset style="margin-bottom: 30px">
        <div>
            <perch:label for="first_name">First name</perch:label>
            <perch:input type="text" id="first_name" required="true" label="First name" class="form-control"/>
            <perch:error for="first_name" type="required">Please add your name</perch:error>
        </div>

        <div>
            <perch:label for="last_name">Last name</perch:label>
            <perch:input type="text" id="last_name" required="true" label="Last name"  class="form-control"/>
            <perch:error for="last_name" type="required">Please add your name</perch:error>
        </div>

        <div>
            <perch:label for="email">Email</perch:label>
            <perch:input type="email" id="email" required="true" placeholder="you@company.com" helper="PerchMembers_Members::check_email" class="form-control" />
            <perch:error for="email" type="required">Please add your email address</perch:error>
            <perch:error for="email" type="helper">That email address is already in use</perch:error>
            <perch:input type="hidden" id="password" value="__auto__" />
        </div>

    </fieldset>

    <fieldset style="margin-bottom: 30px">
        <legend>Billing address</legend>
        <div>
            <perch:label for="company">Company</perch:label>
            <perch:input type="text" id="company" label="Company"  class="form-control"/>
        </div>

        <div>
            <perch:label for="address_1">Address 1</perch:label>
            <perch:input type="text" id="address_1" required="true" label="Address 1"  class="form-control"/>
            <perch:error for="address_1" type="required">Please add the first line of your address</perch:error>
        </div>

        <div>
            <perch:label for="address_2">Address 2</perch:label>
            <perch:input type="text" id="address_2" label="Address 2"  class="form-control"/>
        </div>

        <div>
            <perch:label for="postcode">Postal code</perch:label>
            <perch:input type="text" id="postcode" label="Postal code"  class="form-control"/>
        </div>

        <div>
            <perch:label for="city">City</perch:label>
            <perch:input type="text" id="city" label="City"  class="form-control"/>
        </div>

        <div>
            <perch:label for="county">State or County</perch:label>
            <perch:input type="text" id="county" label="County"  class="form-control"/>
        </div>

        <div>
            <perch:label for="country">Country</perch:label>
            <perch:input type="select" options="<perch:shop id="country_list" />" value="236" id="country" label="Country"  class="form-control"/>
        </div>

    </fieldset>

    <fieldset>
        <legend>Shipping address</legend>

        <div>
            <perch:label for="shipping_first_name">First name</perch:label>
            <perch:input type="text" id="shipping_first_name" required="true" label="First name"  class="form-control" />
            <perch:error for="shipping_first_name" type="required">Please add your name</perch:error>
        </div>

        <div>
            <perch:label for="shipping_last_name">Last name</perch:label>
            <perch:input type="text" id="shipping_last_name" required="true" label="Last name"   class="form-control"/>
            <perch:error for="shipping_last_name" type="required">Please add your name</perch:error>
        </div>


        <div>
            <perch:label for="company">Company</perch:label>
            <perch:input type="text" id="shipping_company" label="Company"  class="form-control" />
        </div>

        <div>
            <perch:label for="shipping_address_1">Address 1</perch:label>
            <perch:input type="text" id="shipping_address_1" required="true" label="Address 1"   class="form-control"/>
            <perch:error for="shipping_address_1" type="required">Please add the first line of your address</perch:error>
        </div>

        <div>
            <perch:label for="shipping_address_2">Address 2</perch:label>
            <perch:input type="text" id="shipping_address_2" label="Address 2"   class="form-control"/>
        </div>

        <div>
            <perch:label for="shipping_postcode">Postal code</perch:label>
            <perch:input type="text" id="shipping_postcode" label="Postal code"   class="form-control"/>
        </div>

        <div>
            <perch:label for="shipping_city">City</perch:label>
            <perch:input type="text" id="shipping_city" label="City"   class="form-control"/>
        </div>

        <div>
            <perch:label for="shipping_county">State or County</perch:label>
            <perch:input type="text" id="shipping_county" label="County"   class="form-control"/>
        </div>

        <div>
            <perch:label for="shipping_country">Country</perch:label>
            <perch:input type="select" options="<perch:shop id="country_list" />" value="236" id="shipping_country" label="Country"   class="form-control"/>
        </div>

    </fieldset>
<br><br>

        <div>
            <perch:input type="submit" value="Continue"  class="btn btn-primary btn-lg"/>
        </div>


    <perch:success>
        <p>Thanks!</p>
        <a href="payment.php" class="btn btn-lg btn-primary">Continue to Payment</a>
    </perch:success>

</perch:form>
Jade Marling

Jade Marling 0 points

  • 3 years ago

Hi Jade

I did implement this on a shop but later realised I didn't need it in the end – the customer can choose a delivery/invoice address later in the process so just the one will do – you'll end up with duplicated addresses.

I just grey out and disable the delivery fields if the checkbox is selected. You'd need to assign the two fieldsets with an ID and add a checkbox with an ID of form-copy or whatnot. My jQuery is limited so please excuse my fat fingers!

        $("#form-copy").on('change', function() {
            if($(this).is(":checked")) {

                $('#f-delivery-fields').fadeTo('fast', 0.3);
                $("#f-delivery-fields :input").prop('disabled', true);

           } else {

                $('#f-delivery-fields').fadeTo('fast', 1);

                var $inputs = $("#f-delivery-fields :input");

                $inputs.each(function (index)
                {
                  $(this).prop('disabled', false);
                });     
            }
        });

If you must duplicate the fields then you need to copy the field values from the billing fields into the delivery fields. I would create a function that duplicates the fields (along the lines of $('#form1_shipping_company').val($('#form1_company').val()); and then call that function once the checkbox is selected.

Working form is here: https://ellipress.co.uk/shop/register/

Hoping this helps get you on the road to a solution.

Jon