javascript - How to get value display from dynamic field

I want to create a form with dynamic fields. I want to display the data that has been inputted in the dynamic field into the review page. So before the user submits the form, they see a review of the data that has been inputted first. But I'm stuck to get value from dynamic field. Please help.

This html code

<form method=POST action="aksi.php" enctype="multipart/form-data" id="wrapped">
    <div id="middle-wizard">
        <!-- /step-->
        <div class="step">
            <h3 class="main_question"><strong>1/2</strong>Input</h3>
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dynamic_field">
                        <tr>
                            <td><input type="text" name="student_name" class="form-control required" onchange="getVals(this, 'student_name');"></td>
                            <td><button type="button" name="add" id="add" class="btn btn-success">Add more</button></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- /step-->

        <div class="submit step">
            <h3 class="main_question"><strong>2/2</strong>Summary</h3>
            <div class="summary">
                <ul>
                    <li>
                        <ul>
                            <li><label>Student Name</label>: <span id="student_name"></span></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /step-->
    </div>
    <!-- /middle-wizard -->
    <div id="bottom-wizard">
        <button type="button" name="backward" class="backward">Prev</button>
        <button type="button" name="forward" class="forward">Next</button>
        <button type="submit" name="process" class="submit">Submit</button>
    </div>
    <!-- /bottom-wizard -->
</form>
Copy code

This code for dynamic field

<script>
    $(document).ready(function(){
        var i=1;
        $('#add').click(function(){
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="student_name[]" placeholder="Student Name" class="form-control"></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
        });
        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id");
            $('#row'+button_id+'').remove();
        });
    });
</script>
Copy code

this code for display

<script>
    function getVals(formControl, controlType) {
    switch (controlType) {

    case 'student_name':
    // Get the value for a input text
    var value = $(formControl).val();
    $("student_name").text(value);
    break;

    }
    }
</script>
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.