There are four radio buttons (fixed, percentage, monthly, yearly), with two buttons sharing common fields and the other two having different common fields. To address this, I created two divs, one for fixed and percentage, and the other for monthly and yearly, each with an "add more" button. However, when entering data for the monthly div (with multiple rows), the zeroth position appears blank in the database as 0. The solution I propose is to have only one div and dynamically hide/show fields based on the selected radio button.
Here is the HTML Code for labels:
<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
<div class="col-lg-10" required>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<!-- Remaining code for labels -->
</div>
HTML code for fixed/percentage div
<div id="fixPerDiv" style="display:block;">
<!-- Code for fixed/percentage division -->
</code></pre>
<p>Html for monthly/fixed div </p>
<pre><code><div id="monYearDiv" style="display:none;">
<!-- Code for monthly/yearly division -->
</div>
Jquery code:
<script>
$(document).ready(function() {
$('input[type=radio][name=comission_type]').change(function() {
if (this.value == '0' || this.value == '1') {
$("#fixPerDiv").css("display","block");
$("#monYearDiv").css("display","none");
}
else if (this.value == '2' || this.value == '3') {
$("#fixPerDiv").css("display","none");
$("#monYearDiv").css("display","block");
}
});
});
</script>