显示AJAX结果到一个文本框 [英] Display ajax result into a textbox
本文介绍了显示AJAX结果到一个文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想插入我的ajax查询结果到一个文本框。当用户选择产品code，单价应显示在文本框中。并且当量被输入时，单价必须乘以数量的多少，在文本框中显示。一旦所有的数据在文本框中提供的日期必须上传到MySQL数据库。这是我的code。
＆LT;脚本类型=文/ JavaScript的＆GT;
功能showUP（STR）{
如果（STR ==）{
的document.getElementById（单价）的innerHTML =。
返回;
}
如果（window.XMLHtt prequest）{
// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
XMLHTTP =新XMLHtt prequest（）;
} 其他 {
// code对IE6，IE5
XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange =功能（）{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）{
的document.getElementById（单价）的innerHTML = xmlhttp.responseText。
}
}
xmlhttp.open（GET，getunitprice.php Q =？+ STR，真正的）;
xmlhttp.send（）;
}
功能乘（数量）{
VAR totalPrice = parseFloat（的document.getElementById（单价）的innerHTML。）*数量;
的document.getElementById（TotalPrice）的innerHTML = totalPrice。
}
＆LT; / SCRIPT＆GT;
＆LT; / SCRIPT＆GT;
＆LT;形式的行动=addorderitemform.php方法=邮报名称=addorderitemform＆GT;
＆LT;表格的宽度=600px的边界=0CELLSPACING =1的cellpadding =3＆GT;
＆其中; TR＆GT;
百分位宽度 - 18％＆GT;订单ID：＆LT; /第i个
＆LT; TD宽度=60％＆GT;
＆LT;选择名称=订单ID＆GT;
＆LT;期权价值=选择分类＆GT;选择一个现有的订单和LT; /选项＆GT;
＆LT; PHP
$查询=选择的OrderID FROM customerorder;
$结果= mysql_query（$查询）;
而（$行= mysql_fetch_assoc（$结果））
{
打印＆LT;期权价值= \$行['订单ID']\＆GT;$行['订单ID'。＆LT; /选项＆GT; \ R;
}
？＆GT;
＆LT; /选择＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
百分位宽度 - 18％＆GT;产物：; /第i个
＆LT; TD宽度=60％＆GT;
＆LT;选择名称=产品codeID =产品code的onchange =showUP（THIS.VALUE）＆GT;
＆LT;期权价值=选择分类＆GT;选择产品＆LT; /选项＆GT;
＆LT; PHP
$ QUERY1 ='选择商品code，产品名称FROM产品;
$ RESULT1 =请求mysql_query（$ QUERY1）;
而（$ ROW1 = mysql_fetch_assoc（$ RESULT1））
{
打印＆LT;期权价值= \$ ROW1 ['产品code']\＆GT;。$ ROW1 ['产品名称']＆LT; /选项＆GT; \ R;
}
？＆GT;
＆LT; /选择＆GT;＆LT; / TD＆GT;
＆LT; BR /＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
百分位宽度 - 18％＆GT;单价：LT; /第i个
＆LT; TD宽度=60％＆GT;
＆LT;输入类型 - 文本NAME =单价ID =单价大小=60/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
百分位宽度 - 18％＆GT;数量：LT; /第i个
＆LT; TD宽度=60％＆GT;
＆LT;输入类型 - 文本NAME =数量ID =数量的onblur =乘法（THIS.VALUE）大小=60/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
百分位宽度 - 18％＆GT; TotalPrice：LT; /第i个
＆LT; TD宽度=60％＆GT;
＆LT;输入类型 - 文本NAME =TotalPriceID =TotalPrice大小=60/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;输入类型=提交值=添加订单项/＆GT;
＆LT;输入类型=复位值=重置/＆GT;
＆所述; / P＆GT;
＆LT; /形式GT;
GETUNITPRICE.PHP
＆LT; PHP
$ Q = $ _ GET [Q];
$ CON =的mysql_connect（'本地主机'，'根'，''）;
如果（！$ CON）
{
死亡（无法连接：mysql_error（））;
}
mysql_select_db（订单，$ CON）;
$ SQL =选择CostPrice从产品WHERE产品code ='$ Q。';
$结果2 =的mysql_query（$的SQL）或死亡（$ SQL＆LT; BR /＆GT;＆LT; BR /＆gt;中。mysql_error（））;
而（$ ROW2 = mysql_fetch_array（$结果2））{
回声，$ ROW2 ['CostPrice']。;
}
则mysql_close（$ CON）;
？＆GT;
然后在文本框中的详细信息上传到mysql数据库
＆LT; PHP
$订单id =（修剪（$ _ POST ['订单id']））;
$产品code =（修剪（$ _ POST ['产品code']））;
$单价=（修剪（$ _ POST ['单价']））;
$数量=（修剪（$ _ POST ['数量']））;
$ TotalPrice =（修剪（$ _ POST ['TotalPrice']））;
$主机=localhost的;
$用户=根;
$密码=;
$ DB =订单;
如果（！$ CON =的mysql_connect（$主机，$用户，$密码））
{$消息=服务器不可用，请稍后重试。;
回声$消息;
死 （）;
}
//或死亡（无法连接到服务器。）;
mysql_select_db（$分贝）或死亡（数据库令不可用。）;
$查询=INSERT INTO`OrderItem`（`OrderID`，`产品code`，`UnitPrice`，`Quantity`，`TotalPrice`）VALUES（'$订单ID，$产品code'， '$单价'，'$数量，$ TotalPrice'）;
$结果= mysql_query（$查询）或死亡（$查询＆LT; BR /＆GT;＆LT; BR /＆gt;中。mysql_error（））;
//或死亡（插入到订单项不合格。mysql_error（））;
回声＆LT;脚本＆GT;警报（您的信息已成功保存）LT; / SCRIPT＆gt;中;
标题（位置：managesalesorder.php）;
出口（）;
则mysql_close（$ CON）;
？＆GT;
解决方案
修改
的document.getElementById（单价）的innerHTML = xmlhttp.responseText。
到
的document.getElementById（单价）值= xmlhttp.responseText;
I would like to insert my ajax query result into a textbox. When user select the productcode, the unitprice should be displayed in the textbox. and when the quantity is entered, the unitprice must be multiplied with the quantity and displayed in the textbox. once all data is available in textbox the date need to be uploaded into mysql db. Here is my code.
<script type="text/javascript">
function showUP(str) {
if (str==""){
document.getElementById("UnitPrice").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("UnitPrice").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getunitprice.php?q="+str,true);
xmlhttp.send();
}
function multiply(Quantity) {
var totalPrice = parseFloat(document.getElementById("UnitPrice").innerHTML)*Quantity;
document.getElementById("TotalPrice").innerHTML = totalPrice;
}
</script>
</script>
<form action="addorderitemform.php" method="post" name="addorderitemform">
<table width="600px" border="0" cellspacing="1" cellpadding="3">
<tr>
<th width-"18%>OrderID:</th>
<td width="60%">
<select name="OrderID">
<option value="SelectCategory">Select a existing order</option>
<?php
$query = 'SELECT OrderID FROM customerorder';
$result = mysql_query ( $query );
while ( $row = mysql_fetch_assoc ( $result ) )
{
print "<option value=\"".$row['OrderID']."\">".$row['OrderID']."</option>\r";
}
?>
</select></td>
</tr>
<tr>
<th width-"18%>Product:</th>
<td width="60%">
<select name="ProductCode" id="ProductCode" onchange="showUP(this.value)">
<option value="SelectCategory">Select product</option>
<?php
$query1 = 'SELECT ProductCode, ProductName FROM Product';
$result1 = mysql_query ( $query1 );
while ( $row1 = mysql_fetch_assoc ( $result1 ) )
{
print "<option value=\"".$row1['ProductCode']."\">".$row1['ProductName']."</option>\r";
}
?>
</select></td>
<br/>
</tr>
<tr>
<th width-"18%>UnitPrice:</th>
<td width="60%">
<input type-"text" name="UnitPrice" id="UnitPrice" size="60" />
</td>
</tr>
<tr>
<th width-"18%>Quantity:</th>
<td width="60%">
<input type-"text" name="Quantity" id="Quantity" onblur= "multiply (this.value)" size="60" />
</td>
</tr>
<tr>
<th width-"18%>TotalPrice:</th>
<td width="60%">
<input type-"text" name="TotalPrice" id="TotalPrice" size="60" />
</td>
</tr>
</table>
<input type="submit" value="Add OrderItem" />
<input type="reset" value="Reset" />
</p>
</form>
GETUNITPRICE.PHP
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("Order", $con);
$sql="SELECT CostPrice FROM Product WHERE ProductCode = '".$q."'";
$result2 = mysql_query($sql) or die($sql."<br/><br/>".mysql_error());
while($row2 = mysql_fetch_array($result2)) {
echo "".$row2['CostPrice']."";
}
mysql_close($con);
?>
And then upload the details in the textbox to mysql database
<?php
$OrderID = (trim($_POST['OrderID']));
$ProductCode= (trim($_POST['ProductCode']));
$UnitPrice = (trim($_POST['UnitPrice']));
$Quantity = (trim($_POST['Quantity']));
$TotalPrice= (trim($_POST['TotalPrice']));
$host = "localhost";
$user = "root";
$password = "";
$db = "Order";
if (!$con = mysql_connect ($host, $user, $password))
{$message = "Server is not available. Please try again later";
echo "$message";
die ();
}
//or die ("Cannot connect to Server.");
mysql_select_db ($db) or die ("Database Order not available.");
$query = "INSERT INTO `OrderItem` (`OrderID`, `ProductCode`, `UnitPrice`, `Quantity`, `TotalPrice`) VALUES ('$OrderID','$ProductCode', '$UnitPrice', '$Quantity', '$TotalPrice')";
$result = mysql_query($query) or die($query."<br/><br/>".mysql_error());
//or die ("Insert into OrderItem failed.".mysql_error());
echo "<script> alert ('Your Information Was Successfully Saved')</script>";
header("Location: managesalesorder.php");
exit();
mysql_close($con);
?>
解决方案
Change
document.getElementById("UnitPrice").innerHTML = xmlhttp.responseText;
to
document.getElementById("UnitPrice").value = xmlhttp.responseText;
这篇关于显示AJAX结果到一个文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
