【发布时间】：2019-04-27 03:01:46
【问题描述】：
我有两个地址表格。一个是计费，另一个是运输。当用户选中“运送到同一地址”复选框时，运送表单被隐藏。
当我在点击复选框之前通过表单时，表单没有提交。当复选框被选中时，两个表单都会发送准确的数据，但是当用户取消选中复选框时，帐单地址会发布 3 次。
我使用 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
【问题讨论】：
-
我对您的问题进行了临时编辑，以使其更加清晰。我希望我正确理解了你的意思。 （如果您还可以包含 HTML 标记，它可能会帮助人们提供有用的答案。）
-
谢谢猫，我会用 HTML 代码更新
标签： javascript jquery ajax