Appending Problem for Checkbox Value

Appending Problem for Checkbox Value
0

#1

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 (Month) 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.

PS: I am using php codeigniter.

<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>
<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="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>';
    row += '</tr>';

<?php
$count++;
}
?>    
    });
    row = row.substring();
    $(".tableGroup").val(row);
    return row;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
    $(".feemaster_form").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>

#2

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

Happy coding :slight_smile: