javascript - 在 PHP 中记录动态输入值

Question

我有一个相当大的表单，其中几个页面利用一些 JS 来动态添加输入，每当用户单击加号按钮时，允许他们添加额外的作业和你有的东西。

我已经可以使用表单的那部分了。我的问题在于 try catch PHP 文档中的动态字段。我似乎只获取输入到表单中的第一个值，而没有从动态添加的输入中获取任何内容。

我尝试过的

我已经分离了具有两个此类输入的表单页面，并 try catch PHP 中的第一级输入。这工作正常。

我不确定的是:

如何在 PHP 中创建变量或变量的潜力，以便稍后在 PHP 中获取它们？

我在这里重新创建了示例，但只有第一个问题允许动态输入。我只包含了一个 js 文件:

http://codepen.io/theodore_steiner/pen/xEyzNm?editors=1010

HTML:
 <form action="putToToCSV.php" method="post" class="scholarshipForm">

                <div class="input-group" id="unit-level-involvement">
                    <label id="unitInvolvement">Unit Involvement *</label>
                    <div id="unitLevelInvolvement">
                        <input type="text" class="two-lines-textbox" name="unitLevelPosition[1]" placeholder="Position/Committee" onBlur="this.placeholder='Position/Committee'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />
                        <input type="text" class="two-lines-textbox" name="oectaUnit_1" id="oectaUnit_1" placeholder="Unit" onBlur="this.placeholder='Unit'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />

                        <div class="clearFix"></div>

                        <input type="text" class="two-lines-textbox" name="unitPresident_1" id="unitPresident_1" placeholder="Unit President" onBlur="this.placeholder='Unit President'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />
                        <input type="date" class="two-lines-textbox" name="unitYear_1" id="unitYear_1" onKeyUp="checkPage3()" />
                        <input type="button" value="+" onClick="addUnitInvolvement()" />
                    </div>
                 </div><!-- end of unit-level-involvement div-->

    </form><!--endForm-->

JS:

var i = 0;
function addUnitInvolvement()
{
    i++;
    var unitInvolvementDiv = document.createElement("div");
    unitInvolvementDiv.innerHTML = '<input type="text" class="four-lines" name="unitLevelPosition_'+i+'" placeholder="Position/Committee">  <input type="text" class="four-lines" name="oectaUnit_'+i+'" placeholder="Unit"> <input type="text" class="four-lines" name="unitPresident_'+i+'" placeholder="Unit President"> <input type="date" class="four-lines" name="unitYear_'+i+'"> <input type="button" value="-" onclick="removeUnitInvolvement(this)">';

    document.getElementById("unitLevelInvolvement").appendChild(unitInvolvementDiv);
}

function removeUnitInvolvement(unitInvolvementDiv)
{
    document.getElementById("unitLevelInvolvement").removeChild(unitInvolvementDiv.parentNode);
};

PHP:

<?php


$unitLevelPosition_1 = $_POST["unitLevelPosition_1"];

$oectaUnit_1 = $_POST["oectaUnit_1"];

$unitPresident_1 = $_POST["unitPresident_1"];

$unitYear_1 = $_POST["unitYear_1"];

$provincialPosition_1 = $_POST["provincialPosition_1"];

$provincialDate_1 = $_POST["provincialDate_1"];

$piText_1 = $_POST["piText_1"];


echo $unitLevelPosition_1 . "<br>" . $oectaUnit_1 . "<br>" . $unitPresident_1 . "<br>" . $unitYear_1 . "<br>" . $provincialPosition_1 . "<br>" . $provincialDate_1 . "<br>" . $piText_1;

?>

Answer 1

您可以使用数组语法 - 例如name="unitLevelPosition[]" 那么当在 PHP 中提交表单时，您可以使用 $_POST['unitLevelPosition'] 作为数组。我尝试寻找信誉良好的资源，但没有找到太多。不过，看看this page ，以及this one (我知道这与复选框有关，但概念是相同的)。

var i = 0;
function addUnitInvolvement()
{
    i++;
    var unitInvolvementDiv = document.createElement("div");
    unitInvolvementDiv.innerHTML = '<input type="text" class="four-lines" name="unitLevelPosition[]" placeholder="Position/Committee">  <input type="text" class="four-lines" name="oectaUnit[]" placeholder="Unit"> <input type="text" class="four-lines" name="unitPresident[]" placeholder="Unit President"> <input type="date" class="four-lines" name="unitYear[]"> <input type="button" value="-" onclick="removeUnitInvolvement(this)">';

    document.getElementById("unitLevelInvolvement").appendChild(unitInvolvementDiv);
}

function removeUnitInvolvement(unitInvolvementDiv)
{
    document.getElementById("unitLevelInvolvement").removeChild(unitInvolvementDiv.parentNode);
};

<form action="putToToCSV.php" method="post" class="scholarshipForm">

                <div class="input-group" id="unit-level-involvement">
                    <label id="unitInvolvement">Unit Involvement *</label>
                    <div id="unitLevelInvolvement">
                        <input type="text" class="two-lines-textbox" name="unitLevelPosition[]" placeholder="Position/Committee" onBlur="this.placeholder='Position/Committee'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />
                        <input type="text" class="two-lines-textbox" name="oectaUnit[]" id="oectaUnit_1" placeholder="Unit" onBlur="this.placeholder='Unit'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />

                        <div class="clearFix"></div>

                        <input type="text" class="two-lines-textbox" name="unitPresident[]" id="unitPresident_1" placeholder="Unit President" onBlur="this.placeholder='Unit President'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />
                        <input type="date" class="two-lines-textbox" name="unitYear_1" id="unitYear_1" onKeyUp="checkPage3()" />
                        <input type="button" value="+" onClick="addUnitInvolvement()" />
                    </div>
                 </div><!-- end of unit-level-involvement div-->

    </form><!--endForm-->

有关示例，请参阅 this phpfiddle - 您可以看到要启动的 PHP 代码，然后按 F9 或单击标记为 Run - F9 的按钮来运行代码。单击标记为提交表单的按钮后，您应该会在 $_POST 中看到处理数据的输出。