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

时间：2014-01-26 18:43:17

标签： javascript php html mysql

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

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

问题在于，当我运行更新PHP文件时，它不会循环使用JavaScript添加的新添加的记录。我使用<?php print $size = count($_POST['FcastID']) ?>进行了检查，并且在添加记录时值不会发生变化。

添加到表中并且id和name约定与其他记录匹配时，记录看起来很好。在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 个答案:

答案 0 :(得分：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>');

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

在提交表格之前：

Before

提交表格后：

After

您可以转到该页面并查看代码（右键单击 - ＆gt;查看源代码），但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>
相关问题
最新问题