通过 Javascript 添加的字段未将数据发布到 $POST答案

【问题标题】：Fields Added Via Javascript not posting Data into $POST通过 Javascript 添加的字段未将数据发布到 $POST
【发布时间】：2022-01-24 15:51:29
【问题描述】：

我创建了一个可以使用包含的按钮动态更改的表单。这些按钮允许添加/删除更多输入字段。问题是创建的输入字段没有发布任何数据/值，这些字段中没有添加到表单提交时的 $POST 数组中。

下面负责添加和删除行的主要函数是 RemoveRows() 和 addRows()

应该发生的是，提交表单中的所有值都应该“发布”，然后我可以通过 $_POST["nameOfField"] 访问所有这些字段。

我目前采用的方法是创建一个具有相关 ID 和名称的输入字段，然后将该字段附加到“硬编码”字段所在的位置。

从我最初的调试开始，通过 javascript 添加的字段都没有在我通过 var_dump($_REQUEST); 进行检查的 $Post 中；

我还看到，即使在开始和结束标记之间添加了节点，添加的节点也不是表单标记的元素。这可以在 doBeforeSubmit() 函数中看到，我们可以在其中看到所有子元素，并且这永远不会随着行的添加/删除而改变。

function showPlatforms() {
  let nacellesOptions = ["Option1", "option2", "Option3"];
  let milOptions = ["Option1", "option2", "Option3"]
  let highOptions = ["Option1", "option2", "Option3"]
  let entry = document.getElementById("vs")
  let platfom = document.getElementById("platform")

  if (platform.hasChildNodes()) {
    var lastChild = platfom.lastElementChild
    while (lastChild) {
      platfom.removeChild(lastChild)
      lastChild = platform.lastElementChild
    }
  }

  if (entry.value == "Nacelles") {
    for (var i = 0; i < 2; i++) {
      var option = document.createElement("option");
      option.value = nacellesOptions[i]
      option.innerHTML = nacellesOptions[i]
      platform.appendChild(option)
    }
  } else if (entry.value == "Military") {
    for (var i = 0; i < 2; i++) {
      var option = document.createElement("option");
      option.value = milOptions[i]
      option.innerHTML = milOptions[i]
      platform.appendChild(option)
    }
  } else {
    for (var i = 0; i < 2; i++) {
      var option = document.createElement("option");
      option.value = highOptions[i]
      option.innerHTML = highOptions[i]
      platform.appendChild(option)
    }
  }


}

function formOptions() {
  let entry = document.getElementById("type")
  if (entry.value == "Engineering MAM") {
    document.getElementById("WBS").disabled = false
    document.getElementById("Desc").disabled = false
    document.getElementById("ProName").disabled = false
  } else {
    document.getElementById("WBS").disabled = true
    document.getElementById("Desc").disabled = true
    document.getElementById("ProName").disabled = true
  }

}

function formoptions2() {
  let entry2 = document.getElementById("organisation")
  if (entry2.value == "Aftermarket") {
    document.getElementById("COT").disabled = false
    document.getElementById("COC").disabled = false
  } else {
    document.getElementById("COT").disabled = true
    document.getElementById("COC").disabled = true

  }

}

count = document.getElementById("partNum").childElementCount

function addRows() {
  rowNames = ["partNum", "partDesc", "leadTime", "quantity", "dateReq", "unitCost", "unitExtention", "unitSaleValue", "estSalesValue"]
  rowNames.forEach(addRow, count)
  count = document.getElementById("partNum").childElementCount
  //doBeforeSubmit() 
}

function doBeforeSubmit() {
  var es = document.getElementById("form").elements;
  var l = es.length;

  var msgs = [];

  for (var idx = 0; idx < l; idx++) {
    var e = es[idx];
    msgs.push('name=' + e.name + ', type=' + e.type + ', value=' + e.value);
  }

  alert(msgs.join('\n'));
  return false;
}

function addRow(id) {
  let col = document.getElementById(id)
  var box = document.createElement("INPUT")
  box.setAttribute("type", "text")
  box.setAttribute("id", id + count)
  box.setAttribute("name", id + count)
  box.setAttribute("class", "form-control")
  col.appendChild(box)
}

function RemoveRows() {
  rowNames = ["partNum", "partDesc", "leadTime", "quantity", "dateReq", "unitCost", "unitExtention", "unitSaleValue", "estSalesValue"]
  rowNames.forEach(removeBoxes)
  count = document.getElementById("partNum").childElementCount
}

function removeBoxes(item) {
  let box = document.getElementById(item)
  let last = box.lastChild
  box.removeChild(last)
}

