My html form has repeatable inputs generated via jQuery. I save the user's input value via PHP $_sessions for all of the static inputs. That way if the user navigates back to the form page after submission, their values are saved. I am unsure how to achieve this with the dynamically created fields.
Here's a preview of my form:
Goal, have the $_Session for dynamically created fields stored in the value attribute.
Gist for jQuery to add additional rows: https://gist.github.com/anonymous/3273a19ca2f6f75a16befeec5c87b718
<div class="child-wrap row">
<div class="col s12">
<span class="child-count">Child 1</span>
</div>
<div class="col s12 m5">
<label for="child-name">Name</label>
<input name="child[0][name]" value="<?php echo $_SESSION['child_name'][0]; ?>" id="child-name" type="text">
</div>
<div class="col s12 m5">
<label for="child-dob">DOB</label>
<input name="child[0][dob]" value="<?php echo $_SESSION['child_dob'][0]; ?>" id="child-dob" type="date" class="datepicker">
</div>
<!-- ***************************
* Dynamic rows are added here
**************************** -->
<div class="added-child-wrap">
<div class="col s12">
<div class="child-count">
<span>Child 2</span>
<a href="#" class="remove_field hide-on-large-only">
<i class="material-icons">remove_circle_outline</i>
</a>
</div>
</div>
<div class="col s12 m5">
<label for="child-name1">Name</label>
<input name="child[1][name]" value="" id="child-name1" type="text">
</div>
<div class="col s12 m5">
<label for="child-dob1">DOB</label>
<input name="child[1][dob]" value="" id="child-dob1" type="date" class="datepicker">
</div>
<div class="col s12 m2 hide-on-med-and-down">
<a href="#" class="remove_field">
<i class="material-icons">remove_circle_outline</i>
</a>
</div>
</div>
<!-- ***************************
* End ynamic rows
**************************** -->
</div>
<div class="row">
<div class="col s12">
<a href="#!" class="add_field_button"><i class="material-icons">add_circle_outline</i></a>
</div>
</div>
You can save all the input values of static and dynamically created fields in session in php as below.
foreach($_POST["child"] as $element => $child) {
$_SESSION["child_name"][$element] = $child["name"];
$_SESSION["child_dob"][$element] = $child["dob"];
}
Then in the form, to populate all the session values try the following code.
<?php
for($i=0;$i<count($_SESSION['child_name']);$i++) {
?>
<div class="col s12">
<span class="child-count">Child <?php echo $i+1; ?></span>
</div>
<div class="col s12 m5">
<label for="child-name1">Name</label>
<input name="child[<?php echo $i; ?>][name]" value="<?php echo $_SESSION['child_name'][$i]; ?>" id="child-name<?php echo $i; ?>" type="text">
</div>
<div class="col s12 m5">
<label for="child-dob1">DOB</label>
<input name="child[<?php echo $i; ?>][dob]" value="<?php echo $_SESSION['child_dob'][$i]; ?>" id="child-dob<?php echo $i; ?>" type="date" class="datepicker">
</div>
<div class="col s12">
<div class="child-count">
<span>Child <?php echo $i+1; ?></span>
<a href="#" class="remove_field hide-on-large-only">
<i class="material-icons">remove_circle_outline</i>
</a>
</div>
</div>
<?php
}
?>