adding dynamically added table row values into database
Question
hi i am working on a form which has a table whic adds rows on a button click but my problem is when i add a new row the counter value goes to 12 instead of getting 2 can anyone help me out here is my code
<?php
session_start();
if (!isset($_SESSION["username"])) {
header("Location: unauthorize_access.php");
}
require("includes/dbconnect.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Makhtab</title>
<link rel="stylesheet" type="text/css" href="form2/view.css" media="all">
<script type="text/javascript" src="form2/view.js"></script>
<script type="text/javascript" src="form2/calendar.js"></script>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
console.log( 'hi');
var x=document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
</script>
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('zimtable');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'zimname_' + i;
el.id = 'zimname_' + i;
el.size = 40;
el.maxlength = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'zimmob_' + i;
el2.id = 'zimmob_' + i;
el2.size = 13;
el2.maxlength = 13;
secondCell.appendChild(el2);
// alert(i);
i++;
makhtab.h.value=i;
alert(i);
}
</script>
<script language="javascript" type="text/javascript">
var i=1;
function addalRow()
{
var tbl = document.getElementById('alimtable');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'alimname_' + i;
el.id = 'alimname_' + i;
el.size = 40;
el.maxlength = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'alimmob_' + i;
el2.id = 'alimmob_' + i;
el2.size = 13;
el2.maxlength = 13;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var element4 = document.createElement("select");
element4.name ='qabil_'+i;
var option1 = document.createElement("option");
option1.value='MUFTI';
option1.innerHTML='MUFTI';
element4.appendChild(option1);
var option2 = document.createElement("option");
option2.value='AALIM';
option2.innerHTML='AALIM';
element4.appendChild(option2);
var option3 = document.createElement("option");
option3.value='QARI';
option3.innerHTML='QARI';
element4.appendChild(option3);
var option4 = document.createElement("option");
option4.value='HAFIZ';
option4.innerHTML='HAFIZ';
element4.appendChild(option3);
thirdCell.appendChild(element4);
// alert(i);
i++;
makhtab.r.value=i;
alert(i);
}
</script>
<!--<style type="text/css" title="currentStyle">
@import "tran/css/layout-styles.css";
@import "tran/css/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>-->
<script type="text/javascript" src="tran/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="tran/js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="tran/js/jq-ac-script.js"></script>
<script type="text/javascript">
// function checkForm()
// {
// if(makhtab.code.value == "") {
// alert("Error: Code cannot be Empty!");
// makhtab.code.focus();
// return false;
// }
// if(makhtab.name.value == "") {
// alert("Error: Name cannot be Empty!");
// makhtab.name.focus();
// return false;
//}
//if(makhtab.cmbcount.value == "") {
// alert("Error: Country cannot be Empty!");
//makhtab.cmbcount.focus();
// return false;
// }
//if(makhtab.cmbstate.value == "") {
// alert("Error: State cannot be Empty!");
//makhtab.cmbstate.focus();
// return false;
// }
/* if(makhtab.cmbteh.value == "") {
alert("Error: Tehsil cannot be Empty!");
makhtab.cmbteh.focus();
return false;
}
if(makhtab.cmbcity.value == "") {
alert("Error: City cannot be Empty!");
makhtab.cmbcity.focus();
return false;
}
if(makhtab.tel.value == "") {
alert("Error: Telephone cannot be Empty!");
makhtab.tel.focus();
return false;
}
if(makhtab.mob.value == "") {
alert("Error: Mobile cannot be Empty!");
makhtab.mob.focus();
return false;
}
if(makhtab.stu.value == "") {
alert("Error: Students cannot be Empty!");
makhtab.stu.focus();
return false;
}
}*/
</script>
<SCRIPT type="text/javascript">
<!--
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
$(document).ready(function(){
$("#code").change(function() {
var code = $("#code").val();
if(code.length >= 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "check_ct.php",
data: "code="+ code,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#code").removeClass('object_error'); // if necessary
$("#code").addClass("object_ok");
$(this).html(' <img src="tick.gif" align="absmiddle">');
}
else
{
$("#code").removeClass('object_ok'); // if necessary
$("#code").addClass("object_error");
$(this).html(msg);
}
});
}
});
}
else
{
$("#status").html('<font color="red">The code should have at least <strong>4</strong> characters.</font>');
$("#code").removeClass('object_ok'); // if necessary
$("#code").addClass("object_error");
}
});
});
//-->
</SCRIPT>
</head>
<body id="main_body" >
<div id="form_container">
<form id="makhtab" class="appnitro" enctype="multipart/form-data" method="post" onsubmit="return checkForm()" action="submit2.php">
<div class="form_description">
<br />
<h2>Makhtab Details</h2>
<!--<p>This is your form description. Click here to edit.</p>-->
</div>
<table border="0px" width="100%">
<tr>
<td><label class="description" for="element_1">Code</label></td><td><input id="element_1" id="code" name="code" class="element text small" type="text" maxlength="6" value=""/></td>
</tr>
<tr>
<td><label class="description" for="element_1">Name</label></td><td><input id="element_1" name="name" class="element text large" type="text" maxlength="40" value=""/> </td>
</tr>
<tr>
<td><label class="description" for="element_1">Address</label></td><td><input id="element_4_1" name="add1" class="element text large" value="" type="text"></td>
</tr>
<tr>
<td></td><td><input id="element_4_1" name="add2" class="element text large" value="" type="text"></td>
</tr>
<tr>
<td></td><td><input id="element_4_1" name="add3" class="element text large" value="" type="text"></td>
</tr>
<tr>
<td><label class="description" for="element_1">City</label></td><td><select name="cmbcity" class="element text medium" style="font-size:18px;"/>
<option value=""></option>
<?php
$result = mysql_query("SELECT code, `name` from city ") or die(mysql_error());
while ($year = mysql_fetch_array($result)) {
echo "<option value='$year[code]'>$year[name]</option>";
}
?>
</select>
</tr>
<tr>
<td><label class="description" for="element_1">State</label></td><td><select name="cmbstate" class="element text medium" style="font-size:18px;"/>
<option value=""></option>
<?php
$result = mysql_query("SELECT code, `name` from state ") or die(mysql_error());
while ($year = mysql_fetch_array($result)) {
echo "<option value='$year[code]'>$year[name]</option>";
}
?>
</select>
</tr>
</tr>
<tr>
<td><label class="description" for="element_1">Country</label></td><td><select name="cmbcount" class="element text medium" style="font-size:18px;"/>
<option value=""></option>
<?php
$result = mysql_query("SELECT code, `name` from country ") or die(mysql_error());
while ($year = mysql_fetch_array($result)) {
echo "<option value='$year[code]'>$year[name]</option>";
}
?>
</select>
<tr>
<td><label class="description" for="element_1">Telephone</label></td><td><input id="element_1" name="tel" class="element text medium" type="text" maxlength="255" value=""/></td>
</tr>
<tr>
<td><label class="description" for="element_1">Mobile</label></td><td><input id="element_1" name="mob" class="element text medium" type="text" maxlength="10" value=""/></td>
</tr>
<tr>
<br />
</tr>
</table>
<tr>
<br /><p style="border-bottom: 1px dotted #ccc;"></p><br />
<div class="form_description">
<h2>Zimmedar Details</h2>
</div>
</tr>
<table border="1px" id="zimtable" border="0px" size="100px" cellspacing="0" cellpadding="2">
<tr>
<td><strong>Zimmedar Name</strong></td>
<td><strong>Mobile</strong> </td>
</tr>
<tr>
<td><input name="zimname_0" type="text" id="zimname_0" size="40" maxlength="20" /></td>
<td><input name="zimmob_0" type="text" id="zimmob_0" size="13" maxlength="20" /></td>
</tr>
</table>
<input type="button" value="Add" onclick="addRow();" /><input name="h" type="hidden" id="h" value="1" />
<tr>
<br /><p style="border-bottom: 1px dotted #ccc;"></p><br />
<div class="form_description">
<h2>Muallim Details</h2>
<!--<p>This is your form description. Click here to edit.</p>-->
</div>
</tr>
<table border="1px" id="alimtable" border="0px" size="100px" cellspacing="0" cellpadding="2">
<tr>
<td><strong>Muallim Name</strong></td>
<td><strong>Mobile</strong> </td>
<td><strong>Qabiliyat</strong> </td>
</tr>
<tr>
<td><input name="alimname_0" type="text" id="alimname_0" size="40" maxlength="20" /></td>
<td><input name="alimmob_0" type="text" id="alimmob_0" size="13" maxlength="20" /></td>
<td><select id="qabil_0" name="qabil_0" class="element text large" style="font-size:14px;"/>
<option value="MUFTI">MUFTI</option>
<option value="AALIM">AALIM</option>
<option value="QARI">QARI</option>
<option value="HAFIZ">HAFIZ</option>
</select></td>
</tr>
<input name="r" type="hidden" id="r" value="1" />
</table>
<input type="button" value="Add" onclick="addalRow();" />
<br /><p style="border-bottom: 1px dotted #ccc;"></p><br />
<table border="0px" width="85%">
<tbody><tr>
<td width="105"><label class="description">No. of Students</label></td>
<td width="65"><input type="text" name=stu" size="5" maxlength="5"></input></td>
<td width="105"><label class="description">No. of Batches</label></td><td width="14"><input type="text" name="batch" size="5" maxlength="3"></input></td>
</tr>
<tr>
<input type="submit" name="submit" value="Save"></input>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
1 answers
solution1
1 2013-01-28 08:47:11
It seems that your problem is that you don't cast your strings as int. + can mean either concatenation or addition, depending on the types of the 2 variables it's used on.
For example:
var x = '1';
var y = 2;
alert(x+y); // 12, since x is a string and y is automatically cast to string.
alert(parseInt(x)+parseInt(y)) = 3; // since we cast both x and y to int.
PS: If you really need help, and for anyone here to read your code, copy the important bits, not the whole file.
PS2: You should start using jQuery - it can save you a lot of time
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Adding onclick function on a dynamically added table row
Adding a row to a table dynamically
how to retain dynamically added table rows and update the values in the database
How to enter the dynamically added row contents to a database
Fetch value from database into dynamically added row
Adding up Values of a row in mysql database in a dynamic table
How to get the values of dynamically added rows into database?
How to store values of dynamically added rows in database
How To Pass Dynamically Added Table Rows Form Values to Javascript Using Post to Send Database
Adding a row to a table dynamically using jQuery
Related Tags