add dynamically row

[tzechong]

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:

<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();

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

newEntry.find('input').val('');
controlForm.find('tr:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus gs"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('tr:first').remove();

e.preventDefault();
return false;
});
});

</script>

---

---

HTML code

<table class="table table-striped table-advance table-hover">
<tbody>
<tr>
<th><i class=""></i>No</td>
<th>Name</td>
<th>IC</th>
<th>Age</th>
<th>Relation</th>
<th>Job</th>
</tr>

<tr>
<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>
<td></td>
<td>
<button class="btn btn-success btn-add" type="button">
<i class="glyphicon glyphicon-plus gs"></i>
</button>
</td>

</tr>
</tbody>
</table>
<br><br>

<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>
</div>
</div>

---

---

my sql

<?php
if(isset($_POST['Save'])){

$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)
" );
}
}//if

}
?>

[londrum]

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

[tzechong]

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?

Javascript

<script type="text/javascript">
$(document).ready(function(){
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"/>
 </a>
 </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
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>

sql

<?php 
 $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++){

if(isset($_POST['submit'])){

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

}

}//for
?>

html

<html>
<body>
<form name="testing" action="" method="post">
<div class="field_wrapper">
<div>
 <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>
 </div>
</div>
<input type="submit" name="submit" value="SUBMIT"/>
</form>
</body>
</html>

error

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

this error will appear when i added more than 1 row

[makaijohn9]

Thanks for the response. Eagerly waiting to solve this query.

[coopster]

Welcome to WebmasterWorld, makaijohn9.

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

name="disrict_name[]