Question

第1部分：（JS）

这有点令人困惑地解释......我实际上已经完成了第一部分... JS就在这里，问题已经在StackOverflow上被问了几个不同的方法（还没有看到第二部分这个问题虽然）...但我似乎无法在JS部分的东西中获得这个循环：

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个输入，然后在PHP中只有1到10个!empty() ...但是这对我来说感觉很邋？ / p>

这对我来说也是一次学习经历，所以我不希望任何人为我做这项工作，但我很感激您对如何做到这一点的解释。

编辑：

// 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++;
}

Answer 2

对于JavaScript部分，请参阅：

http://jsfiddle.net/aqbdfenw/1/

// Lets use a global variable here
window.INPUTCOUNT = 0;

function add_fields() {
  var toAdd = document.createDocumentFragment();
    var newRow = document.createElement('div');
    var inTxtID = 'custom-item-' + window.INPUTCOUNT;
    var inNumID = 'custom-amount-' + window.INPUTCOUNT;
    var inTxtName = 'custom_item_' + window.INPUTCOUNT;
    var inNumName = 'custom_amount_' + window.INPUTCOUNT;
    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);

    // Magic Happens here as we tell our global scoped counter to increment
    window.INPUTCOUNT += 1;

}

我所做的是设置一个窗口范围的计数器来跟踪您的输入。每次添加输入时，它都会计数。这将允许您跟踪输入和动态创建的总数。你的for循环工作正常。当你有i < 10时，与i < 2运行的单次相比，它会运行10次。对DOM的更新，其中包括＆＃34; All all＆＃34;因为您在该循环之外调用document.appendChild(toAdd);时一次插入所有10个输入。

我不是PHP开发人员，所以我对第2部分没什么帮助，但是如果需要的话，你总是可以把它放在另一个问题上。

Answer 3

我在你的Jsfiddle中编辑了Javascript，现在它正在运行：

var i = 2;
function add_fields() {
var toAdd = document.createDocumentFragment();

if(i < 5) {
   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);
  i++;
}
document.appendChild(toAdd);


}

http://jsfiddle.net/aqbdfenw/3/

所以i必须从2开始，因为您已经有1个输入字段，其ID为custom-amount-1，而您只需编辑if包含您要打印的字段数

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

3 个答案: