PHP数组变量中的Javascript变量？

Question

我正在开发发票系统。 默认情况下，它加载1行以输入项目。 如果管理员想添加其他项目，他们可以单击执行JavaScript的链接来添加其他行。 这对我来说很棒。

我使用POST方法将表单提交到同一页面。 如果用户使用JavaScript添加了其他行，则它将与提交页面时一样加载以前的行数。 为此，我使用了PHP $table_rowcount = count( $_POST["item_details"] ); 。 仅供参考， {$table_rowcount}不是语法错误，因为我使用的是模板引擎。

到目前为止，一切都很好。 管理员可以在输入数据中添加其他行，并且当页面提交给自己时，它会加载这些行数。 完善。 但是，这就是问题所在。

我需要做的是使用粘性表格的方法，因此，如果出现错误，页面将重新加载（如当前那样），并为每个输入value=""从而使管理员不必重新输入所有细节。

问题是我不知道如何结合使用JavaScript和PHP。 我需要一些如何使用JavaScript中的for()循环获取当前行号，然后在PHP变量中使用该行号的方法，如下面的HTML正文中的默认第一行所示。

基本上，如果它是第三行，并且for()循环将其显示为var i = 2 （因为数组从0开始），那么如何使用JavaScript来帮助我调用PHP变量{$item.2.details} 。

我假设我需要为此使用AJAX？ 但是我不知道AJAX。 我希望有人可以协助我完成这项工作，以便我自己和其他人可以学习如何正确地做到这一点。

问题简单地说

如何使用JavaScript变量在HTML文件中选择PHP数组？

JavaScript：

<script type="text/javascript">
window.onload = function loadRows() {
    for( i = 1; i < {$table_rowcount}; i++ ) {

        // Set table id.
        var table = document.getElementById("invoice_items");

        // Count rows.
        var rowCount = table.rows.length;

        // Row to insert into table.
        var row = table.insertRow(rowCount);

        // Cells to insert into row.
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        // Current Row.
        var rowNumber = rowCount + 1;

        // Data in cells.
        cell1.innerHTML = "<textarea name=\"item_details[]\"></textarea>";
        cell2.innerHTML = "<input type=\"text\" name=\"item_quantity[]\" value=\"\" />";
        cell3.innerHTML = "<input type=\"text\" name=\"item_price[]\" value=\"\" />";
    }
}
</script>

HTML：

<form method="post" action="index.php?do=invoices_add">

    <label class="label">
        <div class="left">
            Invoice Items
        </div>
        <table id="invoice_items" cellpadding="0" cellspacing="0" border="0">
            <thead>
                <tr>
                    <td>
                        Item Details
                    </td>
                    <td>
                        Quantity
                    </td>
                    <td>
                        Price
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <textarea name="item_details[]">{$item.0.details}</textarea>
                    </td>
                    <td>
                        <input type="text" name="item_quantity[]" value="{$item.0.quantity}" />
                    </td>
                    <td>
                        <input type="text" name="item_price[]" value="{$item.0.price}" />
                    </td>
                </tr>
            </tbody>
        </table>
        <a href="#invoice_items" onclick="addRows()">+ Add Item</a>
    </label>
    <br/>

    <label class="label">
        <input type="submit" value="submit" name="submit" />
    </label>

</form>

Answer 1

只是为了确保我理解正确：您有输入新行的用户，如果出现错误，他们新输入的行以及他们输入的信息将丢失。 基于此：

我的第一个直觉是通过AJAX发布表单，但是如果您想走PHP路线，建议您研究基于会话的Flash消息 。 您可以使用会话数据发送回已输入的值以及其他错误消息。 我之前已将Flash数据设置为具有“错误”之类的属性名称的对象。 “错误”将是错误消息的数组，但是您也可以设置一个名为“ additionalItem”的属性，并由用户添加新创建的项目。 然后将它们添加到PHP的行迭代中，避免使用JavaScript来构建行的必要。

$flashData = Array("additionalItem" => Array());

for ($_PARAMS["addedRows"] as $row) {
    $flashData["additionalItem"] []= Array(
        "rowDetails" => $row['details'],
        "rowQuantity" => $row['quantity'],
        "rowPrice" => $row['price']
    )
}

我还建议尽可能进行客户端验证。 但是，我也理解可能会出现其他非客户端错误。

如果您必须使用JavaScript进行操作，那么我认为最好的选择是公开要迭代的PHP数组，并将其存储为JavaScript变量（因此，您可能都需要设置闪存数据）。

<script type="text/javascript">
  // I renamed item to items as I am assuming you have an array.
  // This would preferably be an array of items from the server.
  var items = {$items},
      table = document.getElementById("invoice_items");

  window.onload = function loadRows() {
    for (i = 1; i < items.length; i++) {
      var rowCount = table.rows.length,
          row = table.insertRow(rowCount),
          cell1 = row.insertCell(0),
          cell2 = row.insertCell(1),
          cell3 = row.insertCell(2),              
          rowNumber = rowCount + 1;

      cell1.innerHTML = "<textarea name='item_details[]'>" + 
          items[i].details + "</textarea>";
      cell2.innerHTML = "<input type='text' name='item_quantity[]' 
          value='' />";
      cell3.innerHTML = "<input type='text' name='item_price[]' 
          value='' />";
    }
  }
</script>

我希望这会有所帮助，并且我不会误会这个问题:)