在PHP中记录动态输入值

Question

I have quite a large form, several pages of which make use of some JS to dynamically add inputs whenever the user clicks a plus button, allowing them to add in extra jobs and what have you.

I have that portion of the form working. My problem comes in trying to capture the dynamic fields in the PHP document. I seem to only be getting the first values that are input into the form, and nothing from the dynamically added inputs.

What I have Tried

I've separated one of the pages of the form that has two such inputs and tried capturing the first level of inputs in PHP. This is working properly.

What I am Unsure Of:

How do I create variables in PHP or the potentiality of variables so I can grab them later in php?

I've recreated the example here, but only the first question allows for dynamic inputs. I just included the one js file:

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

You can use array syntax - e.g. name="unitLevelPosition[]" then when the form is submitted in PHP, you can utilize $_POST['unitLevelPosition'] as an array. I tried searching for reputable resources but haven't found much. However, take a look at this page, as well as this one (I know that pertains to checkboxes but the concept is the same).

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-->

For an example, see this phpfiddle - you can see the PHP code to start, and press F9 or click the button labeled Run - F9 to run the code. After clicking the button labeled Submit form you should see the output of processing the data in $_POST.

</div>