こんにちは、ボタンのクリックで行を追加するテーブルを持つフォームに取り組んでいますが、私の問題は、新しい行を追加すると、カウンターの値が 2 ではなく 12 になることです。
<?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>