function checkData() {
  // if all stuff is correct do this:
  document.getElementById("submit").disabled = false

  // else dont activate the submit button.
}

<form method="post" id="form" action="SubmitMAM.php">
  <div class="row" id="productRow" style="width:95%; margin:auto">

    <div id="partNo" class="col-2">
      <h3>Part Number:</h3>


    </div>

    <div class="col-2">
      <h3>Part Description:</h3>

    </div>

    <div class="col-1">
      <h3>Lead Time:</h3>

    </div>

    <div class="col-1">
      <h3>Quantity:</h3>

    </div>

    <div class="col-1">
      <h3>Date Required:</h3>

    </div>

    <div class="col-1">
      <h3>Unit Cost:</h3>

    </div>

    <div class="col-2">
      <h3>Unit Cost Extension:</h3>

    </div>

    <div class="col-1">
      <h3>Unit Sale Value:</h3>

    </div>

    <div class="col-1">
      <h3>Est Sales Value:</h3>
    </div>


  </div>


  <div class="row" id="productRow" style="width:95%; margin:auto">

    <div id="partNum" class="col-2">
      <input type="text" id="partNum0" class="form-control" name="partNum0">
    </div>

    <div id="partDesc" class="col-2">
      <input type="text" id="partDesc0" class="form-control" name="partDesc0">

    </div>

    <div id="leadTime" class="col-1">
      <input type="text" id="leadTime0" class="form-control" name="leadTime0">

    </div>

    <div id="quantity" class="col-1">
      <input type="text" id="quanitity0" class="form-control" name="quantity0">

    </div>

    <div id="dateReq" class="col-1">
      <input type="text" id="dateReq0" class="form-control" name="dateReq0">

    </div>

    <div id="unitCost" class="col-1">
      <input type="text" id="unitCost0" class="form-control" name="unitCost0">

    </div>

    <div id="unitExtention" class="col-2">
      <input type="text" id="unitExtention0" class="form-control" name="unitExtention0">

    </div>

    <div id="unitSaleValue" class="col-1">
      <input type="text" id="unitSaleValue0" class="form-control" name="unitSaleValue0">

    </div>

    <div id="estSalesValue" class="col-1">
      <input type="text" id="estSalesValue0" class="form-control" name="estSalesValue0">
    </div>

    <button onclick="addRows()" class="btn btn-primary" type="button">Add a Product</button>
    <button onclick="RemoveRows()" class="btn btn-primary" type="button">Remove Row</button>
    <button onclick="checkData()" class="btn btn-primary" type="button">Check Data</button>
    <br>
    <button type="submit" name="submit" id="submit" class="btn btn-primary" disabled>Submit</button>
</form>

PHP：

<?php 

var_dump($_REQUEST)

?>

更新：

代码已更改为使用 php 数组，方法是在名称中添加方括号，生成以下 html：

<input type="text" id="partNum0" class="form-control" name="partNum[]">
<input type="text" id="partNum1" name="partNum[]" class="form-control">
<input type="text" id="partNum2" name="partNum[]" class="form-control">

【问题讨论】：

你给自己做的比你需要的要困难得多。您可以使用方括号代替在表单输入的末尾附加数字，例如partNum0。例如partNum[]，PHP 脚本会将它们作为数组读取。至于您的直接问题，我认为您的代码在这方面没有任何明显错误，但我也看不到您的 javascript 生成的 HTML。
我在您的 HTML 中没有看到 platform，因此不确定您在哪里附加输入。确保它在表单中，否则它们将不会包含在表单中。
这里显示的一些函数在手头的问题中发挥的作用并不明显，这表明实际版本中有更多的 HTML / 表单元素。您还重复 ID 属性 productRow 并且似乎后者 <div class="row" id="productRow" style="width:95%; margin:auto"> 未关闭
@GrumpyCrouton 你能进一步解释方括号是如何工作的吗？假设如果所有输入都说 partNum[] 它们存储在我可以循环遍历的某个数组中，我是否正确？
@AmrikAhluwalia 是的。它将存储在一个数组中，如$_POST['partNum']

标签： javascript php html

【解决方案1】：

您只需要使用输入的name 属性并在末尾添加[]，正如GrumpyCrouton 所说。 PHP 将其解析为一个数组，您可以通过以下方式访问它：

$partNum = $_POST["partNum"];

【讨论】：

【解决方案2】：

已修复：事实证明，上述代码的逻辑或工作方式没有任何问题，在 Visual Studio 的源代码中，某些 Div 的缩进关闭，导致浏览器出现渲染问题表单正确，因此为什么添加的框未包含在表单中，并且它们的值未发布。

提醒任何可能有类似问题的人，让您的代码整洁是值得的。

【讨论】：