CodeIgniter Forums
appending checkbox in a html table and save to database - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: appending checkbox in a html table and save to database (/showthread.php?tid=71301)

appending checkbox in a html table and save to database - monperiabras - 07-30-2018

I am just new in this using javascript and I am having a hard time in appending a value from a checkbox to a table cell with a inputbox inside. When I check one of the checkbox(fee_type/month) the table is populated by all the fee types from the data base and plus the the amount table must be populated in the amount and penalty table(please see attached image of the actual view form)... please help me with this problem.

Thank you very much in advance.


My form View

PHP Code:
<div class="form-group">
 <label>Grade Level</label>
 <select  id="class_id" name="class_id" class="form-control" >
  <option value=""><?php echo $this->lang->line('select'); ?></option>
    <?php foreach ($classlist as $class) { ?>
      <option value="<?php echo $class['id'] ?>" 
       <?php if (set_value('class_id') == $class['id']) {
            echo "selected =selected";
       }
       ?>><?php echo $class['class'] ?></option>
       <?php
       $count++;
       }
       ?>
       </select>
       <span class="text-danger"><?php echo form_error('class_id'); ?></span>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Fee Group Name</label>
        <select autofocus="" id="fee_groups_id" name="fee_groups_id" class="form-control" >
            <option value=""><?php echo $this->lang->line('select'); ?></option>  
        </select><span class="text-danger"><?php echo form_error('fee_groups_id'); ?></span>
</div>
  <div class="form-group">
    <label>amount</label>
    <input id="amount" name="amount" placeholder="" type="text" class="form-control"  value="<?php echo set_value('amount'); ?>" />
    <span class="text-danger"><?php echo form_error('amount'); ?></span>
</div>
<div class="form-group">
    <label>Penalty</label>
    <input id="penalty" name="penalty" placeholder="" type="text" class="form-control"/>
    <span class="text-danger"><?php echo form_error('penalty'); ?></span>
</div>
<div class="col-md-6">
<div class="form-group">
    <label for="exampleInputEmail1">Fee type</label>

    <?php foreach ($feetypeList as $feetype) { ?>
        <div class="checkbox" >
            <label style="display: inline-block; max-height: 25px; list-style: none; float: left; padding-top: 5px; width: 130px; margin-right: 40px;">
            <input id="chkAdd" type="checkbox" name="feetype_id" value="<?php echo $feetype['id'] ?>" <?php echo set_checkbox('feetype', $feetype['id']); ?> ><?php echo $feetype['type'] ?>
            </label>
        </div>
    <?php } ?>
         <span class="text-danger"><?php echo form_error('feetype_id'); ?></span>
</div> 


My Javascript

Code:
<script type="text/javascript">
   $(function () {
       $(document).on("click", "#chkAdd", function () {
           var lenght_div = $('#TextBoxContainer .app').length;
           var div = GetDynamicTextBox(lenght_div);
           $("#TextBoxContainer").append(div);
       });
       $(document).on("click", "#btnGet", function () {
           var values = "";
           $("input[name=DynamicTextBox]").each(function () {
               values += $(this).val() + "\n";
           });
       });
   });
   function GetDynamicTextBox(value) {
       var row = "";
       $('#chkAdd:checked').each(function(){
       row += '<tr class="tableGroup">';
<?php foreach ($feetypeList as $feetype) { ?>
       row += '<td class="mailbox-name"><input class="form-control" name="feetype_id" value="<?php echo set_value('feetype_id', $feetype['type']); ?>"/></td>';
       row += '<td class="mailbox-name"><input class="form-control" name="startDate"  value="<?php echo set_value('startDate', $feetype['start_date']); ?>"/></td>';
       row += '<td class="mailbox-name"><input class="form-control" name="endDate" value="<?php echo set_value('startDate', $feetype['end_date']); ?>"/></td>';
       row += '<td class="mailbox-name"><input id="amount" name="amount" placeholder="" type="text" class="form-control"/></td>';
       row += '<td class="mailbox-name"><input id="penalty" name="penalty" placeholder="" type="text" class="form-control"/></td>';
       row += '</tr>';

   <?php
   $count++;
}
?>    
       });
       row = row.substring();
       $(".tableGroup").val(row);
       return row;
   }
</script>

<script type="text/javascript">
   $(document).ready(function () {
       $(".feemasterform").submit(function (e)
       {
           $("#TextBoxContainer").html("");
           $.ajax(
                   {
                       url: formURL,
                       type: "POST",
                       data: postData,
                       dataType: 'json',
                       success: function (data, textStatus, jqXHR)
                       {
                           if (data.st === 1) {
                               $.each(data.msg, function (key, value) {
                                   $('.' + key + "_error").html(value);
                               });
                           } else {
                               var response = data.msg;
                               if (response && response.length > 0) {
                                   for (i = 0; i < response.length; ++i) {
                                       var feetype_id = response[i].feetype_id;
                                       var row_id = response[i].id;
                                       appendRow(feetype_id, row_id);
                                   }
                               } else {
                                   appendRow(0, 0, 0);
                               }
                             
                               $('#chkAdd');
                             
                           }
                       },
                       error: function (jqXHR, textStatus, errorThrown)
                       {
                       }
                   });

           e.preventDefault();

       });
   });
   function appendRow() {
       var value = $('#TextBoxContainer .app').length;    
       var row = "";
      row += '<td class="mailbox-name"><input class="form-control" name="feetype_id" value="<?php echo set_value('feetype_id', $feetype['type']); ?>"/></td>';
       row += '<td class="mailbox-name"><input class="form-control" name="startDate"  value="<?php echo set_value('startDate', $feetype['start_date']); ?>"/></td>';
       row += '<td class="mailbox-name"><input class="form-control" name="endDate" value="<?php echo set_value('startDate', $feetype['end_date']); ?>"/></td>';
       row += '<td class="mailbox-name"><input id="amountCell" name="amountCell" placeholder="" type="text" class="form-control"/></td>';
       row += '<td class="mailbox-name"><input id="penaltyCell" name="penaltyCell" placeholder="" type="text" class="form-control"/></td>';
       $count++;
       row += '</tr>';
        $("#TextBoxContainer").append(row);
   }

</script>



In this screenshot shows that when i click upon enrollment its append all the month instead of appending only the checked month and the amount and the penalty is not appending on the amount and penalty column

[Image: ddIUY.jpg]