Hi.. recently i figured out that it's possible to add form field from Description value..
hence I use this "feature" to create a dynamic table whereby user can add row to the table.
From my understanding, it's only possible to link one input/form to one custom field.
but.. I would like to link together all the rows to one string template
for example
col 1 - name, col 2 - age, col 3 - dob.
row 1 - jane, 21, 01/03/1999
row 2 - joey, 24, 01/04/1997
this will be compiled as template below
Customer List
1 - Jane, 21 years old, 01/03/1999
2 - Joey, 24 years old, 01/04/1999
to one text-field multiline custom field
> example below
HTML CODE BELOW
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script>
window.onload = ()=>{
if(document.getElementsByClassName("hideifOnSetting")[0].parentElement.getAttribute("class") == "description")
{ document.getElementsByClassName("hideifOnSetting")[0].style.display = "none" }
else
{ document.getElementsByClassName("hideifOnSetting")[0].style.display = "block" }
}
</script>
<div class="hideifOnSetting">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Activity</td>
<td>Responsible Person</td>
<td>Start Time</td>
<td>End Time</td>
<td>Status (Pass/Fail)</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="activity" class="form-control" />
</td>
<td class="col-sm-2">
<input type="mail" name="rperson" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="starttime" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="endtime" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="status" class="form-control"/>
</td>
<td class="col-sm-6"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
</div>
JS CODE BELOW ->
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="activity' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="rperson' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="starttime' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="endtime' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="status' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
