несколько событий javascript onchange, один и тот же скрипт, извлекающий разные результаты mysql - PullRequest
0 голосов
/ 02 апреля 2012

У меня есть JavaScript, который выполняется с событием onchange.

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>

Полная страница PHP:

<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-файл, который выполняет запрос mysql:

<?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);
 ?> 

в идеале я могу использовать этот скрипт для извлечения и отображения информации о продукте, единицах продаж и информации о складе, как только пользователь введет код продукта, как показано на рисунке ниже: enter image description here

Как я могу отредактировать или продублировать javascript для того, чтобы 1 событие onchange действовало так? Я считаю, что если я продублирую весь скрипт, будет выполнен только последний экземпляр, я предполагаю, что используемые переменные совпадают с неизменным скриптом?

Заранее спасибо за помощь, Райан

ДОПОЛНЕНИЕ

Я внес изменения в 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>

Как мне вызвать эти значения для отображения в отдельных столбцах? склад, описание и продажа единиц?

Полагаю, мне нужно вызывать эти значения из таблицы html, как мне это сделать?

Еще раз спасибо, Райан

1 Ответ

1 голос
/ 02 апреля 2012

Сначала отредактируйте ваш php-файл, который выполняет запрос sql, чтобы вернуть все три значения и удалить все HTML-форматирование.Следующее делает это, помещая все значения в одну строку.Если вы знаете JSON для php, то вам следует использовать это вместо этого.

<?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, чтобы проанализировать xmlhttp.responseText, чтобы отделить каждое значение и установить их в желаемых местах div.

<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;
        var responseText = xmlhttp.responseText;
        var description = responseText;
        var warehouse = "";
        var sellingUnits = "";
        if (responseText.indexOf("NOT A VALID") == -1)
        {
          description = responseText.substring(13, responseText.indexOf(",Warehouse:")); 
          warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:")); 
          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;

      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send();
  }
</script>

На этом этапе вам не нужно вносить какие-либо другие изменения, поскольку один вызов showUser(1, this.value) обновит все три поля.

Имейте в виду, что всегда полезноотделите ваш код форматирования интерфейса пользователя, <font>, от ваших операторов выбора SQL, как я делал выше.Кроме того, всегда полезно выполнить как можно меньше запросов SQL.

Для получения дополнительной информации о методах indexOf и substring см. Объект String JavaScript .

Обратите внимание, что я не тестировал этот код, поэтому возможны орфографические ошибки или неправильный синтаксис.

...