Fatal编程技术网
  • javascript/
  • 多个javascript onchange事件，同一脚本获取不同的mysql结果

多个javascript onchange事件，同一脚本获取不同的mysql结果

javascript

多个javascript onchange事件，同一脚本获取不同的mysql结果,javascript,onchange,Javascript,Onchange,我有一个用onchange事件执行的javascript onchange="showUser(1, this.value)" Javascript调用一个php页面，该页面执行mysql查询并在当前页面上显示结果 javascript工作得很好，但是我想复制javascript来运行不同的查询并在现有页面上显示结果 我有一个订单表，当我在第一列中插入订单时，我希望onchange甚至触发两个脚本，一个在第二列中拉取并显示产品详细信息，另一个在第三列中拉取并显示销售单位 我的javascrip

我有一个用onchange事件执行的javascript

onchange="showUser(1, this.value)"
Javascript调用一个php页面，该页面执行mysql查询并在当前页面上显示结果

javascript工作得很好，但是我想复制javascript来运行不同的查询并在现有页面上显示结果

我有一个订单表，当我在第一列中插入订单时，我希望onchange甚至触发两个脚本，一个在第二列中拉取并显示产品详细信息，另一个在第三列中拉取并显示销售单位

我的javascript是：

<script type="text/javascript"> 
  function showWhse(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("whse" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("whse" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

<html>
<head>
<title>Sales Portal</title>
<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

</head>
<body topmargin=0>

<form name="orderform" id="orderform" action="newsale.php" method="post">

<table border=1>    

<tr>
<td>Product Code</td>
<td>Description</td>
<td>Warehouse</td>
<td>Selling Units</td>
</tr>
<tr id="r1">  
    <td width=100>
        <input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)">
    </td>
    <td width=280>
        <div align="left" id="txtHint1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="whse1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su1">&nbsp;</div>
    </td>
</tr>
<tr id="r2">  
    <td>
        <input size=10  type=number id=sku2 name=sku2 onchange="showUser(2, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint2">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse2">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su2">&nbsp;</div>
    </td>
</tr>
<tr id="r3">  
    <td>
        <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint3">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse3">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su3">&nbsp;</div>
    </td>
</tr>
<tr id="r4">  
    <td>
        <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint4">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse4">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su4">&nbsp;</div>
    </td>
</tr>
</table>
</form>

</body>
</html>

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);


$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['Description']."</font>, ";
   if($row['SellingUnits']=="CS"){echo "<font color=red>".$row['CasesPerPallet']."</font> ";} elseif($row['SellingUnits']=="SHR") {echo "<font color=red>".$row['ShrinksPerPallet']."</font> ";}
   }}

mysql_close($con);
 ?> 


函数showWhse（userNumber，str）
{ 
如果（str==“”）
{ 
document.getElementById（“whse”+userNumber）.innerHTML=“”；
返回；
}   
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
} 
xmlhttp.onreadystatechange=函数（）
{ 
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{ 
document.getElementById（“whse”+userNumber）.innerHTML=xmlhttp.responseText；
} 
} 
open（“GET”、“getdata1.php？q=“+str，true”）；
xmlhttp.send（）；
}
完整的PHP页面是：

<script type="text/javascript"> 
  function showWhse(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("whse" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("whse" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

<html>
<head>
<title>Sales Portal</title>
<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

</head>
<body topmargin=0>

<form name="orderform" id="orderform" action="newsale.php" method="post">

<table border=1>    

<tr>
<td>Product Code</td>
<td>Description</td>
<td>Warehouse</td>
<td>Selling Units</td>
</tr>
<tr id="r1">  
    <td width=100>
        <input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)">
    </td>
    <td width=280>
        <div align="left" id="txtHint1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="whse1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su1">&nbsp;</div>
    </td>
</tr>
<tr id="r2">  
    <td>
        <input size=10  type=number id=sku2 name=sku2 onchange="showUser(2, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint2">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse2">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su2">&nbsp;</div>
    </td>
</tr>
<tr id="r3">  
    <td>
        <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint3">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse3">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su3">&nbsp;</div>
    </td>
</tr>
<tr id="r4">  
    <td>
        <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint4">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse4">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su4">&nbsp;</div>
    </td>
</tr>
</table>
</form>

</body>
</html>

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);


$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['Description']."</font>, ";
   if($row['SellingUnits']=="CS"){echo "<font color=red>".$row['CasesPerPallet']."</font> ";} elseif($row['SellingUnits']=="SHR") {echo "<font color=red>".$row['ShrinksPerPallet']."</font> ";}
   }}

mysql_close($con);
 ?> 


销售门户
函数showUser（userNumber，str）
{ 
如果（str==“”）
{ 
document.getElementById（“txtHint”+userNumber）.innerHTML=“”；
返回；
}   
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
} 
xmlhttp.onreadystatechange=函数（）
{ 
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{ 
document.getElementById（“txtHint”+userNumber）.innerHTML=xmlhttp.responseText；
} 
} 
open（“GET”、“getdata1.php？q=“+str，true”）；
xmlhttp.send（）；
}
产品代码
描述
仓库
销售单位
执行mysql查询的php文件是：

