Theodore Steiner Theodore Steiner - 1 month ago 13
Javascript Question

Logging Dynamic Input Values in PHP

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

You can use array syntax - e.g. name="unitLevelPosition[]" then when the form is submitted in PHP, you should be able to utilize $_POST['unitLevelPosition'] as an array.

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

Comments