hi i am working on a php form which has to add a table row dynamically when add button is pressed and i am using for loop to save the values the problem is that it is not saving the data into my database and gives the error that the loop values of my textbox is undefined
can anyone help me
here is my script
<?php
session_start();
?>
<!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">
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
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 = 'name' + i;
el.id = 'name' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'address' + i;
el2.id = 'address' + i;
el2.size = 20;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'contactNum' + i;
el3.id = 'contactNum' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);
alert(i);
i++;
frm.h.value=i;
alert(i);
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>
<body>
<form action="submit.php" method="post" name="frm" id="frm">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">
<tr>
<td><strong>Name</strong></td>
<td><strong>Address</strong> </td>
<td><strong>Contact Num</strong> </td>
</tr>
<tr>
<td><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td><input name="address" type="text" id="address" size="20" maxlength="20" /></td>
<td><input name="contactNum" type="text" id="contactNum" size="20" maxlength="12" /></td>
</tr>
</table>
<input type="button" value="Add" onclick="addRow();" />
<input name="Submit" type="submit" value="Submit" />
<label>
<input name="h" type="hidden" id="h" value="0" />
</label>
</form>
</body>
</html>
hereis my submit.php code
<?php
mysql_connect("localhost", "root", '')or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$num = $_POST['h'];
for($i=0;$i<=$num;$i++)
{
$name = $_POST["name_$i"];
$address = $_POST["address_$i"];
$contactNum = $_POST["contactNum_$i"];
mysql_query("INSERT INTO `com`(`name`, `add`, contact) Values('$name', '$address', '$contactNum')") or die(mysql_error());
}
echo "<h1>Done!</h1>";
?>
It appears that you are incrementing "i" one too many times.
i++;
frm.h.value=i;
should be
frm.h.value=i;
i++
or you could adjust the for loop:
for($i=0; $i < $num; $i++)
Below code will solve your problem and insert data in database.
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
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 = 'name_' + i;
el.id = 'name_' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'address_' + i;
el2.id = 'address_' + i;
el2.size = 20;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'contactNum_' + i;
el3.id = 'contactNum_' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);
// alert(i);
i++;
frm.h.value=i;
// alert(i);
}
</script>
In make change in according to below :
<tr>
<td><input name="name_0" type="text" id="name_0" size="20" maxlength="20" /></td>
<td><input name="address_0" type="text" id="address_0" size="20" maxlength="20" /></td>
<td><input name="contactNum_0" type="text" id="contactNum_0" size="20" maxlength="12" /></td>
</tr>
In submit.php made change like below.
for($i=0;$i<$num;$i++)
The values of the textbox is undefined - in PHP you are lookin for name_$i (with "_") and in javascript the names are without "_" (el.name = 'name' + i;)
Also pay attention that in your javascript your loop starting from 1 (- in your php). The first client side row is comming from HTML but there you didn't put any index (name="name" instead of name="name_0"). It's better even not to fill the table with any row and just call the function (with i=0) when the page is loaded.
Related
I am trying to use use a form and image uploader using google app scripts. I want to have the option to dynamically increase the number of images uploaded using a button, and then upload those to my drive. I am able to add more file inputs, but can't seem to get the files to upload if I have more than one image. I commented out the for loop, and am using only two images as an example. The if/else statement functions, but it does not upload the image. I am relatively new to programming and very new to google app scripts. Any help would be much appreciated. Thanks!
form.html:
<form id="myForm">
<p>Name</p>
<input type="text" name="PosterName">
<p>Email</p>
<input type="text" name="email">
<p>What are you selling/renting?</p>
<table>
<tr>
<td><input type="radio" name="sell" value="apt" id="apt"></td>
<td><label for="apt">Apartment</label></td>
</tr>
<tr>
<td><input type="radio" name="sell" value="furn" id="furn"></td>
<td><label for="furn">Furniture</label></td>
</tr>
<tr>
<td><input type="radio" name="sell" value="books" id="books"></td>
<td><label for="books">Books</label></td>
</tr>
<tr>
<td><input type="radio" name="sell" value="other" id="other"></td>
<td><label for="other">Other</label></td>
</tr>
</table>
<p>Give a description</p>
<textarea name="desc" rows="10" cols="50"></textarea>
<table id="submittable">
<tr>
<td><input type="file" name="myFile1"></td>
<td><button onclick="addmore();" id="D">Add More</button></td>
</tr>
</table>
<input type="submit" value="Upload File"
onclick="this.value='Uploading...';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
<input type="text" id="test" name="appt">;
</form>
<div id="output"></div>
<script>
function addmore() {
var tname = document.getElementById('submittable');
var row = tname.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var numrows = tname.rows.length;
cell1.id = "A";
cell2.id = "B";
var place1 = document.getElementById("A");
var place2 = document.getElementById("B");
var fle = document.createElement("input");
var add = document.createElement("button");
add.setAttribute("onclick", "addmore()");
var x = document.getElementById('test');
x.setAttribute("value", numrows);
fle.setAttribute("type", "file");
fle.setAttribute("name", "myFile" + numrows);
var y = fle.getAttribute("name");
add.innerHTML = y;
place1.appendChild(fle);
place2.appendChild(add);
cell1.id = "C";
cell2.id = "D";
var place3 = document.getElementById("D");
place3.parentNode.removeChild(place3);
}
</script>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
And
code.gs:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var dropbox = "shukimages";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var spreadsheet = DriveApp.getFilesByName(dropbox);
var ss = SpreadsheetApp.openById("1O4GM0DT5kqu5MNLcYFZe_vrI2KK1lmO9s5XviHWsMEg");
var sheet = ss.getSheets()[0];
sheet.appendRow([form.PosterName, form.email, form.sell, form.desc]);
//return "Files uploaded successfully";
var nums = form.appt;
if (nums < 1) {
var blob = form.myFile1;
var file = folder.createFile(blob);
return "File uploaded successfully";
} else {
return "Files uploaded successfully";
//for (i = 1; i <= nums; i++) {
var blob = form.myFile2;
var file = folder.createFile(blob);
//}
}
} catch (error) {
return error.toString();
}
}
EDIT:
A little more clarification; if I only attempt to upload one image, it works and the image is uploaded, but it will not upload more than one image.
Where I got createFile:
https://developers.google.com/apps-script/reference/drive/drive-app
I have a table where I can dynamically add rows. I want to get the data in each row to a php array when I submit the save button . Can please somebody help me on this. I'm new to java-script and know very little about it. Thank you!
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onClick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
<form action="" method="post">
<?php $i= 1; ?>
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" name="harsh"/> </TD>
</TR>
</TABLE>
<input name="saveNewSales" type="submit" value="Save" id="button2" style="text-align:center"/>
</form>
<?php
foreach($_POST as $name => $content) { // Most people refer to $key => $value
echo "The HTML name: $name <br>";
echo "The content of it: $content <br>";
}
?>
</BODY>
</HTML>
Your code is right, just little change over there
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" name="<?php echo $i; ?>"/> </TD>
</TR>
replace with this code
<TR>
<TD><INPUT type="checkbox" name="chkbox[]"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" name="txtbox[]"/> </TD>
</TR>
and your work finish
var rows=getElementsByTagName("tr");
var noOfRows=rows.length;
for(int i=0;i<noOfRows;i++){
var html=rows[i].innerhtml; /*a single row's inner html say (<td>apple</td><td>25</td>)*/
var td=html.match(/(?!<td>)([\s*\w*]*)[^<\/td>]/g);
/**
td[0] is 'apple', td[1] is '25'
**/
}
<!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>Calc</title>
<?php
$isop = 1;
$megp = 1;
$mexp = 1;
$morp = 1;
$nocp = 1;
$pyep = 1;
$trip = 1;
$zydp = 1;
?>
<script type="text/javascript" src="calceve.js"></script>
</head>
<body>
</body>
var iso = "<?php = $isop; ?>";
var meg = "<?php = $megp; ?>";
var mex = "<?php = $mexp; ?>";
var mor = "<?php = $morp; ?>";
var noc = "<?php = $nocp; ?>";
var pye = "<?php = $pyep; ?>";
var tri = "<?php = $trip; ?>";
var zyd = "<?php = $zydp; ?>";
The javascript wont grab the php variables. Im trying to make it so that I can use javascript to edit the php variable everyonce in a while as Eve online prices change, and have the javascript pull the php variables to use in the calculator.
FULL Code
<!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>Str8nge Brew Calculator</title>
<?php
$isop = 1;
$megp = 1;
$mexp = 1;
$morp = 1;
$nocp = 1;
$pyep = 1;
$trip = 1;
$zydp = 1;
?>
<script type="text/javascript" src="calceve.js"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12%"><p>Isogen</p></td>
<td width="24%"><input type="text" id="uiso" /></td>
<td width="14%" id="isoq"></td>
<td width="50%" id="isocash"></td>
</tr>
<tr>
<td><p>Megacyte</p></td>
<td><input type="text" id="umeg" /></td>
<td id="megq"></td>
<td id="megcash"></td>
</tr>
<tr>
<td><p>Mexallon</p></td>
<td><input type="text" id="umex" /></td>
<td id="mexq"></td>
<td id="mexcash"></td>
</tr>
<tr>
<td><p>Morphite</p></td>
<td><input type="text" id="umor" /></td>
<td id="morq"></td>
<td id="morcash"></td>
</tr>
<tr>
<td><p>Nocxium</p></td>
<td><input type="text" id="unoc" /></td>
<td id="nocq"></td>
<td id="noccash"></td>
</tr>
<tr>
<td><p>Pyerite</p></td>
<td><input type="text" id="upye" /></td>
<td id="pyeq"></td>
<td id="pyecash"></td>
</tr>
<tr>
<td><p>Tritanium</p></td>
<td><input type="text" id="utri" /></td>
<td id="triq"></td>
<td id="tricash"></td>
</tr>
<tr>
<td><p>Zydrine</p></td>
<td><input type="text" id="uzyd" /></td>
<td id="zydq"></td>
<td id="zydcash"></td>
</tr>
<tr>
<td>--------------</td>
<td>--------------</td>
<td>--------------</td>
<td></td>
</tr>
<tr>
<td width="12%"><p>Veldspar</p></td>
<td width="24%"><input type="text" id="uvel" /><input type="text" id="uvel5" placeholder="Concentrated" /><input type="text" id="uvel10" placeholder="Dense" /></td>
<td width="14%"><p id="velq"></p><p id="velq5"></p><p id="velq10"></p></td>
<td id="velcash"></td>
</tr>
<tr>
<td><p>Scordite</p></td>
<td><input type="text" id="usco" /><input type="text" id="usco5" placeholder="Condensed" /><input type="text" id="usco10" placeholder="Massive" /></td>
<td><p id="scoq"></p><p id="scoq5"></p><p id="scoq10"></p></td>
<td id="scocash"></td>
</tr>
<tr>
<td><p>Pyroxeres</p></td>
<td><input type="text" id="upyr" /><input type="text" id="upyr5" placeholder="Solid" /><input type="text" id="upyr10" placeholder="Viscous" /></td>
<td><p id="pyrq"></p><p id="pyrq5"></p><p id="pyrq10"></p></td>
<td id="pyrcash"></td>
</tr>
<tr>
<td><p>Plaglioclase</p></td>
<td><input type="text" id="upla" /><input type="text" id="upla5" placeholder="Azure" /><input type="text" id="upla10" placeholder="Rich" /></td>
<td><p id="plaq"></p><p id="plaq5"></p><p id="plaq10"></p></td>
<td id="placash"></td>
</tr>
<tr>
<td><p>Omber</p></td>
<td><input type="text" id="uomb" /><input type="text" id="uomb5" placeholder="Silvery" /><input type="text" id="uomb10" placeholder="Golden" /></td>
<td><p id="ombq"></p><p id="ombq5"></p><p id="ombq10"></p></td>
<td id="ombcash"></td>
</tr>
<tr>
<td><p>Kernite</p></td>
<td><input type="text" id="uker" /><input type="text" id="uker5" placeholder="Luminous" /><input type="text" id="uker10" placeholder="Fiery" /></td>
<td><p id="kerq"></p><p id="kerq5"></p><p id="kerq10"></p></td>
<td id="kercash"></td>
</tr>
<tr>
<td><p>Jaspet</p></td>
<td><input type="text" id="ujas" /><input type="text" id="ujas5" placeholder="Pure" /><input type="text" id="ujas10" placeholder="Pristine" /></td>
<td><p id="jasq"></p><p id="jasq5"></p><p id="jasq10"></p></td>
<td id="jascash"></td>
</tr>
<tr>
<td><p>Hemorphite</p></td>
<td><input type="text" id="uhem" /><input type="text" id="uhem5" placeholder="Vivid" /><input type="text" id="uhem10" placeholder="Radient" /></td>
<td><p id="hemq"></p><p id="hemq5"></p><p id="hemq10"></p></td>
<td id="hemcash"></td>
</tr>
<tr>
<td><p>Hedbergite</p></td>
<td><input type="text" id="uhed" /><input type="text" id="uhed5" placeholder="Vitric" /><input type="text" id="uhed10" placeholder="Glazed" /></td>
<td><p id="hedq"></p><p id="hedq5"></p><p id="hedq10"></p></td>
<td id="hedcash"></td>
</tr>
<tr>
<td><p>Gneiss</p></td>
<td><input type="text" id="ugne" /><input type="text" id="ugne5" placeholder="Iridescent" /><input type="text" id="ugne10" placeholder="Prismatic" /></td>
<td><p id="gneq"></p><p id="gneq5"></p><p id="gneq10"></p></td>
<td id="gnecash"></td>
</tr>
<tr>
<td><p>Dark Orchre</p></td>
<td><input type="text" id="udar" /><input type="text" id="udar5" placeholder="Onyx" /><input type="text" id="udar10" placeholder="Obsidian" /></td>
<td><p id="darq"></p><p id="darq5"></p><p id="darq10"></p></td>
<td id="darcash"></td>
</tr>
<tr>
<td><p>Crokite</p></td>
<td><input type="text" id="ucro" /><input type="text" id="ucro5" placeholder="Sharp" /><input type="text" id="ucro10" placeholder="Crystalline" /></td>
<td><p id="croq"></p><p id="croq5"></p><p id="croq10"></p></td>
<td id="crocash"></td>
</tr>
<tr>
<td><p>Spodumain</p></td>
<td><input type="text" id="uspo" /><input type="text" id="uspo5" placeholder="Bright" /><input type="text" id="uspo10" placeholder="Gleaming" /></td>
<td><p id="spoq"></p><p id="spoq5"></p><p id="spoq10"></p></td>
<td id="spocash"></td>
</tr>
<tr>
<td><p>Bistot</p></td>
<td><input type="text" id="ubis" /><input type="text" id="ubis5" placeholder="Triclinic" /><input type="text" id="ubis10" placeholder="Monoclinic" /></td>
<td><p id="bisq"></p><p id="bisq5"></p><p id="bisq10"></p></td>
<td id="biscash"></td>
</tr>
<tr>
<td><p>Arkanor</p></td>
<td><input type="text" id="uark" /><input type="text" id="uark5" placeholder="Crimson" /><input type="text" id="uark10" placeholder="Prime" /></td>
<td><p id="arkq"></p><p id="arkq5"></p><p id="arkq10"></p></td>
<td id="arkcash"></td>
</tr>
<tr>
<td><p>Mercoxit</p></td>
<td><input type="text" id="umer" /><input type="text" id="umer5" placeholder="Magma" /><input type="text" id="umer10" placeholder="Vitreous" /></td>
<td><p id="merq"></p><p id="merq5"></p><p id="merq10"></p></td>
<td id="mercash"></td>
</tr>
<tr>
<td id="sub"></td>
<td></td>
<td><p>Total</p></td>
<td id="totalcash"></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
<tr>
<td id="sub3"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:none;" id="admin">
<tr>
<td width="12%"><p>Isogen</p></td>
<td width="24%"><input type="text" id="uisoa" /></td>
<td width="14%" id="isoqc">116.99</td>
<td width="50%" id="isocash"></td>
</tr>
<tr>
<td><p>Megacyte</p></td>
<td><input type="text" id="umega" /></td>
<td id="megqc">2029.87</td>
<td id="megcash"></td>
</tr>
<tr>
<td><p>Mexallon</p></td>
<td><input type="text" id="umexa" /></td>
<td id="mexqc">33.56</td>
<td id="mexcash"></td>
</tr>
<tr>
<td><p>Morphite</p></td>
<td><input type="text" id="umora" /></td>
<td id="morqc">6895.29</td>
<td id="morcash"></td>
</tr>
<tr>
<td><p>Nocxium</p></td>
<td><input type="text" id="unoca" /></td>
<td id="nocqc">684.26</td>
<td id="noccash"></td>
</tr>
<tr>
<td><p>Pyerite</p></td>
<td><input type="text" id="upyea" /></td>
<td id="pyeqc">11.24</td>
<td id="pyecash"></td>
</tr>
<tr>
<td><p>Tritanium</p></td>
<td><input type="text" id="utria" /></td>
<td id="triqc">5.16</td>
<td id="tricash"></td>
</tr>
<tr>
<td><p>Zydrine</p></td>
<td><input type="text" id="uzyda" /></td>
<td id="zydqc">738.98</td>
<td id="zydcash"></td>
</tr>
<tr>
<td id="sub2"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
var iso = "<?php = $isop; ?>";
var meg = "<?php = $megp; ?>";
var mex = "<?php = $mexp; ?>";
var mor = "<?php = $morp; ?>";
var noc = "<?php = $nocp; ?>";
var pye = "<?php = $pyep; ?>";
var tri = "<?php = $trip; ?>";
var zyd = "<?php = $zydp; ?>";
alert(2);
var vel = (1000 * tri) / 333
var sco = ((833 * tri) + (416 * pye)) / 333
var pyr = ((844 * tri) + (59 * pye) + (120 * mex) + (11 * noc)) / 333
var pla = ((256 * tri) + (512 * pye) + (256 * mex)) /333
var omb = ((307 * tri) + (123 * pye) + (307 * iso)) / 500
var ker = ((386 * tri) + (773 * mex) + (386 * iso)) / 400
var jas = ((259 * tri) + (259 * pye) + (518 * mex) + (259 * noc) + (8 * zyd)) / 500
var hem = ((212 * tri) + (212 * iso) + (424 * noc) + (28 * zyd)) / 500
var hed = ((708 * iso) + (354 * noc) + (32 * zyd)) / 500
var gne = ((171 * tri) + (171 * mex) + (343 * iso) + (171 * zyd)) / 400
var dar = ((250 * tri) + (500 * noc) + (250 * zyd)) / 400
var cro = ((331 * tri) + (331 * noc) + (663 * zyd)) / 250
var spo = ((700 * tri) + (140 * pye) + (140 * meg)) / 250
var bis = ((170 * pye) + (341 * zyd) + (170 * meg)) / 200
var ark = ((300 * tri) + (166 * zyd) + (333 * meg)) /200
var mer = (530 * mor) / 250
function createButton(context, func){
var button = document.createElement("input");
button.type = "button";
button.value = "Submit";
button.onclick = onClick;
context.appendChild(button);
}
function createButton3(context, func){
var button = document.createElement("input");
button.type = "button";
button.value = "Submit";
button.onclick = onClick3;
context.appendChild(button);
}
function createButton2(context, func){
var button = document.createElement("input");
button.type = "button";
button.value = "Change";
button.onclick = onClick2;
context.appendChild(button);
}
window.onload = function(){
alert(3);
document.getElementById('isoq').innerHTML = iso;
document.getElementById('megq').innerHTML = meg;
document.getElementById('mexq').innerHTML = mex;
document.getElementById('morq').innerHTML = mor;
document.getElementById('nocq').innerHTML = noc;
document.getElementById('pyeq').innerHTML = pye;
document.getElementById('triq').innerHTML = tri;
document.getElementById('zydq').innerHTML = zyd;
alert(4);
document.getElementById('velq').innerHTML = vel;
document.getElementById('scoq').innerHTML = sco;
document.getElementById('pyrq').innerHTML = pyr;
document.getElementById('plaq').innerHTML = pla;
document.getElementById('ombq').innerHTML = omb;
document.getElementById('kerq').innerHTML = ker;
document.getElementById('jasq').innerHTML = jas;
document.getElementById('hemq').innerHTML = hem;
document.getElementById('hedq').innerHTML = hed;
document.getElementById('gneq').innerHTML = gne;
document.getElementById('darq').innerHTML = dar;
document.getElementById('croq').innerHTML = cro;
document.getElementById('spoq').innerHTML = spo;
document.getElementById('bisq').innerHTML = bis;
document.getElementById('arkq').innerHTML = ark;
document.getElementById('merq').innerHTML = mer;
alert(5);
createButton(document.getElementById('sub'), function(){
highlight(this.parentNode.childNodes[1]);
// Example of different context, copied function etc
// createButton(this.parentNode, this.onclick);
});
createButton3(document.getElementById('sub2'), function(){
highlight(this.parentNode.childNodes[1]);
// Example of different context, copied function etc
// createButton(this.parentNode, this.onclick);
});
createButton2(document.getElementById('sub3'), function(){
highlight(this.parentNode.childNodes[1]);
// Example of different context, copied function etc
// createButton(this.parentNode, this.onclick);
});
alert(5.1);
}
alert(6);
function onClick(){
var aiso = document.getElementById('uiso').value;
var ameg = document.getElementById('umeg').value;
var amex = document.getElementById('umex').value;
var amor = document.getElementById('umor').value;
var anoc = document.getElementById('unoc').value;
var apye = document.getElementById('upye').value;
var atri = document.getElementById('utri').value;
var azyd = document.getElementById('uzyd').value;
alert(7);
var avel = document.getElementById('uvel').value;
var avel5 = (document.getElementById('uvel5').value * 1.05);
var avel10 = (document.getElementById('uvel10').value * 1.1);
var asco = document.getElementById('usco').value;
var asco5 = (document.getElementById('usco5').value * 1.05);
var asco10 = (document.getElementById('usco10').value * 1.1);
var apyr = document.getElementById('upyr').value;
var apyr5 = (document.getElementById('upyr5').value * 1.05);
var apyr10 = (document.getElementById('upyr10').value * 1.1);
var apla = document.getElementById('upla').value;
var apla5 = (document.getElementById('upla5').value * 1.05);
var apla10 = (document.getElementById('upla10').value * 1.1);
var aomb = document.getElementById('uomb').value;
var aomb5 = (document.getElementById('uomb5').value * 1.05);
var aomb10 = (document.getElementById('uomb10').value * 1.1);
var aker = document.getElementById('uker').value;
var aker5 = (document.getElementById('uker5').value * 1.05);
var aker10 = (document.getElementById('uker10').value * 1.1);
var ajas = document.getElementById('ujas').value;
var ajas5 = (document.getElementById('ujas5').value * 1.05);
var ajas10 = (document.getElementById('ujas10').value * 1.1);
var ahem = document.getElementById('uhem').value;
var ahem5 = (document.getElementById('uhem5').value * 1.05);
var ahem10 = (document.getElementById('uhem10').value * 1.1);
var ahed = document.getElementById('uhed').value;
var ahed5 = (document.getElementById('uhed5').value * 1.05);
var ahed10 = (document.getElementById('uhed10').value * 1.1);
var agne = document.getElementById('ugne').value;
var agne5 = (document.getElementById('ugne5').value * 1.05);
var agne10 = (document.getElementById('ugne10').value * 1.1);
var adar = document.getElementById('udar').value;
var adar5 = (document.getElementById('udar5').value * 1.05);
var adar10 = (document.getElementById('udar10').value * 1.1);
var acro = document.getElementById('ucro').value;
var acro5 = (document.getElementById('ucro5').value * 1.05);
var acro10 = (document.getElementById('ucro10').value * 1.1);
var aspo = document.getElementById('uspo').value;
var aspo5 = (document.getElementById('uspo5').value * 1.05);
var aspo10 = (document.getElementById('uspo10').value * 1.1);
var abis = document.getElementById('ubis').value;
var abis5 = (document.getElementById('ubis5').value * 1.05);
var abis10 = (document.getElementById('ubis10').value * 1.1);
var aark = document.getElementById('uark').value;
var aark5 = (document.getElementById('uark5').value * 1.05);
var aark10 = (document.getElementById('uark10').value * 1.1);
var amer = document.getElementById('umer').value;
var amer5 = (document.getElementById('umer5').value * 1.05);
var amer10 = (document.getElementById('umer10').value * 1.1);
alert(8);
var tiso = iso * aiso;
var tmeg = meg * ameg;
var tmex = mex * amex;
var tmor = mor * amor;
var tnoc = noc * anoc;
var tpye = pye * apye;
var ttri = tri * atri;
var tzyd = zyd * azyd;
alert(9);
var tvel = vel * avel;
var tvel5 = vel * avel5;
var tvel10 = vel * avel10;
var tsco = sco * asco;
var tsco5 = sco * asco5;
var tsco10 = sco * asco10;
var tpyr = pyr * apyr;
var tpyr5 = pyr * apyr5;
var tpyr10 = pyr * apyr10;
var tpla = pla * apla;
var tpla5 = pla * apla5;
var tpla10 = pla * apla10;
var tomb = omb * aomb;
var tomb5 = omb * aomb5;
var tomb10 = omb * aomb10;
var tker = ker * aker;
var tker5 = ker * aker5;
var tker10 = ker * aker10;
var tjas = jas * ajas;
var tjas5 = jas * ajas5;
var tjas10 = jas * ajas10;
var them = hem * ahem;
var them5 = hem * ahem5;
var them10 = hem * ahem10;
var thed = hed * ahed;
var thed5 = hed * ahed5;
var thed10 = hed * ahed10;
var tgne = gne * agne;
var tgne5 = gne * agne5;
var tgne10 = gne * agne10;
var tdar = dar * adar;
var tdar5 = dar * adar5;
var tdar10 = dar * adar10;
var tcro = cro * acro;
var tcro5 = cro * acro5;
var tcro10 = cro * acro10;
var tspo = spo * aspo;
var tspo5 = spo * aspo5;
var tspo10 = spo * aspo10;
var tbis = bis * abis;
var tbis5 = bis * abis5;
var tbis10 = bis * abis10;
var tark = ark * aark;
var tark5 = ark * aark5;
var tark10 = ark * aark10;
var tmer = mer * amer;
var tmer5 = mer * amer5;
var tmer10 = mer * amer10;
var totalc = tiso + tmeg + tmex + tmor + tnoc + tpye + ttri + tzyd + tvel + tsco + tpyr + tpla + tomb + tker + tjas + them + thed + tgne + tdar + tcro + tspo + tbis + tark + tmer + tvel5 + tsco5 + tpyr5 + tpla5 + tomb5 + tker5 + tjas5 + them5 + thed5 + tgne5 + tdar5 + tcro5 + tspo5 + tbis5 + tark5 + tmer5 + tvel10 + tsco10 + tpyr10 + tpla10 + tomb10 + tker10 + tjas10 + them10 + thed10 + tgne10 + tdar10 + tcro10 + tspo10 + tbis10 + tark10 + tmer10;
alert(11);
document.getElementById('isocash').innerHTML = tiso;
document.getElementById('megcash').innerHTML = tmeg;
document.getElementById('mexcash').innerHTML = tmex;
document.getElementById('morcash').innerHTML = tmor;
document.getElementById('noccash').innerHTML = tnoc;
document.getElementById('pyecash').innerHTML = tpye;
document.getElementById('tricash').innerHTML = ttri;
document.getElementById('zydcash').innerHTML = tzyd;
alert(12);
document.getElementById('velcash').innerHTML = (tvel + tvel5 + tvel10);
document.getElementById('scocash').innerHTML = (tsco + tsco5 + tsco10);
document.getElementById('pyrcash').innerHTML = (tpyr + tpyr5 + tpyr10);
document.getElementById('placash').innerHTML = (tpla + tpla5 + tpla10);
document.getElementById('ombcash').innerHTML = (tomb + tomb5 + tomb10);
document.getElementById('kercash').innerHTML = (tker + tker5 + tker10);
document.getElementById('jascash').innerHTML = (tjas + tjas5 + tjas10);
document.getElementById('hemcash').innerHTML = (them + them5 + them10);
document.getElementById('hedcash').innerHTML = (thed + thed5 + thed10);
document.getElementById('gnecash').innerHTML = (tgne + tgne5 + tgne10);
document.getElementById('darcash').innerHTML = (tdar + tdar5 + tdar10);
document.getElementById('crocash').innerHTML = (tcro + tcro5 + tcro10);
document.getElementById('spocash').innerHTML = (tspo + tspo5 + tspo10);
document.getElementById('biscash').innerHTML = (tbis + tbis5 + tbis10);
document.getElementById('arkcash').innerHTML = (tark + tark5 + tark10);
document.getElementById('mercash').innerHTML = (tmer + tmer5 + tmer10);
alert(13);
document.getElementById('totalcash').innerHTML = totalc;
}
function onClick3(){
var iso2 = document.getElementById('uisoa').value;
var meg2 = document.getElementById('umega').value;
var mex2 = document.getElementById('umexa').value;
var mor2 = document.getElementById('umora').value;
var noc2 = document.getElementById('unoca').value;
var pye2 = document.getElementById('upyea').value;
var tri2 = document.getElementById('utria').value;
var zyd2 = document.getElementById('uzyda').value;
iso = iso.replace(1, iso2);
meg = meg.replace(1, meg2);
mex = mex.replace(1, mex2);
mor = mor.replace(1, mor2);
noc = noc.replace(1, noc2);
pye = pye.replace(1, pye2);
tri = tri.replace(1, tri2);
zyd = zyd.replace(1, zyd2);
}
function onClick2() {
var e = document.getElementById('admin');
var a = prompt("Password");
if(a === 'admin'){
e.style.display = '';
}
else {
alert('Incorrect password');
}
}
alert(14);
You are assigning variable wrong way
var iso = "<?php = $isop; ?>";
use like this
var iso = "<?php echo $isop; ?>";
or
var iso = "<?= $isop; ?>";
How Sum values in dynamic table columns of qty, I can get the total of the price1,
but I don't know to sum the column of qty, this is dynamic table, I can add row
by the add button. Please help, I'm new on php.
<html>
<head>
<div>
<script type="text/javascript">
function tot(elem) {
var d=document.getElementById("total").value;
var total=Number(d);
}
var total = 0;
function getValues() {
var qty1 = 0;
var unit = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty1[]"){var qty1 = obj[i].value;}
if(obj[i].name == "unit[]"){var unit = obj[i].value;}
if(obj[i].name == "totala[]"){
if(qty1 > 0 && unit > 0)
{obj[i].value = (qty1*unit).toFixed(2);total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = (total*1).toFixed(2);
total=0;
}
</script>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
function deleteRow(tableID)
{
try
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked)
{
if (rowCount <= 1)
{
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch(e)
{
alert(e);
}
getValues();
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" border="0">
<tr>
<td colspan="5" align="center">Products</td>
</tr>
<tr align="center">
<td><INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /></td>
<td>
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></td>
<td> </td>
<td> </td>
</tr>
<tr align="center">
<td width="169">qty</td>
<td width="145"> </td>
<td width="368">unit</td>
<td width="151">price1</td>
</tr>
</table>
<div>
<table width="800" border="0" class="box4_Box" id="dataTable">
<tr>
<td width="21" valign="top"><input name="chk[]" type="checkbox"/></td>
<td width="280">
<input type="text" name="qty1[]" id="qty" onkeyup="getValues()"onblur=""/></td>
<td width="337">
<input type="text" name="unit[]" id="unit" onkeyup="getValues()" onblur=""/></td>
<td width="144">
<input type="text" name="totala[]" id="totala" onkeyup="getValues()" /></td>
</tr>
</table>
</div>
<div>
<table width="800" border="0">
<tr>
<td width="305"><input type="text" name="qtytotal" id="qtytotal" value="" /></td>
<td width="337"> </td>
<td width="144"><input type="text" name="total" id="total" value="" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
function sumQty(tableID) {
var total = 0;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var colCount = row.cells.length;
for (var j = 0; j < cellCount; j++) {
var node = row.cells[j].childNodes[0];
if (node.name == "qty[]") {
total += parseInt(node.value);
}
}
}
return total;
}
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>
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