PHP 无法识别使用 JavaScript 动态添加的字段答案

【问题标题】：PHP doesn't recognize fields dynamically added with JavaScriptPHP 无法识别使用 JavaScript 动态添加的字段
【发布时间】：2014-02-17 12:14:20
【问题描述】：

我有一个 MySQL 订单数据库，每个订单都有与之相关的各种活动。当您单击订单时，我的 PHP/HTML 页面会下拉活动，并允许用户使用表单更改活动的属性。在提交另一个 PHP 文件时，循环遍历表中的活动并在数据库上运行更新查询。效果很好！

我最近添加了一个 JavaScript 函数，它将向列表中添加活动（appendChild、createElement...）。然后，我在我的 PHP 文件中添加了一个 INSERT 新活动查询。

问题是当我运行更新 PHP 文件时，它没有循环通过 JavaScript 添加的新添加记录。我使用<?php print $size = count($_POST['FcastID']) ?> 进行了检查，添加记录后该值没有改变。

添加到表中的记录看起来很好，并且 id 和名称约定与其他记录匹配。似乎需要在 PHP 文件运行之前刷新页面。

动态创建 html 表单的 PHP 文件

<div id="submit"><form method="post" action="Up_Forecast.php"><input type="submit" value="Submit"></div>
....
<table id="fcast">
<?
$i=0;
while($row = mysqli_fetch_array($res_fcast))
{
echo "<tr id='fcastRow[$i]'>";
echo "<td class='medium'><input type='text' id='qtyJan[$i]' name='qtyJan[$i]' value='".$row[Jan]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyFeb[$i]' name='qtyFeb[$i]' value='".$row[Feb]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyMar[$i]' name='qtyMar[$i]' value='".$row[Mar]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyApr[$i]' name='qtyApr[$i]' value='".$row[Apr]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyMay[$i]' name='qtyMay[$i]' value='".$row[May]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyJun[$i]' name='qtyJun[$i]' value='".$row[Jun]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyJul[$i]' name='qtyJul[$i]' value='".$row[Jul]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyAug[$i]' name='qtyAug[$i]' value='".$row[Aug]."'/></td>";
echo "<td class='medium'><input type='text' id='qtySep[$i]' name='qtySep[$i]' value='".$row[Sep]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyOct[$i]' name='qtyOct[$i]' value='".$row[Oct]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyNov[$i]' name='qtyNov[$i]' value='".$row[Nov]."'/></td>";
echo "<td class='medium'><input type='text' id='qtyDec[$i]' name='qtyDec[$i]' value='".$row[Dec]."'/></td>";
echo "<td class='medium'><input type='text' id='Totalqty[$i]' name='Totalqty[$i]' value='".$row[Total]."' disabled/></td>";
echo "</tr>";
++$i;
}
?>
<tr><td class="blank"></td><td class="mini"><input type="button" onclick="addRowYear(this)" value="Add"/></td></tr>
</table>
</form>
</div>

添加行的Javascript函数