<script type="text/javascript"> 
  function showWhse(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("whse" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("whse" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

<html>
<head>
<title>Sales Portal</title>
<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

</head>
<body topmargin=0>

<form name="orderform" id="orderform" action="newsale.php" method="post">

<table border=1>    

<tr>
<td>Product Code</td>
<td>Description</td>
<td>Warehouse</td>
<td>Selling Units</td>
</tr>
<tr id="r1">  
    <td width=100>
        <input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)">
    </td>
    <td width=280>
        <div align="left" id="txtHint1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="whse1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su1">&nbsp;</div>
    </td>
</tr>
<tr id="r2">  
    <td>
        <input size=10  type=number id=sku2 name=sku2 onchange="showUser(2, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint2">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse2">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su2">&nbsp;</div>
    </td>
</tr>
<tr id="r3">  
    <td>
        <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint3">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse3">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su3">&nbsp;</div>
    </td>
</tr>
<tr id="r4">  
    <td>
        <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint4">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse4">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su4">&nbsp;</div>
    </td>
</tr>
</table>
</form>

</body>
</html>

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);


$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['Description']."</font>, ";
   if($row['SellingUnits']=="CS"){echo "<font color=red>".$row['CasesPerPallet']."</font> ";} elseif($row['SellingUnits']=="SHR") {echo "<font color=red>".$row['ShrinksPerPallet']."</font> ";}
   }}

mysql_close($con);
 ?>
理想情况下，用户输入产品代码后，我可以使用此脚本获取并显示产品详细信息、销售单位和仓库信息，如下图所示：

如何编辑或复制javascript以使1 onchange事件执行此操作？我发现，如果复制整个sript，则只执行最后一个实例，因为使用的变量与未更改的脚本相同

提前感谢您的帮助， 瑞安

添加

我对javascript做了如下更改：

<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 

var responseText = xmlhttp.responseText; 
var description = responseText.substring(13, responseText.indexOf(",Warehouse:")); 
var warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:")); 
var sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+14); 

document.getElementById("whse" + userNumber).innerHTML = warehouse; 
document.getElementById("txtHint" + userNumber).innerHTML = description; 
document.getElementById("su" + userNumber).innerHTML = sellingUnits;
  }
</script>


函数showUser（userNumber，str）
{ 
如果（str==“”）
{ 
document.getElementById（“txtHint”+userNumber）.innerHTML=“”；
返回；
}   
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
} 
xmlhttp.onreadystatechange=函数（）
{ 
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{ 
document.getElementById（“txtHint”+userNumber）.innerHTML=xmlhttp.responseText；
} 
} 
open（“GET”、“getdata1.php？q=“+str，true”）；
xmlhttp.send（）；
var responseText=xmlhttp.responseText；
var description=responseText.substring（13，responseText.indexOf（“，Warehouse:”）；
var warehouse=responseText.substring（responseText.indexOf（，warehouse:）+11，responseText.indexOf（，SellingUnits:）；
var sellingUnits=responseText.substring（responseText.indexOf（“，sellingUnits:”）+14）；
document.getElementById（“whse”+用户号）.innerHTML=仓库；
document.getElementById（“txtHint”+userNumber）.innerHTML=说明；
document.getElementById（“su”+userNumber）.innerHTML=sellingUnits；
}
如何调用这些值以显示在单独的列中？仓库、描述和销售单位

我假设我需要从我的html表中调用这些值，我该怎么做

再次感谢，Ryan

首先，编辑执行sql查询的php文件，以返回所有三个值并删除任何html格式。下面通过将所有值放入一个字符串来实现。如果您知道php的JSON，那么应该使用它

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);


$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else {
while($row = mysql_fetch_array($result))
 {
   echo "Description:" . $row['Description'] . ",Warehouse:" . $row['Warehouse'] . ",SellingUnits:" . $row['SellingUnits'];
 }
}

mysql_close($con);
 ?>
此时，您不需要进行任何其他更改，因为对
showUser（1，this.value）
的单个调用将更新所有三个字段

请记住，像我上面所做的那样，将用户界面格式化代码
与SQL select语句分开总是很好的。此外，执行尽可能少的SQL查询总是好的

有关
indexOf
和
substring
方法的更多信息，请参阅

请注意，我没有测试任何代码，因此可能存在拼写错误或语法错误。

太好了。如果一切正常，请接受答案。我是否将对javascript的更改放在了正确的位置？如何从html表语法中调用这些变量或输出？谢谢，你有点不知道该把它放在哪里。我把我的答案说得更清楚了。传奇！！！谢谢你的帮助。我真的很感谢你的时间！现在是时候做我的学习了，以确保我理解你教给我的东西！好吧，瑞安，还有一个问题。如果输入了错误的packcode，并且mysql结果为“不是有效的产品代码”，则输出会破坏表结构。它在第4栏“销售单位”下结束。如何将其输出到描述列？再次感谢，