First off, I'm sorry for my poor English.
I'm making information system for school and have a problem when I update data for student. There are siblings fields on student form. They can add one or more siblings (one to many relationship). The program has been successfully to adding siblings into databases (there are two databases, student (id [auto increment - primary key], student_id name, sex, age, ..., etc) and siblings (id (primary key), student_id, siblings_name, siblings_age, ..., etc).
But, the program has been failed when I update siblings data.
ADD SIBLINGS
php:
<table id='siblingsTable'>
<a href='javascript:void(0);' onclick='addRow()'><img src='../images/add.png'/></a>
<a href='javascript:void(0);' onclick='deleteRow()'><img src='../images/delete.png'/></a><br />
<th>Name</th>
<th>Age</th>
<th></th>
</table>
js:
<script>
function addRow() {
var table = document.getElementById("siblingsTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "siblings_name[]";
element1.value = "";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "siblings_age[]";
element2.value = "";
cell2.appendChild(element2);
}
function deleteRow() {
var table = document.getElementById("siblingsTable");
var rowCount = table.rows.length;
table.deleteRow(rowCount -1);
}
</script>
saving to database:
if (!empty($_POST['siblings_name']) && !empty($_POST['siblings_age']) && is_array($_POST['siblings_name']) && is_array($_POST['siblings_age']) && count($_POST['siblings_name']) === count($_POST['siblings_age'])) {
$auth_array = $_POST['auth_key'];
$name_array = $_POST['siblings_name'];
$age_array = $_POST['siblings_age'];
for ($i = 0; $i < count($name_array); $i++) {
$auth = mysql_real_escape_string($auth_array);
$name = mysql_real_escape_string($name_array[$i]);
$age = mysql_real_escape_string($age_array[$i]);
mysql_query("INSERT INTO skkk_web_siblings (auth_key, siblings_name, siblings_age) VALUES ('$auth', '$name', '$age')");
}
}
This is my problem when i want to updating data:
$sib = mysql_query("SELECT COUNT(auth_key) FROM skkk_web_siblings WHERE auth_key = '$_GET[id]'");
$totalsiblings = mysql_result($sib,0);
...
$siblings = mysql_query("SELECT * FROM skkk_web_siblings WHERE auth_key = '$_GET[id]'");
while($row = mysql_fetch_array($siblings)){
$id = $row['id'];
$name = $row['siblings_name'];
$age = $row['siblings_age'];
$siblingsname[] = $name;
$siblingsage[] = $age;
}
...
...
...
<table id='siblingsTable'>
<a href='javascript:void(0);' onclick='editRow()'><img src='../images/edit.png'/></a><br />
<th>Name</th>
<th>Age</th>
</table>
...
<script>
function editRow() {
var table = document.getElementById("siblingsTable");
var total = '<?php echo $totalsiblings; ?>';
var name = jQuery.parseJSON('<?php echo json_encode($siblingsname); ?>');
var age = jQuery.parseJSON('<?php echo json_encode($siblingsage); ?>');
var i;
var table = '';
for (i = 0; i < total; i++) {
tbl += '<input type="text" name="siblings_name[]" value="' + name[i] + '"/>';
tbl += '<input type="text" name="siblings_age[]" value="' + age[i] + '"/>';
}
document.getElementById("siblingsTable").innerHTML = table;
}
</script>
...
//updating to database
if (!empty($_POST['siblings_name']) && !empty($_POST['siblings_age']) && is_array($_POST['siblings_name']) && is_array($_POST['siblings_age']) && count($_POST['siblings_name']) === count($_POST['siblings_age'])) {
$name_array = $_POST['siblings_name'];
$age_array = $_POST['siblings_age'];
for ($i = 0; $i < count($name_array); $i++) {
$name = mysql_real_escape_string($name_array[$i]);
$age = mysql_real_escape_string($age_array[$i]);
mysql_query("UPDATE skkk_web_siblings SET siblings_name = '$name', siblings_age = '$age' WHERE auth_key = '$_POST[id]'");
}
}
When I update one name, it changes all siblings name. What should I do?
Thanks for your help.
Related
I have an infinite select2 by using button to show select2 but it doesn't work, is there something wrong with my script?
this is the script to add unlimited select2 with onclick button :
<div id="cont"></div>
<button id="addRow" onclick="addRow();"> Add Rows</button>
This is a function to call select2
<script type="text/javascript">
var arrHead = new Array();
arrHead = ['AKUN', 'DEBIT', 'CREDIT','#'];
function createTable() {
var empTable = document.createElement('div');
empTable.setAttribute('class', 'ed-tab');
empTable.innerHTML = `
<table id="empTable" class="table table-borderedless table-striped w-100">
<thead>
<tr>
<th width="50%">AKUN</th>
<th width="22%">DEBIT</th>
<th width="22%">CREDIT</th>
<th width="6%" class="text-center">#</th>
<tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
`;
var div = document.getElementById('cont');
div.appendChild(empTable);
}
function addRow() {
var empTab = document.getElementById('empTable');
var rowCnt = empTab.rows.length;
var tr = empTab.insertRow(rowCnt);
for (var c = 0; c < arrHead.length; c++) {
var td = document.createElement('td');
td = tr.insertCell(c);
if (c == 0) {
var select = document.createElement("select");
select.setAttribute('type', 'text');
select.setAttribute('class', 'form-control select_ids');
select.innerHTML = `
<select class="form-control form-search" placeholder="tes" type="text" >
<option></option>
<?php
$kodeakun_q = $db->query("SELECT * FROM tb_akun WHERE parent_akun >= 0");
if ($kodeakun_q->num_rows > 0) {
while($row = $kodeakun_q->fetch_assoc()){
?>
<option id="func/f_insert.php?select_id=<?= $row['kode_akun'] ?>" value="<?= $row['kode_akun'] ?>">
<?= $row['kode_akun']; ?> | <?= $row['nama_akun'] ?>
</option>
<?php } } ?>
</select>
`;
td.appendChild(select);
}else if( c == 1){
var ele = document.createElement('input');
ele.setAttribute('type', 'text');
ele.setAttribute('class', 'form-control');
ele.setAttribute('value', '');
td.appendChild(ele);
}else if (c == 2) {
var ele = document.createElement('input');
ele.setAttribute('type', 'text');
ele.setAttribute('class', 'form-control');
ele.setAttribute('value', '');
td.appendChild(ele);
}else if(c == 3){
var button = document.createElement("button");
button.setAttribute('class', 'btn btn-danger');
button.setAttribute('onclick', 'removeRow(this)');
button.innerHTML = `<i class="fas fa-trash"></i>`;
td.appendChild(button);
}
}
}
function removeRow(oButton) {
var empTab = document.getElementById('empTable');
empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);
}
function submit() {
var myTab = document.getElementById('empTable');
var arrValues = new Array();
for (row = 1; row < myTab.rows.length - 0; row++) {
for (c = 0; c < myTab.rows[row].cells.length; c++) {
var element = myTab.rows.item(row).cells[c];
if (element.childNodes[0].getAttribute('type') == 'text') {
arrValues.push("'" + element.childNodes[0].value + "'");
}
}
}
console.log(arrValues);
}
</script>
this is the main script for the select2 :
<script>
$(document).ready(function(){
$(".select_ids").selectize({
placeholder: "Pilih Akun . . .",
allowClear: true,
});
});
</script>
Note :
I have added a function in onclick button to call the select2, but it only works in the first select2 and when I add select2 it doesn't work properly.
you just need bind element select after added to table
for (var c = 0; c < arrHead.length; c++) {
.
..
...
}
// bind element
$('.select_ids').select2()
Demo jsfiddle : https://jsfiddle.net/4uja63fh/
I Create a Table Using this code,
<table class="table table-green table-hover" id="tblk"></table>
And I Use This JavaScrip Function (For A Button) to add Rows when I add data in to table,
function addRow() {
var custid = document.getElementById('InputCusomerID').value
var custname = document.getElementById('InputCusomerName').value
var itemid = document.getElementById('InputItemID').value
var table = document.getElementById('tblk')
var row = table.insertRow(0)
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1)
var cell3 = row.insertCell(2)
cell1.innerHTML = custid
cell2.innerHTML = custname
cell3.innerHTML = itemid
}
When I clicked a table row, I need to get a table Row value into my input text field
This Is my JavaScrip Function to get table rows to value into my text field..,
var table = document.getElementById('tblk'),
rIndex
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function () {
document.getElementById('InputCusomerID').value = this.cells[0].innerHTML
document.getElementById('InputCusomerName').value = this.cells[1].innerHTML
document.getElementById('InputItemID').value = this.cells[2].innerHTML
}
}
But My Code Is Not Working I Can't Get Table Row Value Into My Text Field.
Can You Help Me With That Problem..?
Thank You Very Much..!
function addRow() {
var custid = document.getElementById('InputCusomerID').value
var custname = document.getElementById('InputCusomerName').value
var itemid = document.getElementById('InputItemID').value
var table = document.getElementById('tblk')
var row = table.insertRow(0)
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1)
var cell3 = row.insertCell(2)
cell1.innerHTML = custid
cell2.innerHTML = custname
cell3.innerHTML = itemid
}
var table = document.getElementById('tblk'),
rIndex
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
document.getElementById('InputCusomerID').value = this.cells[0].innerHTML
document.getElementById('InputCusomerName').value = this.cells[1].innerHTML
document.getElementById('InputItemID').value = this.cells[2].innerHTML
}
}
<table class="table table-green table-hover" id="tblk"></table>
I don't know exactly what you're trying to do, but it's not working because your click listener is being called before your table is populated. See my code.
function addRow() {
var custid = document.getElementById('InputCusomerID').value
var custname = document.getElementById('InputCusomerName').value
var itemid = document.getElementById('InputItemID').value
var table = document.getElementById('tblk')
var row = table.insertRow(0)
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1)
var cell3 = row.insertCell(2)
cell1.innerHTML = custid
cell2.innerHTML = custname
cell3.innerHTML = itemid
setListeners();
}
var table = document.getElementById('tblk'),
rIndex;
function setListeners() {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].addEventListener('click', function (e) {
console.log(e.target);
document.getElementById('InputCusomerID').value = "result: " + this.cells[0].innerHTML
document.getElementById('InputCusomerName').value = "result: " + this.cells[1].innerHTML
document.getElementById('InputItemID').value = "result: " + this.cells[2].innerHTML
});
}
}
addRow();
<input type="text" id="InputCusomerID" value="a" />
<input type="text" id="InputCusomerName" value="b" />
<input type="text" id="InputItemID" value="c" />
<table class="table table-green table-hover" id="tblk"></table>
I have Vue component with a table with users data:
<table class="worker-table" id="worker-table">
<tr>
<th><b>Phone number</b></th>
<th><b>Debet card</b></th>
<th><b>Money</b></th>
<th><b>Work hours</b></th>
<th><b>Responsible</b></th>
<th><b>Delete</b></th>
</tr>
<tr>
<tr v-for="worker in workers">
<td >
<div v-if="worker.parent == 1">
<strong v-on:click="toggleChildWorkers(worker)" class="pointer">
{{worker.phone}}(+{{child_workers[worker.id].length}})
</strong>
</div>
<div v-else>
{{worker.phone}}
</div>
</td>
<td>{{worker.debit_card}}</td>
<td>{{worker.money}}</td>
<td>{{worker.work_hours}}</td>
<td>{{worker.responsible_for_money}}</td>
<td>
<a href="#"
v-bind:disabled="(application.state > CLOSED_ST)? true: false"
class="btn btn-xs btn-danger"
v-on:click="deleteEntry(worker.id)"
>
Delete
</a>
</td>
</tr>
</table>
The button in the last <td> successfully deletes worker from the table.
Function toggleChildWorkers insert new rows with child workers and delete (hide, actually) them like this:
toggleChildWorkers(parentWorker)
{
var table = document.getElementById("worker-table");
var childWorkers = this.child_workers[parentWorker.id];
var childWorkersCount = childWorkers.length;
var parentWorkersIndexes = this.openAccordionsIndexes;
var dI = 0;
var userWantsCloseThisAccordion = false;
var indexOfClosingAcc = -1;
console.log(parentWorker);
for (var j = 0; j < parentWorkersIndexes.length; j++)
{
if (parentWorkersIndexes[j] < parentWorker.index)
{
dI += this.openAccordionsStrCount[j];
}
else if (parentWorkersIndexes[j] == parentWorker.index)
{
userWantsCloseThisAccordion = true;
indexOfClosingAcc = j;
}
}
if (userWantsCloseThisAccordion)
{
for (var i = 0; i < this.openAccordionsStrCount[indexOfClosingAcc]; i++)
{
table.deleteRow(parentWorker.index + 3 + dI);
}
this.openAccordionsIndexes.splice(indexOfClosingAcc, 1);
this.openAccordionsStrCount.splice(indexOfClosingAcc, 1);
return;
}
this.openAccordionsIndexes.push(parentWorker.index);
this.openAccordionsStrCount.push(childWorkersCount);
for (var i = 0; i < childWorkersCount; i++)
{
var row = table.insertRow(parentWorker.index + 3 + dI + i);
var cell1 = row.insertCell(0);
cell1.style.cssText = this.styleOfOpenAccStrings;
var cell2 = row.insertCell(1);
cell2.style.cssText = this.styleOfOpenAccStrings;
var cell3 = row.insertCell(2);
cell3.style.cssText = this.styleOfOpenAccStrings;
var cell4 = row.insertCell(3);
cell4.style.cssText = this.styleOfOpenAccStrings;
var cell5 = row.insertCell(4);
cell5.style.cssText = this.styleOfOpenAccStrings;
var cell6 = row.insertCell(5);
cell6.style.cssText = this.styleOfOpenAccStrings;
cell1.innerHTML = (childWorkers[i].phone === undefined) ?
'' : childWorkers[i].phone;
cell2.innerHTML = (childWorkers[i].debit_card === undefined) ?
'' : childWorkers[i].debit_card;
cell3.innerHTML = (childWorkers[i].money === undefined) ?
'' : childWorkers[i].money;
cell4.innerHTML = (childWorkers[i].work_hours === undefined) ?
'' : childWorkers[i].work_hours;
cell5.innerHTML = childWorkers[i].responsible_for_money;
cell6.innerHTML = "<a href=\"#\"\n" +
" v-bind:disabled=\"(application.state > CLOSED_ST)? true: false\"\n" +
" class=\"btn btn-xs btn-danger\"\n" +
" v-on:click=\"deleteEntry(props.row.index)\"\n" +
" >";
row.className = "openAccordionRow";
}
},
As you can see, I'm trying to embed buttons in the new cells of inserted rows (blue ones). But they are not displayed as it was intended and don't work at all.
How can I embed button with Vue code into new cell of inserted row?
I found a simple solution here. But I did't understand it at the beginning and use it without closure and it did't work as I expected. Then I found topic about Javascript infamous loop issue
and used the closure magic:
for (var i = 0; i < childWorkersCount; i++)
{
/* ...
...
...
*/
var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn btn-xs btn-danger";
btn.value = "Delete " + childWorkers[i].phone;
var app = this;
var parentId = parentWorker.id;
btn.onclick = function (worker) {
return function () {
app.deleteEntryById(worker.id, parentId);
};
}(childWorkers[i]);
}
I created an HTML array with some tr lines which need to be hidden by default and when user check the checkbox, the element is showed.
I have a Javascript function to show html element when checkbox is checked. It works but not when I use a loop.
I need that checkbox1 works on tr1, checkbox2 on tr2 ...
The PHP code which creates elements
<?php
if (isset($_SESSION['wordsListArray']))
{
$length = count($_SESSION['wordsListArray']);
for ($i = 0; $i < $length; $i++)
{
echo '<tr><td>' . htmlspecialchars($_SESSION['wordsListArray'][$i]) . '</td><td>' . htmlspecialchars($_SESSION['translationsListArray'][$i]) . '</td><td><input type="checkbox" id="checkboxId' . ($i+1) . '"/></td></tr>';
echo '<tr class="trHide" id="trHide' . ($i+1) . '"><td><input type="text" placeholder=' . $_SESSION['personel_language_array'][0] . '></td><td><input type="text" name="other" placeholder=' . $_SESSION['personel_language_array'][1] . '></td><td><button type="submit">Edit</button><button type="submit">Erase</button></td></tr>';
}
}
?>
This Javascript works but only on one element (getElementById is unique), but I need a loop to use different Id (trHide1, trHide2 ...)
var tr = document.getElementById("trHide1");
var check = document.getElementById("checkboxId1");
check.onchange = function() {
if(check.checked)
{
tr.style.display = 'contents';
}
else
{
tr.style.display = 'none';
}
};
I try this loop but it doesn't work.
for (var i = 1; i <= lengthWordList; i++)
{
var trId = 'trHide' + i;
var checkId = 'checkboxId' + i;
var tr = document.getElementById(trId);
var check = document.getElementById(checkId);
check.onchange = function() {
if(check.checked)
{
tr.style.display = 'contents';
}
else
{
tr.style.display = 'none';
}
};
}
Your code does not work because it overwrites the event and the selector
This could be worth it
var elemento=[];
for (var i = 1; i <= 2; i++)
{
var trId = 'trHide' + i;
var checkId = 'checkboxId' + i;
console.log(trId);
elemento.push(
{
tr:document.getElementById(trId),
check:document.getElementById(checkId),
event:function(){}
}
);
console.log(elemento[(i-1)]);
elemento[(i-1)].check.setAttribute('elemento',(i-1));
elemento[(i-1)].event = elemento[(i-1)].check.onchange = function() {
var valor = this.getAttribute('elemento');
if(elemento[valor].check.checked)
{
elemento[valor].tr.style.display = 'contents';
}
else
{
elemento[valor].tr.style.display = 'none';
}
};
}
var elemento=[];
for (var i = 1; i <= 2; i++)
{
var trId = 'trHide' + i;
var checkId = 'checkboxId' + i;
console.log(trId);
elemento.push(
{
tr:document.getElementById(trId),
check:document.getElementById(checkId),
event:function(){}
}
);
console.log(elemento[(i-1)]);
elemento[(i-1)].check.setAttribute('elemento',(i-1));
elemento[(i-1)].event = elemento[(i-1)].check.onchange = function() {
var valor = this.getAttribute('elemento');
if(elemento[valor].check.checked)
{
elemento[valor].tr.style.display = 'contents';
}
else
{
elemento[valor].tr.style.display = 'none';
}
};
}
<table>
<tr id="trHide1" style="display:none"><td>AAAA</td></tr>
<tr id="trHide2" style="display:none"><td>BBBB</td></tr>
</table>
<input type="checkbox" id="checkboxId1">
<input type="checkbox" id="checkboxId2">
I have this form with a table inside, I dynamically add rows with input fields to the table, but the problem is that when I submit the form i get an error saying undefined index.
Here's the code:
HTML
`
<div class="row">
<div class="col-md-12">
<table id="myTable">
<th>
ID number
</th>
<th>
Lastname
</th>
<th>
Firstname
</th>
<th>
M.I.
</th>
<th>Course
</th>
<th>
Address
</th>
<th>
Contact number
</th>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default btn-sm" data-dismiss="modal" value="Cancel"/>
<input type="submit" class="btn btn-primary btn-sm" id="btn_add_adv" name="btn_add_mul" value="Save"/>
</div>
</form>
`
JAVASCRIPT creates the rows
function insertRow()
{
var table = document.getElementById('myTable');
var len = table.rows.length;
var row = table.insertRow(len);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var el1 = document.createElement("input");
el1.type = "text";
el1.name = "idnum[]";
el1.size = "8";
cell1.appendChild(el1);
var el2 = document.createElement("input");
el2.type = "text";
el2.name = "lname[]";
cell2.appendChild(el2);
var el3 = document.createElement("input");
el3.type = "text";
el3.name = "fname[]";
cell3.appendChild(el3);
var el4 = document.createElement("input");
el4.type = "text";
el4.name = "mname[]";
el4.size = "1";
cell4.appendChild(el4);
var el5 = document.createElement("input");
el5.type = "text";
el5.name = "course[]";
el5.size = "5";
cell5.appendChild(el5);
var el6 = document.createElement("input");
el6.type = "text";
el6.name = "add[]";
cell6.appendChild(el6);
var el7 = document.createElement("input");
el7.type = "text";
el7.name = "contact[]";
el7.size = "12";
cell7.appendChild(el7);
}
PHP collects the values from the created input fields
<?php
if(isset($_POST['btn_add_mul'])){
$id = $_POST['idnum'];
$lastname = $_POST['lname'];
$firstname = $_POST['fname'];
$midname = $_POST['mname'];
$course = $_POST['course'];
$address = $_POST['add'];
$contact = $_POST['contact'];
for($i = 0, $count = count($id); $i < $count; $i++ )
{
$id_num = $id[$i];
$lname = $lastname[$i];
$fname = $firstname[$i];
$mname = $midname[$i];
$cou = $course[$i];
$add = $address[$i];
$con = $contact[$i];
mysql_query("insert into tblstudent(id,lname,fname,mname,contact,address,course)Values('$id','$lname','$fname','$mname','$con','$add','$course')") or die(mysql_error());
}
}
?>
Is there something wrong with how i created the rows?
function insertRow()
{
var table = document.getElementById('myTable');
var len = table.rows.length;
var row = table.insertRow(len);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var el1 = document.createElement("input");
el1.type = "text";
el1.name = "idnum[]";
el1.size = "8";
cell1.appendChild(el1);
var el2 = document.createElement("input");
el2.type = "text";
el2.name = "lname[]";
cell2.appendChild(el2);
var el3 = document.createElement("input");
el3.type = "text";
el3.name = "fname[]";
cell3.appendChild(el3);
var el4 = document.createElement("input");
el4.type = "text";
el4.name = "mname[]";
el4.size = "1";
cell4.appendChild(el4);
var el5 = document.createElement("input");
el5.type = "text";
el5.name = "course[]";
el5.size = "5";
cell5.appendChild(el5);
var el6 = document.createElement("input");
el6.type = "text";
el6.name = "add[]";
cell6.appendChild(el6);
var el7 = document.createElement("input");
el7.type = "text";
el7.name = "contact[]";
el7.size = "12";
cell7.appendChild(el7);
}
insertRow()
<form method="post">
<div class="row">
<div class="col-md-12">
<table id="myTable">
<th>
ID number
</th>
<th>
Lastname
</th>
<th>
Firstname
</th>
<th>
M.I.
</th>
<th>Course
</th>
<th>
Address
</th>
<th>
Contact number
</th>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default btn-sm" data-dismiss="modal" value="Cancel"/>
<input type="submit" class="btn btn-primary btn-sm" id="btn_add_adv" name="btn_add_mul" value="Save"/>
</div>
</form>
<?php if (isset($_POST['btn_add_mul'])) {
$id = $_POST['idnum'];
$lastname = $_POST['lname'];
$firstname = $_POST['fname'];
$midname = $_POST['mname'];
$course = $_POST['course'];
$address = $_POST['add'];
$contact = $_POST['contact'];
for ($i = 0, $count = count($id); $i < $count; $i++) {
$id_num = $id[$i];
$lname = $lastname[$i];
$fname = $firstname[$i];
$mname = $midname[$i];
$cou = $course[$i];
$add = $address[$i];
$con = $contact[$i];
mysql_query("insert into tblstudent(id,lname,fname,mname,contact,address,course)Values('$id','$lname','$fname','$mname','$con','$add','$course')") or die(mysql_error());
}
}?>
First open form tag and set its method to post and you will see data is posting in below format and you need to insert json_encode data in db not direct array it will throw an error.
Array
(
[idnum] => Array
(
[0] => sada
)
[lname] => Array
(
[0] => sad
)
[fname] => Array
(
[0] => Zsdad
)
[mname] => Array
(
[0] => sdsad
)
[course] => Array
(
[0] => sd
)
[add] => Array
(
[0] => asda
)
[contact] => Array
(
[0] => ada
)
[btn_add_mul] => Save
)