使用 Javascript/JQuery，如何读取和分析 PHP 创建的 HTML 表单数据（多维数组）？

Using Javascript/JQuery, how can I read and analyse HTML form data (multi-dimensional array) created by PHP?

提问人：Andreas BB 提问时间：10/20/2023 更新时间：10/20/2023 访问量：37

问：

我正在努力从 Javascript/Jquery 中的 HTML 表单中读取和操作数据。

上下文：我有一个显示多个产品的销售屏幕，我想遍历它们，分析它们的内容，并在购物车中显示一些数据。

请原谅我对JS的缺乏了解！！

考虑一下这个 HTML 代码（完整的表单对于每个产品都有更多的变量，所以我在这里进行了简化）：

  <input type='text' name='sales[1][qty]' value='10.5' />
  <input type='text' name='sales[1][price]' value='21' />
  <input type='text' name='sales[1][name]' value='Product A' />
  <input type='hidden' name='sales[1][purchaseid]' value='3530' />
  
  <input type='text' name='sales[2][qty]' value='' />
  <input type='text' name='sales[2][price]' value='' />
  <input type='text' name='sales[2][name]' value='Product B' />
  <input type='hidden' name='sales[2][purchaseid]' value='3531' />
  
  <input type='text' name='sales[3][qty]' value='2' />
  <input type='text' name='sales[3][price]' value='10' />
  <input type='text' name='sales[3][name]' value='Product C' />
  <input type='hidden' name='sales[3][purchaseid]' value='3532' />
  
  <input type='text' name='sales[4][qty]' value='' />
  <input type='text' name='sales[4][price]' value='' />
  <input type='text' name='sales[4][name]' value='Product D' />
  <input type='hidden' name='sales[4][purchaseid]' value='3533' />

当有人单击购物车按钮时，我想遍历 sales[][] 数组中的所有条目，并仅显示“数量”或“价格”不为空的产品。流程如下所示：

  1. 遍历所有 sales[][qty] 和 sales[][price] 值。如果任一不为空，则返回 sales[] 中的键。

  2. 在上面的 HTML 代码中，只有 products sales[1] 和 sales[3] 具有这些值。所以我想返回 1 和 3。

  3. 从这些键中读取数据并将其显示在 HTML 表中。例如，由于只有键 1 和 3 不为空，我想读取 sales[1][qty]、sales[1][price]、sales[1][name]、sales[1][purchaseid] 的值以及 sales[3][qty]、sales[3][price]、sales[3][name]、sales[3][purchaseid] 的值。

  4. 将它们呈现在 HTML 表格中，如下所示：

     <table>
<tr>
 <td>ID</td>
 <td>Name</td>
 <td>Quantity</td>
 <td>Price</td>
</tr>
<tr>
 <td>3530</td>
 <td>Product A</td>
 <td>10.5</td>
 <td>21</td>
</tr>
<tr>
 <td>3532</td>
 <td>Product C</td>
 <td>2</td>
 <td>10</td>
</tr>

提交表单时，我可以在 PHP 中轻松完成此操作 - 但这里的想法是不提交表单，这意味着 JS 必须完成这项工作。在PHP中，我会按照以下思路进行：

        foreach($_POST['sales'] as $sale) {
        
        $qty = $sale['qty'];
        $price = $sale['price'];
        $name = $sale['name'];
        $purchaseid = $sale['purchaseid'];
        
        if ($qty > 0 || $price > 0) {
            
            $tableRow .= "<tr><td>$purchaseid</td><td>$name</td><td>$qty</td><td>$price</td></tr>";
            
        }
        
    }

我已经搜索并发现了如何使用以下代码简单地从 HTML 表单中获取名称和值，但它对我上面的第 2 点和第 3 点没有帮助：

    function testCart() {
    
    var str = '';
    var elem = document.getElementById('registerForm').elements;
    
    for(var i = 0; i < elem.length; i++)
    {
                str += "<b>Name:</b>" + elem[i].name + " - ";
                str += "<b>Value:</b>" + elem[i].value + "<br />";
    }
    
    document.getElementById('myCart').innerHTML = str;
    
}

有人可以给我任何关于如何进行这项工作的指示吗？

谢谢！

JavaScript jQuery 表单 多维数组 数据结构

评论

答：

2赞 CBroe 10/20/2023 #1

一种方法是在循环中简单地使用动态属性选择器。

我们尝试首先找到该字段，如果存在，我们检查该值是否不为空，并读取同一索引的相应其他字段值。name='sales[1][qty]'

我在这里放置了一个简单的控制台.log语句来显示浏览器控制台中的值 - 您必须用该数据实际填充表来替换该部分。

在循环结束时，我们将索引增加 1，并尝试在下一次迭代中找到下一个数量字段。一旦我们再也找不到了，就该打破循环了。

