I use ajax to display shipping cost for each shop based on how much the product weighs, the origin of the product (city_origin), and where the product will be delivered. . this is the script :
$('select[name="kurir"]').on('change', function(){
let origin = $("input[name=city_origin]").val();
let destination = $("select[name=alamat]").val();
let courier = $("select[name=kurir]").val();
let weight = $("input[name=weight]").val();
if(courier){
jQuery.ajax({
url:"/origin="+origin+"&originType=city&destination="+destination+"&destinationType=city&weight="+weight+"&courier="+courier,
type:'GET',
dataType:'json',
success:function(data){
$('select[name="layanan"]').empty();
$.each(data, function(key, value){
$.each(value.costs, function(key1, value1){
$.each(value1.cost, function(key2, value2){
$('select[name="layanan"]').append('<option value="'+ key +'">' + value1.service + '-' + value1.description + '-' +value2.value+ '</option>');
});
});
});
}
});
} else {
$('select[name="layanan"]').empty();
}
});
this works fine, but when I want to display multiple stores using foreach, it only works on the first store and iterates the same shipping cost to the other stores. this is the code in the view section to display the stores:
<div style="display: none">
</div>
@foreach ($barangs as $key=>$value)
<div class="card" style="margin-top:10px;">
<div class="card-body">
<div class="row">
<div class="col-12">
@php
$tokos = collect($toko)->where('id','=', $key);
$tok = json_decode($tokos, true);
@endphp
@foreach ($tok as $tk)
<input style="display: none" type="text" value="" class="form-control" id="city_origin" name="city_origin">
<p style="font-weight:bold; color:#00463B"><i class="icon-basket"></i> </p>
@endforeach
</div>
</div>
@foreach ($value as $row)
<div class="row" style="margin-top:30px;">
<div class="col-2">
<img src="" alt="" style="width:70px;">
</div>
<div class="col-5">
<p></p>
</div>
<div class="col-2">
<p></p>
</div>
<div class="col-3">
<p>Rp. </p>
<div style="display: none"></div>
<input style="display: none" type="text" value="" class="form-control" id="weight" name="weight">
</div>
</div>
@endforeach
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="input-group mb-3">
<select class="form-select" name="kurir" id="kurir">
<option value="">Pilih Kurir</option>
<option value="jne">JNE</option>
<option value="tiki">TIKI</option>
<option value="pos">POS</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="input-group mb-3">
<select class="form-select" name="layanan" id="layanan">
<option value="">Pilih Layanan</option>
</select>
</div>
</div>
</div>
</div>
</div>
this is where you can get the 'alamat' value :
<select class="form-select" name="alamat" aria-label="Default select example">
@foreach ($alamat[1] as $row)
<option value=""> - </option>
@endforeach
</select>
what should I do to get a different response for each store data from my foreach? I am very new in javascript, any suggestions from you would be very helpful, thankyou.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire