I am trying to create a submission form with using Bootstrap. It has dynamic table rows and email validation part. I want user to submit annotations with database, residue and references. My problem is submit button doesn't take information from any table rows. I am not sure if there are other ways of converting dynamic table to submission form. Any help will be appreciated. PS:I am using bootstrap.
Here is my code that creates a table with 4 different columns with addable/removable rows and email validation:
<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>
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="Database' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Residue' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Annotation' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="reference' + 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));
}
</script>
<script>
$(function () {
$('title="tooltips"').tooltip({});
});
</script>
<script> // VALİDATION
$(document).ready(function () {
$('.input-group input[required]').on('keyup change', function () {
var $form = $(this).closest('form'),
$group = $(this).closest('.input-group'),
$addon = $group.find('.input-group-addon'),
$icon = $addon.find('span'),
state = false;
if (!$group.data('validate')) {
state = $(this).val() ? true : false;
} else if ($group.data('validate') == "email") {
state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
}
if (state) {
$addon.removeClass('danger');
$addon.addClass('success');
$icon.attr('class', 'glyphicon glyphicon-ok');
} else {
$addon.removeClass('success');
$addon.addClass('danger');
$icon.attr('class', 'glyphicon glyphicon-remove');
}
});
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');
});
</script>
<section class="mb-4">
<form name="myform" action="mail.php" method="POST">
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr title="tooltips">
<td title="Database_Explanation1">Database</td>
<td title="Residue_Explnation2">Residue</td>
<td title="Annotation_Explnation3">Annotation</td>
<td title="Reference_Explnation4">Reference</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="inputs">
<input type="text" name="Database" class="form-control"/>
</td>
<td class="col-sm-4">
<input type="mail" name="Residue" class="form-control"/>
</td>
<td class="col-sm-3">
<input type="text" name="Annotation" class="form-control"/>
</td>
<td class="col-sm-4">
<input type="text" name="reference" class="form-control"/>
</td>
<td class="col-sm-2"><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 class="col-md-6">
<div class="md-form mb-0">
<div class="input-group" data-validate="email">
<input type="text" class="form-control" name="validate-email" id="validate-email"
placeholder="Validate Email" required>
<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
</div>
</div>
<div class="status"></div>
</form>
<div class="text-center text-md-left">
<a class="btn btn-primary" type="submit" onclick="document.getElementById('myform').submit();">Submit</a>
</div>
</section>
