javascript - 使用 JS 动态添加输入然后使用 PHP 查找？

Question

第 1 部分:(JS)

这解释起来有点困惑……我实际上已经完成了第一部分……JS 在这里，这个问题已经在 StackOverflow 上以几种不同的方式被问到(还没有看到第二部分虽然这个问题)......但我似乎无法在 JS 部分使用这个 for 循环:

http://jsfiddle.net/aqbdfenw/

function add_fields() {
  var toAdd = document.createDocumentFragment();
  for (var i = 1; i < 2; i++) {
    var newRow = document.createElement('div');
    var inTxtID = 'custom-item-' + i;
    var inNumID = 'custom-amount-' + i;
    var inTxtName = 'custom_item_' + i;
    var inNumName = 'custom_amount_' + i;
    newRow.className = 'row';
    newRow.innerHTML = '<span><input type="text" placeholder="Item" name="' + inTxtName + '" id="' + inTxtID + '"></span><span><input type="number" placeholder="Amount" name="' + inNumName + '" id="' + inNumID + '"></span>';
    document.getElementById('wrapper').appendChild(newRow);
  }

  document.appendChild(toAdd);

}

我的错误似乎与此有关......

for (var i = 1; i < 2; i++) {

...如果我制作中间部分 i < 10然后它在技术上起作用，它只是一次吐出所有输入，这是我不想要的。

它添加了 div，但我需要为每个新的 div 计算 id 和名称...不知道如何让它工作。

第 2 部分:(PHP)

在 PHP 方面...表单显然会张贴名称，我可以这样捕捉名称:

if (!empty($_POST['custom_item_1']) && !empty($_POST['custom_amount_1'])) { 
    $receive_custom_item = $_POST['custom_item_1']; 
    $receive_custom_amount = $_POST['custom_amount_1']; 
}

但是，假设在 JS 方面添加了 3 个项目/数量，显然我们知道发布了 3 个项目/数量可供 PHP 获取...但是我如何找出有多少元素可用？

伪代码:

$i == 1;
$custom_amount_check = 'custom_amount_';
$custom_item_check = 'custom_item_';

for each (if ($custom_amount_check + i) exists) {
    $receive_custom_item = $_POST['custom_item_1']; 
            $receive_custom_amount = $_POST['custom_amount_1']; 
    }
    i++;
}

一定是这样的吧？

不过我发现我的方法有问题...如果一个输入为空，它会停在那里，所以如果有人添加了 3 个，并且由于某种原因只填写了最后 2 个，那么它不会读取它们全部？

---

我知道我不能允许在 JS 中添加超过 10 个输入，然后只有 1 到 10 !empty()是在 PHP 中...但我觉得这太草率了？

这对我来说也是一次学习经历，所以我不希望任何人为我做这项工作，但如果您能解释一下您认为如何完成这项工作，我将不胜感激。

---

编辑:

// create custom field variables
$iCheck = 1;
while ((isset($_POST['custom_item_' . $iCheck]) && isset($_POST['custom_amount_' . $iCheck])) || (isset($_GET['ci' . $iCheck]) && isset($_GET['ca' . $iCheck]))) {
    if (!empty($_POST['custom_item_' . $iCheck]) && !empty($_POST['custom_amount_' . $iCheck])) {
        $receive_custom_item_ . $iCheck = safify($_POST['custom_item_' . $iCheck]);
        $receive_custom_amount_ . $iCheck = safify($_POST['custom_amount_' . $iCheck]); 
    } else if (!empty($_GET['ci' . $iCheck]) && !empty($_GET['ca' . $iCheck])) {
        $receive_custom_item_ . $iCheck = safify($_GET['ci' . $iCheck]);
        $receive_custom_amount_ . $iCheck = safify($_GET['ca' . $iCheck]); 
    }
    if (isset($receive_custom_item_ . $iCheck) && isset($receive_custom_amount_ . $iCheck)) {
        echo '<p>' . $receive_custom_item_ . $iCheck . ' & ' . $receive_custom_amount_ . $iCheck . '</p>';
    }
    $iCheck++;
}

Answer 1

第 1 部分:(JS)

您需要函数外的 JS 计数器。如果您的表单以多个条目开始，请增加起始值以匹配计数。每次调用都会加1，添加到页面中。

var iCount = 1;

function add_fields() {
  var toAdd = document.createDocumentFragment();
  iCount++;

  var newRow = document.createElement('div');
  var inTxtID = 'custom-item-' + iCount;
  var inNumID = 'custom-amount-' + iCount;
  var inTxtName = 'custom_item_' + iCount;
  var inNumName = 'custom_amount_' + iCount;
  newRow.className = 'row';
  newRow.innerHTML = '<span><input type="text" placeholder="Item" name="' + inTxtName + '" id="' + inTxtID + '"></span><span><input type="number" placeholder="Amount" name="' + inNumName + '" id="' + inNumID + '"></span>';
  document.getElementById('wrapper').appendChild(newRow);
  document.appendChild(toAdd);
}

第 2 部分:(PHP)

循环直到找到第一个“缺失”值。如果您不允许用户在提交前从页面中删除项目，这将起作用。

$i = 1;
$custom_amount_check = 'custom_amount_';
$custom_item_check = 'custom_item_';

while (isset($_POST[$custom_item_check . $i])) {
    $receive_custom_item = $_POST[$custom_item_check . $i]; 
    $receive_custom_amount = $_POST[$custom_amount_check . $i]; 
    //do something with these variables (since they'll be overwritten on next loop)

    i++;
}