Welcome to WebmasterWorld Guest from

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

add dynamically row

7:53 am on May 1, 2016 (gmt 0)

New User

joined:May 1, 2016
posts: 2
votes: 0

hi everyone... i am working on form that can be added row dynamically. i am having a problem with inserting data into database. the data cannot inserted. anyone can help me. i am just a new in php. i am very appreciates your help. tq.

this is javascript:

$(document).on('click', '.btn-add', function(e)

var controlForm = $(this).closest('table'),
currentEntry = $(this).parents('tr:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);

controlForm.find('tr:not(:last) .btn-add')
.html('<span class="glyphicon glyphicon-minus gs"></span>');
}).on('click', '.btn-remove', function(e)

return false;


HTML code

<table class="table table-striped table-advance table-hover">
<th><i class=""></i>No</td>

<div class="form-group">
<label for="Address" class="col-lg-1 control-label">Dependent:</label></div>
<td><?php echo $i; ?></td>
<td><div class="float-left"><input type="text" name="name[]" class="form-control" /></div></td>
<td><div class="float-left"><input type="text" name="ic[]" class="form-control" /></div></td>
<td><div class="float-left"><input type="text" name="age[]" class="form-control" size="5"/></div></td>
<td><div class="float-left"><input type="text" name="relation[]" class="form-control" /></div></td>
<td><div class="float-left"><input type="text" name="job[]" class="form-control" /></div></td>
<button class="btn btn-success btn-add" type="button">
<i class="glyphicon glyphicon-plus gs"></i>


<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-danger" id="success" name="Save">Save</button>
<a href="ViewVictim.php"><button type="button" class="btn btn-danger">Back</button></a>

my sql


$mysqli = new mysqli("localhost", "admin", "admin", "cms");

$NameCount = Count($_POST['name']);

for ($i = 0; $i < $NameCount; $i++) {

$name = $_POST['name'][$i];
$age = $_POST['age'][$i];
$relation = $_POST['relation'][$i];
$job = $_POST['job'][$i];

$sql = $mysqli->query("INSERT INTO dependent (Name, No_Ic, Age, Relation, Job)
VALUES($name, $age, $relation, $job)
" );

11:12 am on May 1, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2006
votes: 116

This might just be me being a bit dim... but dont you need a <form> tag around it? With method=post? Maybe you just left that off your sample
12:27 pm on May 1, 2016 (gmt 0)

New User

joined:May 1, 2016
posts: 2
votes: 0

thanks for the response.. actually that html code has a form method.. i miss to copy that.. i been tried another testing code, the value successfully inserted to DB. but when i added more than 1 row , only column district_id value will inserted to DB and some error will appear. anyone can fix that error?


<script type="text/javascript">
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="district_id[]" value=""/>&nbsp
<input type="text" name="disrict_name[]" value=""/>
<a href="javascript:void(0);" class="remove_button" title="Remove field">
<img src="remove-icon.png"/>
</div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter


$mysqli = new mysqli("localhost", "admin", "admin", "cms");

$district_id = $_POST['district_id'];
$district_name = $_POST['district_name'];

$limit = count($district_id);

for ($i = 0; $i < $limit; $i++){


$sql = "INSERT INTO district_list (district_id, district_name)
VALUES ('".$district_id[$i]."','".$district_name[$i]."')";




<form name="testing" action="" method="post">
<div class="field_wrapper">
<input type="text" name="district_id[]" value="" placeholder="district id"/>
<input type="text" name="district_name[]" value="" placeholder="district name"/>
<a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/></a>
<input type="submit" name="submit" value="SUBMIT"/>


Notice: Undefined offset: 1 in C:\wamp\www\CMS\add\index.php

this error will appear when i added more than 1 row
6:01 am on May 3, 2016 (gmt 0)

New User from IN 

joined:May 3, 2016
votes: 0

Thanks for the response. Eagerly waiting to solve this query.
2:22 pm on May 25, 2016 (gmt 0)


WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 31, 2003
votes: 3

Welcome to WebmasterWorld, makaijohn9.

You have your form field spelled incorrectly, missing the "t":