Dynamic table to submission form

Question

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>

Answer 1

Try this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <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>
</head>
<body>
<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 id="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>
</body>
</html>