let i = 1;
while (true) {
  let qtyField = document.querySelector('[name="sales[' + i + '][qty]"]');
  if (!qtyField) {
    break;
  }

  let qty = qtyField.value,
    name = document.querySelector('[name="sales[' + i + '][name]"]').value,
    price = document.querySelector('[name="sales[' + i + '][price]"]').value,
    id = document.querySelector('[name="sales[' + i + '][purchaseid]"]').value;
  if (qty != '' || price != '') {

    console.log("Product:", id, name, price, qty);
  }
  ++i;
}
<input type='text' name='sales[1][qty]' value='10.5' />
<input type='text' name='sales[1][price]' value='21' />
<input type='text' name='sales[1][name]' value='Product A' />
<input type='hidden' name='sales[1][purchaseid]' value='3530' />

<input type='text' name='sales[2][qty]' value='' />
<input type='text' name='sales[2][price]' value='1' />
<input type='text' name='sales[2][name]' value='Product B' />
<input type='hidden' name='sales[2][purchaseid]' value='3531' />

<input type='text' name='sales[3][qty]' value='2' />
<input type='text' name='sales[3][price]' value='10' />
<input type='text' name='sales[3][name]' value='Product C' />
<input type='hidden' name='sales[3][purchaseid]' value='3532' />

<input type='text' name='sales[4][qty]' value='' />
<input type='text' name='sales[4][price]' value='' />
<input type='text' name='sales[4][name]' value='Product D' />
<input type='hidden' name='sales[4][purchaseid]' value='3533' />

评论

0赞 Andreas BB 10/20/2023
谢谢 - 这很好用！但是，它只检查“数量”输入，而不是“价格”。如果产品有“价格”（但没有“数量”），我仍然希望它退回并显示。有没有一种简单的方法来操作您的代码来检查数量和价格？
1赞 CBroe 10/20/2023
啊，对不起，我忽略了你问题中的价格部分。我相应地修改了示例。（我在这里也移出了 if 条件的 name 和 purchase-id 字段值的读取 - 虽然不需要这些值，但如果数量和价格都没有填充，这些操作非常便宜，将它们分成两部分真的没有多大意义。我已将产品的价格修改为 1 而不是空，以便您立即在控制台中看到结果。B
0赞 Andreas BB 10/20/2023
你是我的英雄！:-)真的，非常感谢！
1赞 Diego D 10/20/2023 #2

这是另一种使用 jQuery 并遍历属性设置为后跟 or 的输入元素的方法。namesales[#][qty][#][price]

坦率地说，这是浪费精力，因为索引之间没有预期的间隙，对于这些元素，它们应该是一个连续的数字列表。

$(document).ready(function() {
    var validSales = [];

    //the most safest approach to loop through elements having name attr starting by sales[
    $("input[name^='sales[']").each(function() {
        
        var name = $(this).attr('name');
        var match = name.match(/sales\[(\d+)\]\[(qty|price)\]/);
        
        //check if the name attribute actually refers to the indexes qty or price, and the corresponding element value is set
        if (match) {
            var index = match[1];
            if ($(this).val() && !validSales.includes(index)) {
                //if it does, push the index into the validSales array
                validSales.push(index);
            }
        }
    });        

    //now for each index pushed into validSales
    validSales.forEach(function(index) {
        //retrieves the values of qty, price, name, purchaseid belonging to such id
        var qty = $(`input[name='sales[${index}][qty]`).val();
        var price = $(`input[name='sales[${index}][price]`).val();
        var name = $(`input[name='sales[${index}][name]`).val();
        var purchaseid = $(`input[name='sales[${index}][purchaseid]`).val();                        
        
        var row = `<tr><td>${purchaseid}</td><td>${name}</td><td>${qty}</td><td>${price}</td></tr>`;
        $("#myCart").append(row);
    });
});
table#myCart{
  margin-top: 1em;
}

table#myCart td{
  border: solid 1px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input type='text' name='sales[1][qty]' value='10.5' />
<input type='text' name='sales[1][price]' value='21' />
<input type='text' name='sales[1][name]' value='Product A' />
<input type='hidden' name='sales[1][purchaseid]' value='3530' />

<input type='text' name='sales[2][qty]' value='' />
<input type='text' name='sales[2][price]' value='' />
<input type='text' name='sales[2][name]' value='Product B' />
<input type='hidden' name='sales[2][purchaseid]' value='3531' />

<input type='text' name='sales[3][qty]' value='2' />
<input type='text' name='sales[3][price]' value='10' />
<input type='text' name='sales[3][name]' value='Product C' />
<input type='hidden' name='sales[3][purchaseid]' value='3532' />

<input type='text' name='sales[4][qty]' value='' />
<input type='text' name='sales[4][price]' value='' />
<input type='text' name='sales[4][name]' value='Product D' />
<input type='hidden' name='sales[4][purchaseid]' value='3533' />

<!-- myCart table element -->
<table id="myCart">
  <tr>
    <td>qty</td>
    <td>price</td>
    <td>name</td>
    <td>purchaseid</td>
  </tr>
</table>

上一个：单击提交按钮后，在 URL 中获取“？”。preventDefault 存在于 jQuery 中。认为html注入是问题

下一个：设置 Google 表单样式