I have two address forms. One is billing, and the other is shipping. When the user checks the "ship to same address" checkbox, the shipping form is hidden.
When I pass the form before clicking on the checkbox, the form is not submitted. When the checkbox is checked, accurate data is sent for both forms, but when the user unchecks the box, the billing address posts three times.
I use jQuery and ajax code to submit the form.
$(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);
});
}
});
it's SHIPPING form code
<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
and it's Billing Form HTML code
<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
