3

我正在研究一种使用 JavaScript 添加另一个行项目的表单。目的是将行项目添加到发票中。在我的表单中使用文本框时，我已经成功地让它工作正常，但我一直坚持如何让它与一个调用 mysql 以获取下拉框数据的下拉框一起工作。

这就是我所拥有的。

 <?php
     include $_SERVER['DOCUMENT_ROOT']."/connect.php";
     include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
 ?>

 <script type="text/javascript">
     var counter = 1;
     function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><select name='myInputs[]'><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>";
          document.getElementById(divName).appendChild(newdiv);
     }
 </script>

 <form method="POST">
     <div id="dynamicInput">
          Entry 1<br><select name="myInputs[]"><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
 </form>

所以这里有一些关于正在发生的事情的信息。现在，上面的 JavaScript 代码显示了其中的 MySQL 查询。这会终止添加订单项功能。如果我只是删除查询但保留其他 php，则添加行项目再次开始工作，但下拉列表中当然没有数据。

在表单本身中，它在不使用 javascript 的情况下从数据库中获取第一个行项目，这可以正常工作。

我觉得我越来越近了，但不知道从这里去哪里。

提前致谢。

编辑：感谢尼克，我得到了这个工作。这是代码。

 <?php
 include $_SERVER['DOCUMENT_ROOT']."/connect.php";
 include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
 ?>

 <script type="text/javascript">
 var counter = 1;
 function addInput(div){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Entry " + (++counter) + " <br><select name='myInputs[]'>" + xmlhttp.responseText + "</select>";
     }
      document.getElementById(div).appendChild(newdiv);
   }

 xmlhttp.open("GET", "update_text.php", false);
 xmlhttp.send();
 }
 </script>

 <form method="POST">
 <div id="dynamicInput">
      Entry 1<br><select name="myInputs[]"><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>
 </div>
 <input type="button" value="Add" onClick="addInput('dynamicInput');">
 </form>

然后update_text.php

 <?php
 include $_SERVER['DOCUMENT_ROOT']."/connect.php";
 $result = mysql_query("SELECT * FROM salesitem");
 while($row = mysql_fetch_array($result)) {
 echo "<option value=\"".$row['name']."\">".$row['name']."</option>";
 }
 ?>

这是我在数据库中的 php 帖子，它不适用于 javascript 添加行项目，仅适用于从表单创建的原始条目。（除了下拉菜单，我还有其他字段）。

 <?php

 include $_SERVER['DOCUMENT_ROOT']."/connect.php";

 $company = mysql_real_escape_string($_POST['company']);

 foreach($_POST['item'] as $i => $item)
 {
   $item = mysql_real_escape_string($item);
 $quantity = mysql_real_escape_string($_POST['quantity'][$i]);

 mysql_query("INSERT INTO invoice (company, item, quantity) VALUES ('$company', '".$item."', '".$quantity."') ") or die(mysql_error());
 }
 echo "<br><font color=\"green\"><b>Invoice added</b></font>";

 ?>

谢谢，如果我能更好地清理这个，请告诉我。

4

3 回答 3

2

遗憾的是，由于 PHP 的性质，您尝试执行此操作的方式不起作用。

当客户端从服务器请求您的页面时，所有的 php 都会被执行。

因此，您的 javascript 函数中的 php 块实际上只是您的 php.ini 的静态结果。

您需要使用 XMLHttpRequests/Ajax 从服务器请求新数据。

这是一个快速（可能相当糟糕）的例子！

修改您的 javascript 函数：

var counter = 1;
function addInput(div) {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var d = document.getElementById(div);
                    d.innerHTML=d.innerHTML  +"<div>Entry " + (++counter) + " <br><select name='myInputs[]'>" + xmlhttp.responseText + "</select></div>";
        }
    }
    xmlhttp.open("GET", "updated_list.php", false);
    xmlhttp.send();
}

您服务器上的新 php 文件：(updated_list.php)

<?php 
// you'll need to include stuff to connect to your database here
$result = mysql_query("SELECT * FROM salesitem"); 
while($row = mysql_fetch_array($result)) { 
    echo "<option value=\"".$row['name']."\">".$row['name']."</option>";
} 
?>

更新

我确实说过这是一个不好的例子 :) 我的原始代码覆盖了你的 div 的内容，而不是添加到它，我更新了它。这只是一个示例，您应该阅读 AJAX 以及如何从服务器请求数据。

于 2013-03-24T23:32:03.247 回答
0

页面加载后，您不能在 javascript 函数中使用服务器代码。服务器端代码就像它的名字一样——在服务器上运行的代码。因此，在页面完成加载后，它“返回”到客户端，现在只有客户端代码（javascript）可以运行。所以你的线

newdiv.innerHTML = "Entry " + (counter + 1) + " <br><select name='myInputs[]'><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>";

有点错误。

您可以做的是将数据库中的数据返回到 javascript（使用 json 将是最佳选择），然后使用来自服务器的原始数据（现在是 javascript 数据）动态构建选择框。

所以假设你的数据是

var data = [{name:'n1'},{name:'n2'},{name:'n3'}];

您可以使用 javascript 运行此数据并构建您的组合：

var newSelect = document.createElement('select');
for(var i=0;i<data.length;i++){
  var name = data[i].name;
  newSelect.options[newSelect.options.length] = new Option(name,name);
}
于 2013-03-24T23:20:19.310 回答
0

这是AJAX（异步 Javascript 和 XML）的一个经典例子——基本概念是当一个动作被执行时（例如一个按钮点击显示内容），一些 JavaScript 调用一个 PHP（异步），PHP 运行，返回一个XML 文件（虽然这实际上可以是您想要的任何文件格式，但现在有些人更喜欢使用 JSON，因为它更容易解析），并且显示此 XML/JSON 的内容，也使用 JavaScript。

尽管上面的示例是显示内容，但没有理由不能异步执行您需要在服务器上运行的任何操作（例如，将数据插入数据库）。

SO 不是为人们编写代码的地方 - 所以现在我已经给你一个关于从哪里开始的提示，作为读者的练习（/问题提问者！），看看一些 AJAX 教程，确保你理解了这个概念，写了一些代码，如果仍然不能让它工作，请回来！

祝你好运 ：）

于 2013-03-24T23:32:33.473 回答