function addRowYear(lastRow){
    var rowNo = lastRow.parentNode.parentNode.rowIndex;
    var newRow = document.getElementById("fcast").insertRow(rowNo);

    newRow.setAttribute("id","fcastRow["+rowNo+"]");

    var cell0 = newRow.insertCell(0);
    cell0.setAttribute("class","mini");
var input0 = document.createElement("input");
    input0.setAttribute("type","text");
    input0.setAttribute("name","FcastID["+rowNo+"]");
    input0.setAttribute("value","new");
    cell0.appendChild(input0);

var cell1 = newRow.insertCell(1);
    cell1.setAttribute("class","mini");
var input1 = document.createElement("input");
    input1.setAttribute("type","text");
    input1.setAttribute("name","Fcast_ActID["+rowNo+"]");
    input1.setAttribute("id","Fcast_ActID["+rowNo+"]");
    cell1.appendChild(input1);
var curAct = document.getElementById("selAct").innerHTML;
    document.getElementById("Fcast_ActID["+rowNo+"]").value = curAct;

var cell2 = newRow.insertCell(2);
    cell2.setAttribute("class","mini");
var input2 = document.createElement("input");
    input2.setAttribute("type","text");
    input2.setAttribute("name","Year["+rowNo+"]");
    cell2.appendChild(input2);

var month = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
for (var i = 0; i < month.length; i++) {
//alert(month[i]);
    x=3;
var cell = newRow.insertCell(x);
    cell.setAttribute("class","medium");
var input = document.createElement("input");
    input.setAttribute("type","text");
    input.setAttribute("class","numbers");
    input.setAttribute("name","qty"+month[i]+"["+rowNo+"]");
    input.setAttribute("id","qty"+month[i]+"["+rowNo+"]");
    input.setAttribute("onkeyup","findTotal()");
    cell.appendChild(input);
    x=x+1;
    }

var cell15 = newRow.insertCell(15);
    cell15.setAttribute("class","medium");
var input15 = document.createElement("input");
    input15.setAttribute("type","text");
    input15.setAttribute("class","numbers");
    input15.setAttribute("name","Totalqty["+rowNo+"]");
    input15.setAttribute("id","Totalqty["+rowNo+"]");
    cell15.appendChild(input15);

PHP 更新 - 提交表单时调用

$size = count($_POST['FcastID']);
$i = 0
while ($i < $size) {
    $FcastID = $_POST['FcastID'][$i];
    $ActID = $_POST['Fcast_ActID'][$i];
    $Year = $_POST['Year'][$i];
    $Jan = $_POST['qtyJan'][$i];
    $Feb = $_POST['qtyFeb'][$i];
    $Mar = $_POST['qtyMar'][$i];
    $Apr = $_POST['qtyApr'][$i];
    $May = $_POST['qtyMay'][$i];
    $Jun = $_POST['qtyJun'][$i];
    $Jul = $_POST['qtyJul'][$i];
    $Aug = $_POST['qtyAug'][$i];
    $Sep = $_POST['qtySep'][$i];
    $Oct = $_POST['qtyOct'][$i];
    $Nov = $_POST['qtyNov'][$i];
    $Dec = $_POST['qtyDec'][$i];
    $Total = $_POST['Totalqty'][$i];
    $update = "UPDATE FCAST SET
    Year='$Year',
    Jan=replace('$Jan',',',''),
    Feb=replace('$Feb',',',''),
    Mar=replace('$Mar',',',''),
    Apr=replace('$Apr',',',''),
    May=replace('$May',',',''),
    Jun=replace('$Jun',',',''),
    Jul=replace('$Jul',',',''),
    Aug=replace('$Aug',',',''),
    Sep=replace('$Sep',',',''),
    Oct=replace('$Oct',',',''),
    Nov=replace('$Nov',',',''),
    `Dec`=replace('$Dec',',',''),
    Total=replace('$Total',',','')
    WHERE
    FcastID='$FcastID'";
    mysqli_query($link, $update);

【问题讨论】：

所以，如果您阅读其他问题 - 您知道我们肯定会要求提供代码。
你能提供你的代码吗？
欢迎您。如果您可以提供一些代码来帮助其他人理解您的问题，那就更好了。您将增加获得有用答案的机会。
-1 表示不发布代码。
在操作 url 文件中打印您的 $_POST 变量。也许它会给你一个线索。并且为新用户 +1，即使代码丢失。

标签： javascript php html mysql

【解决方案1】：

没有看到你的代码，很难说。我过去使用过的效果很好的东西如下：

PHP：

foreach($_POST as $key => $value) {
    //... $key is name of field, $value is the value
}

这会遍历提交表单中的每个单独字段并读取每个字段中的值。我已经将这个精确的脚本用于动态创建的表单，并且效果很好。但是，您必须小心，如果您对不同的字段使用相同的名称，则值将存储为数组。

编辑

HTML：

<form method="post" action="index.php">
<div>
  <div>
    <p>
    <label class="reg_label" for="field_name">Item:</label>
    <input class="text_area" name="field_name[]" type="text" id="testing" tabindex="98" style="width: 150px;"/>
    </p>
  </div>
</div>
<input type="button" id="btnAdd" value="Add" class="someClass1"/>
<input type="button" id="btnDel" value="Remove" class="someClass2" disabled/><br><br>
<input type="submit" id="submit" name="submit" value="Submit">
</form>

JavaScript：

var j = 0;
$(document).ready(function () {
    $('.someClass1').click(function (e) {

        var num = $(this).prev().children().length; 
        var newNum = new Number(num + 1); 

        var newElem = $(this).prev().children(':last').clone().attr('id', 'input' + newNum);

        if(newElem.children().children().last().hasClass('otherOption')){
            newElem.children().children().last().remove();
        }

        newElem.children().children().each(function(){
            var curName = $(this).attr('name');
            var newName = '';
            $(this).attr('id', 'name' + num + '_' + j);
            j++;
        });

        newElem.children().children().each(function(){
            $(this).removeAttr('value');
        });

        $(this).prev().children(':last').after(newElem);

        $(this).next().removeAttr('disabled');
    });

    $('.someClass2').click(function (e) {
        var num = $(this).prev().prev().children().length; 

        $(this).prev().prev().children(':last').remove(); 
        if (num - 1 == 1) $(this).attr('disabled', 'disabled');
    }); 
});

了解 JavaScript 代码的工作原理并不是那么重要。您需要知道的是，单击“添加”按钮将复制该字段，单击“删除”将删除最近添加的字段。在提供的链接上尝试一下。

PHP：

这就是魔法发生的地方……

<?php 
if(isset($_POST['submit'])){
    foreach($_POST as $name => $item){
        if($name != 'submit'){
            for($m=0; $m < sizeof($item); $m++){
                echo ($name.' '.$item[$m].'<br>');
            }
        }
    }
}
?>

看起来很简单，对吧？

此 PHP 代码与表单在同一个文件中，因此首先我们通过检查提交按钮的名称 if(isset($_POST['submit'])){…} 来检查表单是否已提交。

如果表单已提交，请检查每个提交的项目foreach($_POST as $name => $item){…}。

提交按钮算作提交的字段之一，但我们对存储该值不感兴趣，因此请检查以确保您正在读取的值不是来自提交按钮if($name != 'submit'){…}。

最后，此表单中的所有字段都具有相同的名称field_name[]。方括号用于具有相同名称的多个项目。然后将它们存储在一个数组中。通读该数组中的每个项目以获取数组for($m=0; $m < sizeof($item); $m++){…} 的长度，然后对每个值执行您想要的操作。在这种情况下，我只是将它们打印到屏幕上echo ($name.' '.$item[$m].'<br>');

以下是页面的几个屏幕截图……

提交表单之前：

提交表单后：

您可以到页面查看代码（右键单击-> 查看源代码），但 PHP 不会显示在源代码中。我向你保证，上面显示了所有用于此的 PHP - 只是几行。

如果每个项目都有一个完全唯一的名称（您可以在添加字段时通过 JavaScript 实现），那么您将不需要遍历值数组（即不需要 for($m=0; $m < sizeof($item); $m++){…} 块）。相反，您可能会使用简单的$item 来读取该值。如果你用方括号命名你的字段（即field_name[]），但只有一个字段，那么读取一个奇异值可能需要$item或$item[0]。在这种情况下，您只需要对其进行测试并查看即可。某些字段类型的行为与其他字段类型不同（即输入、文本区域、单选按钮等）。

整件事

这里是 index.php 的完整代码 - 您可以复制并粘贴它并在您自己的服务器上运行它。只要确保更改action属性<form>标签中的文件名...

<?php 
if(isset($_POST['submit'])){
    foreach($_POST as $name => $item){
        if($name != 'submit'){
            for($m=0; $m < sizeof($item); $m++){
                echo ($name.' '.$item[$m].'<br>');
            }
        }
    }
}
?>

<html>
<head>
<script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
</head>
<body>

<form method="post" action="index.php">
<div>
  <div>
    <p>
    <label class="reg_label" for="field_name">Item:</label>
    <input class="text_area" name="field_name[]" type="text" id="testing" tabindex="98" style="width: 150px;"/>
    </p>
  </div>
</div>
<input type="button" id="btnAdd" value="Add" class="someClass1"/>
<input type="button" id="btnDel" value="Remove" class="someClass2" disabled/><br><br>
<input type="submit" id="submit" name="submit" value="Submit">
</form>

</body>

<script>
var j = 0;
$(document).ready(function () {
    $('.someClass1').click(function (e) {

        var num = $(this).prev().children().length; 
        var newNum = new Number(num + 1); 

        var newElem = $(this).prev().children(':last').clone().attr('id', 'input' + newNum);

        if(newElem.children().children().last().hasClass('otherOption')){
            newElem.children().children().last().remove();
        }

        newElem.children().children().each(function(){
            var curName = $(this).attr('name');
            var newName = '';
            $(this).attr('id', 'name' + num + '_' + j);
            j++;
        });

        newElem.children().children().each(function(){
            $(this).removeAttr('value');
        });

        $(this).prev().children(':last').after(newElem);

        $(this).next().removeAttr('disabled');
    });

    $('.someClass2').click(function (e) {
        var num = $(this).prev().prev().children().length; 

        $(this).prev().prev().children(':last').remove(); 
        if (num - 1 == 1) $(this).attr('disabled', 'disabled');
    }); 
});
</script>

</html>

【讨论】：

我想尝试一下，但我无法将它应用到我的情况。自从您回答以来，我已经发布了代码，您认为您可以给我一些指示。
@Brian.k 刚刚为您编辑了我的答案。请通读并尝试一下。如果您在任何地方卡住，请告诉我。如果解决方案有效，请接受和/或投票。
我没有使用您的 HTML 代码，也没有使用您的 JavaScript 代码。如何您制作表单和字段并不重要，只要您 a) 创建具有真正唯一名称的字段，或 b) 使用 [] 创建具有相同名称的字段。之后通读与提供的 PHP 代码相同。根据需要进行修改以适合您的解决方案。
我昨晚用我所有的相同代码让它工作了，但是通过将</form>标签移动到</body>标签之前的最后一个标签。我不确定为什么要修复它，因为 </form> 标记总是在表格之后。 @Birrel 感谢您的详细回答并已接受。