domin0101 domin0101 - 3 years ago 197
jQuery Question

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

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?

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download