使用jquery在另一个表单中使用data属性填充1个表单数据


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

在我的laravel 5电子商务网站应用程序中,如果检查name = same_as_billingcheckbox,我试图填写shipping_address表单值与billing_address表单值相同。

我正试图使用data-*属性做到这一点,但我未能实现我的目标。

我想要的是:billing_address表单值应该使用data-values属性自动填充shipping_address表单值。

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 -->

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 -->

我尝试过的jquery代码:

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('');
    }
});

console.log(e + ": " + v.value);错误输出:

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

console.log(e + ": " + v.value);期望输出应该是:

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

期望的输出应该填充shipping_address表单值。

我该怎么做呢?

任何帮助都是感激的。谢谢。

您正在访问$.each的值不正确,您当前的代码只会返回第一个data-values,我认为,这就是为什么它不工作。

试试console.log(v.dataset.values);

你可以这样绑定这些值:

$('.shippingAddressFormFields [name="' +  v.getAttribute("name") + '"]')
    .val(v.dataset.values);

参见工作小提琴:http://jsfiddle.net/ntp3Lqpj/2/