How do I present a summary page after user has completed his/her form?
Greetings experts,
I hope this is the correct forum for this question.
I have a code that dynamically creates additional table rows.
What is unique about this is that it has several Add More Rows buttons that it makes it extremely difficult to present summary page for the user.
Per our requirements, once user completes filling out the boxes, s/he needs to be presented with summary page to review data entered. If everything goes well, user submits records to the database.
If not, user goes back, makes changes and tries again. Getting to this point has been quite challenging and took almost two weeks.
Is it possible to do given the way my code is designed?
The code is quite long but I am presenting a stripped down version just so I can get an idea of how this is done.
I can then extend it for entire code.
- <script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#btnAdd0", function () { //
var rowCount = $('.data-contact-person0').length + 1;
var contactdiv = '<tr class="data-contact-person0">' +
'<td><input type="text" style="width:200px;" name="employeename' + rowCount + '" placeholder="Your name..." class="form-control employeename01" /></td>' +
'<td><input type="text" style="width:200px;" name="employeetitle' + rowCount + '" placeholder="Your title..." class="form-control employeetitle01" /></td>' +
'<td><input type="text" style="width:200px;" name="employeeemail' + rowCount + '" placeholder="Your email address..." class="form-control employeeemail01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd0" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete0" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable0').append(contactdiv); // Adding these controls to Emp table class
});
- $(document).ready(function () {
$(document).on("click", "#btnAdd1", function () { //
var rowCount = $('.data-contact-person1').length + 1;
var contactdiv = '<tr class="data-contact-person1">' +
'<td><input type="text" style="width:200px;" name="sourcename' + rowCount + '" placeholder="Name of income source..." class="form-control sourcename01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceaddress' + rowCount + '" placeholder="Address of income source..." class="form-control sourceaddress01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceincome' + rowCount + '" placeholder="Income..." class="form-control sourceincome01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable1').append(contactdiv); // Adding these controls to Source table class
});
- $(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
- function getAllEmpData() {
var data = [];
$('tr.data-contact-person0').each(function () {
var ename = $(this).find('.employeename01').val();
var etitle = $(this).find('.employeetitle01').val();
var email = $(this).find('.employeeemail01').val();
var alldata = {
'emplName': ename,
'emplTitle': etitle,
'empMail': email
}
data.push(alldata);
});
console.log(data);
return data;
}
- function getAllSourcepData() {
var data = [];
$('tr.data-contact-person1').each(function () {
var sname = $(this).find('.sourcename01').val();
var saddress = $(this).find('.sourceaddress01').val();
var sincome = $(this).find('.sourceincome01').val();
var alldata = {
'mySource': sname,
'mySAddress': saddress,
'mySIncome': sincome
}
data.push(alldata);
});
console.log(data);
return data;
}
$("#btnSubmit").click(function (event) {
event.preventDefault();
var empComplete = false, sourceComplete = false;
function checkComplete() {
if (empComplete && sourceComplete) {
$("#result").text("All complete");
}
}
$("#result").text("");
var data = JSON.stringify(getAllEmpData());
console.log(data);
$.ajax({
url: 'testpost.php',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
empComplete = true;
checkComplete();
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
var data = JSON.stringify(getAllSourcepData());
console.log(data);
$.ajax({
url: 'testpost.php',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
sourceComplete = true;
checkComplete();
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
});
</script>
</head>
<body>
<div class="bs-example">
<form id="form1" runat="server" novalidate="novalidate">
<div class="container">
<h2>Dynamic Forms</h2>
<table style="width:55%" id="maintable0">
<thead>
<tr>
<th>Employee Name</th>
<th>Title</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person0">
<td>
<input type="text" style="width:200px;" id="employeeename" name="employeename" class="form-control employeename01" placeholder="Your name..."></td>
<td>
<input type="text" style="width:200px;" name="employeetitle" class="form-control employeetitle01" placeholder="Your title..."></td>
<td>
<input type="text" style="width:200px;" name="employeeemail" class="form-control employeeemail01" placeholder="Your email address..."></td>
<td>
</td>
</tr>
</tbody>
</table><br><br>
<table style="width:73%" id="maintable1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Income</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person1">
<td>
<input type="text" style="width:200px;" name="sourcename" class="form-control sourcename01" placeholder="Name of income source..."></td>
<td>
<input type="text" style="width:200px;" name="sourceaddress" class="form-control sourceaddress01" placeholder="Address of income source..."></td>
<td>
<input type="text" style="width:200px;" name="sourceincome" class="form-control sourceincome01" placeholder="Income..."></td>
<td style="width:200px;">
<button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
</table><br><br>
<input type="submit" id="btnSubmit" class="btn btn-primary btn-md pull-center btn-sm" value="Submit">
<output id="result"></output>
- <br><br><br>
</div>
</form>
</div>
<script>
var x = 1;
</script>
- </body></html>