Dynamically Created Form Inputs + PHP Variables

Question

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:

User checks box if they have children
If true, two inputs appear: Child-Name and Child-DOB.
The user can click a plus button to add an additional row per child.

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>

Either use sessionStorage or once you create a new element via javascript send an asynchronous request to a PHP script which will add the new field to the $_SESSION — Ivan Yonkov
– Ivan Yonkov, Commented Oct 19, 2016 at 21:55

Gayathri · Accepted Answer · 2016-10-20 05:31:55Z

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

Collectives™ on Stack Overflow

Dynamically Created Form Inputs + PHP Variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related