在我的laravel 5电子商务网站应用程序中,如果检查name = same_as_billing
的checkbox
,我试图填写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/