Welcome to WebmasterWorld Guest from 35.171.45.91

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:

<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

}
?>
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
posts:2710
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?

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
6:01 am on May 3, 2016 (gmt 0)

New User from IN 

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


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

Administrator

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

joined:July 31, 2003
posts:12555
votes: 3


Welcome to WebmasterWorld, makaijohn9.

You have your form field spelled incorrectly, missing the "t":
name="disrict_name[]