javascript - PHP 无法识别使用 JavaScript 动态添加的字段

标签 javascript php html mysql

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

我最近添加了一个 JavaScript 函数，可以将事件添加到列表中(appendChild、createElement...)。然后我将 INSERT 添加到我的 PHP 文件中查询新事件。

问题是，当我运行更新 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);

最佳答案

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

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>');

下面是页面的几个屏幕截图......

提交表单之前:

Before

提交表单后:

After

您可以转到该页面并查看代码(右键单击 -> 查看源代码)，但 PHP 不会显示在源代码中。我向您保证，用于此目的的所有 PHP 都在上面显示 - 只是几行。

如果每个项目都有一个完全唯一的名称(您可以在添加字段时通过 JavaScript 实现)，那么您将不需要遍历值数组(即不需要 for($m=0; $m < sizeof($item); $m++){…} block )。相反，您可能会简单地使用 $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>

关于javascript - PHP 无法识别使用 JavaScript 动态添加的字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21367618/

上一篇：php - SQL语句存储在单独的文件夹中

下一篇：mysql - 从 Filemaker 导出到 MySQL...2014 年

相关文章：

php - 我什么时候应该在 mvc 中使用多个 Controller ？

php - 我如何从另一台电脑访问第二个 laravel 应用程序

php - $_POST 未收到所有值

html - 如何使用 Canvas 减少从中心到起始角度的线条大小？

javascript - 更改父类的功能未按预期工作

javascript - VS代码 : Disable HTML Auto Closing Tags only for Javascript files

PHP 邮件发送不出去，我该如何调试？

php - 如何获取当前访问的html页面并存储在php my sql中

javascript - Sublime Text 2 js/jsx 文件中的 html 自动完成

javascript - localStorage 保存 HTML 克隆

©2024 IT工具网  联系我们