我有两个地址表格。一个是计费，另一个是运输。当用户选中“到相同地址的发货”复选框时，发货表格将被隐藏。
当我在单击复选框之前通过表单时，未提交表单。选中该复选框后，将发送两种形式的准确数据，但是当用户取消选中该复选框时，帐单邮寄地址将发送三遍。
我使用jQuery和Ajax代码提交表单。
$(document).ready(function(){
$('.le-checkbox').click(function(){
if(this.checked) {
$("#deliveryadd").hide();
$(".le-checkbox").attr("checked", "checked");
$('#submit').click(function(){
var address= $('#address').val();
var city_id= $('#city_id').val();
var user = {{Auth::user()->id}};
console.log(address,city_id,user);
console.log(address,city_id,user);
billing(address,city_id,user);
shipping(daddress,dcity_id,user);
});
}
else {
$("#deliveryadd").show();
$(".le-checkbox").removeAttr("checked");
$('#submit').click(function(){
var address= $('#address').val();
var city_id= $('#city_id').val();
var user = {{Auth::user()->id}};
console.log(address,city_id,user);
billing(address,city_id,user);
});
$('#deliverySubmit').click(function(){
var daddress= $('#de_address').val();
var dcity_id= $('#de_city_id').val();
var user = {{Auth::user()->id}};
console.log(daddress,dcity_id,user);
shipping(daddress,dcity_id,user);
});
}
});
function billing(baddress,bcity,buser){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '{{url("/billing-address")}}',
type: 'post',
dataType: 'html',
data: {
address:baddress,
city_id:bcity,
user_id:buser
},
success: function(result){
$('#billing').html(result);
}
}).fail(function(jqXHR, textStatus, error){
console.log(jqXHR.responseText);
});
}
function shipping(saddress,scity,suser){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '{{url("/shipping-address")}}',
type: 'post',
dataType: 'html',
data: {
address:saddress,
city_id:scity,
user_id:suser
},
success: function(result){
$('#shipping').html(result);
}
}).fail(function(jqXHR, textStatus, error){
console.log(jqXHR.responseText);
});
}
});
这是运输表格代码
<h2 class="border h1">shipping address</h2>
@if(App\Address::where('user_id',Auth::user()->id)->where('type','Delivery')->exists())
<address class="bold" id="addr">
@foreach ($collection = Auth::user()->address as $item)
@if ($item->type == 'Delivery')
{{$item->street}},<br>
{{$item->city->name}},<br>
{{$item->city->parent->name}}
@endif
@endforeach
</address>
@else
<div class="billing-address" id="deliveryadd">
<div class="row field-row">
<div class="col-xs-12">
<label>address*</label>
<input class="le-input" type="text" id="de_address" data-placeholder="Street address" name="de_address">
</div>
</div><!-- /.field-row -->
<div class="row field-row">
<div class="col-xs-12 col-sm-6">
<label>City*</label>
<select class="le-input">
<option>Lahore</option>
</select>
</div>
<div class="col-xs-12 col-sm-6">
<label> </label>
<select class="le-input" id="de_city_id">
<option value="null">Select Town</option>
@foreach ($collection = App\City::where('parent_id','!=', '0')->get() as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
@endforeach
</select>
</div>
</div><!-- /.field-row -->
<button id="deliverySubmit" class="le-button big">Save</button>
</div><!-- /#shipping-address -->
<div class="row field-row">
<div class="col-xs-12">
<input name="same" class="le-checkbox big" type="checkbox" />
<a class="simple-link bold" href="#">ship to Same address?</a>
</div>
</div><!-- /.field-row -->
@endif
这是帐单表单HTML代码
<h2 class="border h1">billing address</h2>
{{-- <a style="float: right;" href="javascript:;" id="edit">Edit</a> --}}
@if(App\Address::where('user_id',Auth::user()->id)->where('type','Billing')->exists())
<address class="bold" id="addr">
@foreach ($collection = Auth::user()->address as $item)
@if ($item->type == 'Billing')
{{$item->street}},<br>
{{$item->city->name}},<br>
{{$item->city->parent->name}}
@endif
@endforeach
</address>
@else
<div class="row field-row">
<div class="col-xs-12">
<label>address*</label>
<input class="le-input" type="text" id="address" data-placeholder="Street address">
</div>
</div><!-- /.field-row -->
<div class="row field-row">
<div class="col-xs-12 col-sm-6">
<label>City*</label>
<select class="le-input">
<option>Lahore</option>
</select>
</div>
<div class="col-xs-12 col-sm-6">
<label> </label>
<select class="le-input" id="city_id">
<option value="null">Select Town</option>
@foreach ($collection = App\City::where('parent_id','!=', '0')->get() as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
@endforeach
</select>
</div>
</div><!-- /.field-row -->
<button id="submit" class="le-button big">Save</button>
@endif
答案 0 :(得分：2)
您的代码为单击复选框时为单击提交按钮的事件分配了事件处理程序。这意味着：
如果未单击该复选框，则不会设置这些按钮单击的事件处理程序。因此，单击按钮将不会执行任何JS提交工作，但可能会执行常规的非JS表单提交；
如果您单击一次复选框（例如将其选中），则将事件处理程序添加到#submit按钮。如果现在取消选中该复选框，则您将另一个事件处理程序添加到#submit按钮上，并在#deliverySubmit按钮上添加一个！取消选中该复选框不会删除您之前添加的事件处理程序。因此，如果您单击#submit，则两个处理程序都会触发。如果您多次勾选和取消勾选该复选框，则只需继续堆积其他事件处理程序，当最终单击按钮时，所有所有事件处理程序都将运行。
这不是一个好方法。相反，您应该独立于用户交互设置事件处理程序，并让代码根据复选框状态确定要执行的操作。
其他一些观察结果：
要跟踪复选框的点击次数，应使用$('.le-checkbox').on('change', function() {而不是click;
我不确定为什么在勾选复选框时为什么要手动设置复选框状态（例如$(".le-checkbox").attr("checked", "checked");）？我不会那样做，它肯定会引起问题，实际上并没有做任何事情。
在您的#submit处理程序中，选中此复选框时，您有shipping(daddress,dcity_id,user);，但未设置这些变量。如果勾选了该复选框，则发货==结算，所以我认为您的意思是shipping(address, city_id, user);，对吧？
我不确定为什么您的复选框文本是实际的链接？这只会使事情复杂化-just use a label，因此单击文本将正确切换复选框。
您没有向我们显示您的#submit按钮HTML，所以我不知道-为什么您有2个按钮？还不够吗？
将所有内容放在一起，尝试如下操作：
$('#submit').click(function(){
var $checkbox=$('.le-checkbox'),
address= $('#address').val(),
city_id= $('#city_id').val(),
daddress= $('#de_address').val(),
dcity_id= $('#de_city_id').val(),
user = {{Auth::user()->id}};
// Billing address is always sent, no matter the checkbox state
billing(address, city_id, user);
// Shipping address depends on checkbox state
if ($checkbox.is(':checked') {
shipping(address, city_id, user);
} else {
shipping(daddress, dcity_id, user);
}
});
$('.le-checkbox').on('change', function(){
$("#deliveryadd").toggle();
// .toggle() is simpler than .show() and .hide()
// if (this.checked) {
// $("#deliveryadd").hide();
// } else {
// $("#deliveryadd").show();
// }
}