Fill up 1 form data using data attribute in another form with jquery

In my laravel 5 ecommerce web application, I am trying to fill up shipping_address form values same as billing_address form values if the checkbox of name = same_as_billing is checked.

I am trying to do this using data-* attribute, but I am failing to achieve my goal.

What I want is: billing_address form values should fill up shipping_address form values automatically using data-values attribute.

Here's the form billing_address:

<div class="form-group">
    {!! Form::label('address_1', 'Address 1:') !!}
    {!! Form::text('address_1', $billing->address_1, ['class' => 'form-control input-sm', 'data-values' => $billing->address_1]) !!}
</div>

<div class="form-group">
    {!! Form::label('address_2', 'Address 2:') !!}
    {!! Form::text('address_2', $billing->address_2, ['class' => 'form-control input-sm', 'data-values' => $billing->address_2]) !!}
</div>

<div class="form-group">
    {!! Form::label('area', 'Area:') !!}
    {!! Form::text('area', $billing->area, ['class' => 'form-control input-sm', 'data-values' => $billing->area]) !!}
</div>

<!-- Rest of the form values -->

Here's the form shipping_address:

<div class="form-group">
    {!! Form::checkbox('same_as_billing', 'same_as_billing', false, ['id' => 'same_as_billing']) !!}
    <label for="same_as_billing">Shipping Address Same As Billing Address</label>
</div>

<div class='shippingAddressFormFields'>
    <div class="form-group">
        {!! Form::label('address_1', 'Address 1:') !!}
        {!! Form::text('address_1', $billing->address_1, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('address_2', 'Address 2:') !!}
        {!! Form::text('address_2', $billing->address_2, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('area', 'Area:') !!}
        {!! Form::text('area', $billing->area, ['class' => 'form-control input-sm']) !!}
    </div>
</div>

    <!-- Rest of the form values -->

The jquery code that I have tried:

var inputField = $('.shippingAddressFormFields').find('input');
inputField.val('');
var selectField = $('.shippingAddressFormFields').find('select');
selectField.val('');

$('#same_as_billing').on('click', function() {
    if( $(this).is(':checked') ) {
        inputField.prop('readonly', true);
        selectField.prop('disabled', true);

        $("[data-values]").filter(function() {
            return $(this).data('values');
        }).each(function(e, v) {
            v.value = $("[data-values]").data('values');

            console.log(e + ": " + v.value);
        });

    } else {
        inputField.prop('readonly', false);
        selectField.prop('disabled', false);

        inputField.val('');
        selectField.val('');
    }
});

The output of console.log(e + ": " + v.value); which is wrong:

0: BAK Building, This Colony // <-- address_1 - correct
1: BAK Building, This Colony // <-- address_2 - incorrect

The desired output of console.log(e + ": " + v.value); should be :

0: BAK Building, This Colony // <-- address_1 - correct
1: That Road, Some Landmark // <-- address_2 - correct

The desired output should fill up the shipping_address form values.

How can I achieve that ?

Any help is appreciated. Thanks.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/1hrmXtq
via IFTTT