[英]How to create loop on onChange event in PHP
我創建了2個PHP頁面(test.php,getcompany.php)
在test.php頁面中,我有一行包含訂單詳細信息。 在這里檢查工作演示:
[演示]: http : //delta-adv.com/test.php
正如您在演示中的第一行中看到的那樣,當我選擇產品時,它會從數據庫中填充公司名稱,但是當我單擊添加行按鈕,然后在第二行中,當我選擇產品時,它只會在第一行中更改公司名稱。 以下是test.php的代碼:
<html>
<head>
<script language="javascript" type="text/javascript">
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getcompany(productId) {
var strURL="getcompany.php?product="+productId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('companydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
<script type="text/javascript">
function tot(elem) {
var d=document.getElementById("total").value;
var total=Number(d);
var e=document.getElementById("vat5").value;
var vat5=Number(e);
var f=document.getElementById("vat12_5").value;
var vat12_5=Number(f);
var g=document.getElementById("cash_discount").value;
var cash_discount=Number(g);
var h=(total+vat5+vat12_5)-cash_discount;
document.getElementById("grand_total").value = h;
}
var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}
</script>
<script type="text/javascript">
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;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
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 name="gr" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" onSubmit="return validateForm(this)">
<tr>
<td class="forhead" style="white-space:nowrap;"> </td>
<table width="70%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
<tr>
<td width="32"></td>
<td width="126">Product</td>
<td width="149">company</td>
<td width="91" class="forhead" style="white-space:nowrap;">Qty</td>
<td width="100" class="forhead" style="white-space:nowrap;">Unit Price</td>
<td width="87" class="forhead" style="white-space:nowrap;">Total</td>
<td width="28" class="forhead" style="white-space:nowrap;"> </td>
<td width="156" class="forhead" style="white-space:nowrap;"><span class="forhead" style="white-space:nowrap;">
<span class="forhead" style="white-space:nowrap;">
<input type="button" value="Add Row" onClick="addRow('dataTable')" >
</span>
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" >
</span></td>
</tr>
</table>
<table border="0" id="dataTable" width="70%" align="center" cellpadding="0" cellspacing="0" class="normal-text">
<tr>
<td width="31" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/> </td>
<td class="forhead" style="white-space:nowrap;" width="127">
<select name="product" onChange="getcompany(this.value)">
<option value="">Select Product</option>
<option value="1">iphone</option>
<option value="2">ipad</option>
<option value="3">Galaxy S2</option>
</select>
</td>
<td class="forhead" style="white-space:nowrap;" width="148">
<div id="companydiv"><input name="company" value="" /></div>
</td>
<td class="forhead" style="white-space:nowrap;" width="99"><input type="text" name="qty[]" onkeyup="getValues()" style="width:80px;" onBlur=""></td>
<td class="forhead" style="white-space:nowrap;" width="100"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:80px;" value=""></td>
<td class="forhead" style="white-space:nowrap;" width="148"> <input type="text" name="amt[]" style="width:80px;"
onKeyUp="getValues()"></td>
<td width="8" align="right" class="forhead" style="white-space:nowrap;"> </td>
<td class="forhead" style="white-space:nowrap;" width="108"> </td>
</tr>
</table>
<table width="70%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
<tr>
<td width="169" class="forhead" style="white-space:nowrap;"> </td>
<td width="600" class="forhead" style="white-space:nowrap;"> </td>
</tr>
<tr>
<td align="right"><span class="forhead" style="white-space:nowrap;">Gross Total:</span></td>
<td align="left"><span class="forhead" style="white-space:nowrap;">
<input type="text" id="total" name="total[]" style="width:80px;" value="">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><input name="Submit" type="submit" value="Save" style="text-decoration:none"/>
<input type="reset" value="Cancel" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</form>
</body>
</html>
getcompany.php的代碼
<?php
$product=intval($_GET['product']);
$link = mysql_connect('localhost', 'root', ''); //Localhost configuration
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('test');
$query="SELECT * FROM tbl_company WHERE prod_ID='$product'";
$result=mysql_query($query);
$row=mysql_fetch_array($result);
?>
<input name="company" value="<?php echo $row['company_name']; ?>" />
你有:
<select name="product" onchange="getcompany(this.value)">
<option value="">Select Product</option>
<option value="1">iphone</option>
<option value="2">ipad</option>
<option value="3">Galaxy S2</option>
</select>
並且您在getcompany()中的代碼將更改以下div:
<div id="companydiv"><input name="company" value=""></div>
問題是每行都有相同的對象id =“ companydiv”-您應該添加一個計數器並為每行分配不同的ID,因此您將擁有:
<div id="companydiv1"><input name="company" value=""></div>
<div id="companydiv2"><input name="company" value=""></div>
<div id="companydiv3"><input name="company" value=""></div>
等等
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.