CodeIgniter 3: Insert/delete html table row on button click with jquery

Question

I'm new in CodeIgniter. and I'm having some trouble inserting/deleting a new empty row on my table.

Button

<button class="btn btn-success" type="submit" name="add_item"  onClick="addMoreSib();" style="display:none" id="addSibling"><li class="fa fa-plus"></li></button> 

<button class="btn btn-danger" type="submit" name="del_item" onClick="deleteRow();" style="display:none" id="deleteSibling"><li class="fa fa-minus"></li></button>

Here's the jquery

function addMoreSib() {
                $("<td>").load("sib_input.php", function() {
                        $("#sibTable").append($(this).html());
                }); 
            }
function deleteRow() {
                    $('TR.product-item').each(function(index, item){
                        jQuery(':checkbox', this).each(function () {
                            if ($(this).is(':checked')) {
                                $(item).remove();
                            }
                        });
                    });
                }

sib_input.php

<tr class="product-item">
<td><input type="checkbox" name="item_index[]" /></td>
<td><input type="text" class="form-control form-input" value="+63-0000000000" placeholder="+63-00000000" disabled id="guardiancontact"></td>
<td><input class="form-control" name="sib_age[]" onKeyPress="return isNumberKey(event)" maxlength="2"></td>
<td><input class="form-control"name="sib_occupation[]"></td>
<td><select class="form-control" name="sib_educ_attain[]" >
        <option value="" selected>-Please select-</option>
        <option value="less than high school">less than high school</option>
        <option value="Some college but no degree">Some college but no degree</option>
        <option value="Associates Degree">Associates Degree</option>
        <option value="Elementary Graduate">Elementary Graduate</option>
        <option value="Secondary Graduate">Secondary Graduate</option>
        <option value="College Graduate">College Graduate</option>
        <option value="Master's Degree">Master's Degree</option>
        <option value="Professional Degree">Professional Degree</option>
        <option value="Doctorate Degree">Doctorate Degree</option>
        </select></td>  
</tr>

<script>
            function isNumberKey(evt)
            {
                var charCode = (evt.which) ? evt.which : event.keyCode
                if (charCode > 31 && (charCode < 48 || charCode > 57))
                        return false;
                    return true;
            }

</script>

Here is the image of how I wanted it.

The problem is that, everytime I click the "+" button the form submits and refreshes with codeigniter, I have tried this without CodeIgniter and It works fine.

How can I make this work without making the page refresh?

There seems many problems, 1) Where is #sibTable in HTML ? 2) Your deleteRow function is only removing rows from front, its not removing it from DB, if it was saved before in DB. — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Oct 2, 2017 at 7:37

Naim Malek · Accepted Answer · 2017-10-02 07:36:39Z

2

Change button type from 'submit' to 'button'

<button class="btn btn-success" type="button" name="add_item"  onClick="addMoreSib();" style="display:none" id="addSibling"><li class="fa fa-plus"></li></button> 

<button class="btn btn-danger" type="button" name="del_item" onClick="deleteRow();" style="display:none" id="deleteSibling"><li class="fa fa-minus"></li></button>

answered Oct 2, 2017 at 7:36

Naim Malek

1,1841 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

geek_10101010 Over a year ago

Thanks , however my sib_input.php file can't be found. where am I suppose to place it? Am I suppose to load it in the controller?

Naim Malek Over a year ago

You have to give relative path. You can accept my answer if it's working.

Collectives™ on Stack Overflow

CodeIgniter 3: Insert/delete html table row on button click with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related