I am trying insert select tag in form repeater issue i am getting is. when there is single row i got select tag inside form repeater . but when i add new row in form repeater it behaves as parent form select tag. I mean it won't be repeater form field any more
HTML Code
<form class="kt-form kt-form--label-right" action="" method="post">
@csrf
<div class="kt-portlet__body">
<div class="form-group">
<div class="col-lg-3 kt-margin-b-10-tablet-and-mobile">
<label>Product Type</label>
<select class="form-control kt-selectpicker form-control-md" name="product_type_id"
data-live-search="true" id="add_storage_product_type">
@foreach($product_types as $product_type)
<option value=""></option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-3 kt-margin-b-10-tablet-and-mobile">
<label>Storage Charge Method</label>
<select class="form-control kt-selectpicker form-control-md" name="storage_charge_method"
data-live-search="true" id="storage_charge_method">
<option value="per_location" selected="selected">Per Location</option>
<option value="volume">Volume Based</option>
<option value="weight">Weight Based</option>
<option value="per_pallet">Per Pallet (based on qty)</option>
</select>
</div>
</div>
<div class="kt-portlet" style="box-shadow:0px 0px 13px 0px rgba(82, 63, 105, 0.28)">
<div class="kt-portlet__head">
</div>
<!--begin::Form-->
<div class="kt-portlet__body">
<div class="form-group row">
<div class="col-lg-3">
<label>Rate Type</label>
<select class="form-control kt-selectpicker" id="rate_type" name="rate_type">
<option value="flat_rate">Flat Rate</option>
<option value="sliding_scale">Sliding Scale</option>
</select>
</div>
<div class="col-lg-3">
<div style="display: none;" id="add_storage_calculation_method">
<label>Calculation Method</label>
<select class="form-control kt-selectpicker" name="calculation_method">
<option value="1">Non-Cumulative</option>
<option value="2">Cumulative</option>
</select>
</div>
</div>
</div>
<div class="form-group row" id="per_location_rate">
<div class="col-lg-4">
<label>Per Locations Rate</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">$
</i></span></div>
<input type="number" class="form-control" placeholder="Rate Per Locations"
name="per_location_rate" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div style="display: none;" id="add_storage_per_volume_rate">
<div class="form-group row">
<div class="col-lg-4">
<label>Per Volume (m3) Rate</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"
id="basic-addon1">$ </i></span></div>
<input type="number" class="form-control" placeholder="Rate Per Volume"
name="add_storage_per_volume_rate" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
<!-- Start Sliding Scale -->
<div style="display: none;" id="sliding_scale_rate">
<center>
<p id="show2"><b>Sliding Volume (m3) Scale Rates</b></p>
</center>
<p><b> Add New </b></p>
<div id="repeater">
<div data-repeater-list="sliding_scale">
<div data-repeater-item>
<div class="form-group row">
<div class="col-lg-3">
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"
id="basic-addon1">From </span></div>
<input type="number" class="form-control from" placeholder="0"
name="from" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"
id="basic-addon1">To </span></div>
<input type="number" class="form-control to" placeholder=""
name="to" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<div class="input-group-prepend"><span
class="input-group-text scale"></span></div>
<input type="number" class="form-control charge_rate"
placeholder="0.0" name="charge_rate"
aria-describedby="basic-addon1">
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<div class="input-group-prepend after"><span class="input-group-text"
id="basic-addon1"></span></div>
<div class="input-group-append">
<a href="javascript:;" data-repeater-delete=""
class="btn btn-danger btn-icon">
<i class="la la-remove"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn btn-success add">
<span>
<i class="la la-plus "></i>
<span></span>
</span>
</div>
</div>
</div>
<!-- Ending Scale 1 -->
</div>
</div>
<div class="form-group row">
<div class="col-lg-4">
<label>Max Number of New Charges Per Location</label>
<input type="number" class="form-control" placeholder="Leave Blank for No Max"
name="max_no_of_new_charges_per_location" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="kt-portlet__foot">
<div class="kt-form__actions">
<button type="submit" class="btn btn-primary">
Create
</button>
<a href="#" class="btn btn-default pull-right">Back</a>
</div>
</div>
</form>
In following code storageChargeMethod(storage_charge_method) method is actually inserting select tag in show function of form repeater Jquery Code
$('<select class="form-control kt-selectpicker select_scale" aria-describedby="basic-addon1" name="charge_scale"> <option value="flat_rate">Flat Rate</option><option value="per_location">per Location</option></select>')
.insertAfter('.after');
$('#storage_charge_method').change(function () {
var storage_charge_method = $('#storage_charge_method').val();
storageChargeMethod(storage_charge_method);
});
$('#repeater').repeater({
initEmpty: false,
show: function () {
var storage_charge_method = $('#storage_charge_method').val();
storageChargeMethod(storage_charge_method);
console.log(this);
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
});
function storageChargeMethod(method) {
switch (method) {
case 'per_location':
$('.scale').text('Locations, charge $');
$('.select_scale').remove();
$('<select class="form-control kt-selectpicker select_scale" aria-describedby="basic-addon1" name="charge_scale"> <option value="flat_rate">Flat Rate</option><option value="per_location">per Location</option></select>')
.insertAfter('.after');
break;
case 'volume':
$('.scale').text('Volume (m3), charge $');
$('.select_scale').remove();
$('<select class="form-control kt-selectpicker select_scale" name="charge_scale"> <option value="flat_rate">Flat Rate</option><option value="per_volume">per Volume</option></select>')
.insertAfter('.after');
break;
case 'weight':
$('.scale').text('Weight (KG), charge $');
$('.select_scale').remove();
$('<select class="form-control kt-selectpicker select_scale" name="charge_scale"> <option value="flat_rate">Flat Rate</option><option value="per_weight">Weight Based</option></select>')
.insertAfter('.after');
break;
case 'per_pallet':
$('.scale').text('Pallets, charge $');
$('.select_scale').remove();
$('<select class="form-control kt-selectpicker select_scale" name="charge_scale"> <option value="flat_rate">Flat Rate</option><option value="per_pallet">per Pallet</option></select>')
.insertAfter('.after');
break;
default:
alert('Invalid Value Selected');
}
$('select').addClass('form-control kt-selectpicker');
$("select").selectpicker("refresh");
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire