javascript - How to get value display from dynamic field
one text
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>
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>
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>
Source