Dynamically added row is not visualised HTML

Question

I'm trying to dynamically add a row, with a form, inside a table, upon the click of a button. Here's the JS code chunk:

$(document).ready(function () {
    window.can_add_bank_row = true;
    $('#add_bank_acc_btn').on('click', function () {
        addBankAccRow();
    });
});
/**
 *  Adds a table row with fields to add a bank account to the user's profile.
 */
function addBankAccRow() {
    if (window.can_add_bank_row) {
        var warning_msg = "You are about to add a new bank account for this user.\n\nAre you sure?";
        $('<tr>' +
            '<form id="addNewBankAccountForm" method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">' +
            '</tr>').insertBefore('#bank_accs_tbl > tbody > tr:first');
        $('#addNewBankAccountForm').html(
            '<td></td>' +
            '<td><select id="bank_type_dropdown">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input name="add_bank_label_input" type="text"></td>' +
            '<td><input name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td><button type="submit" class="btn btn-primary">Add</button></td>'
        );
        window.can_add_bank_row = false;
    } else {
        alert('You\'ve got one empty row to add a bank account already.\nPlease, fill and submit it before adding a new one. :)');
    }
}

When I check the source of the page, I can see the form and all its elements in the code, but it just doesn't appear visually. // jsfiddle for this ^

If I try this instead:

$('<tr>' +
            '<form method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">' +
            '<td></td>' +
            '<td><select id="bank_type_dropdown">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input name="add_bank_label_input" type="text"></td>' +
            '<td><input name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input type="checkbox" name="add_bank_default" value="0"></td>' +
            '<td><input type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td><button type="submit" class="btn btn-primary">Add</button></td>' +
            '</form>' +
            '</tr>').insertBefore('#bank_accs_tbl > tbody > tr:first');

then the form tag is auto-closed and the input fields and the submit button are left outside the form...

// jsfiddle for this one ^

Aaaand, I also tried this one:

$('<form id="addNewBankAccountForm" method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">'
        ).insertBefore('#bank_accs_tbl > tbody > tr:first');
        $('#addNewBankAccountForm').html(
            '<tr>' +
            '<td></td>' +
            '<td><select id="bank_type_dropdown">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input name="add_bank_label_input" type="text"></td>' +
            '<td><input name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td><button type="submit" class="btn btn-primary">Add</button></td>' +
            '</tr>'
        );

Now the row, along with the inputs, are visualised, but all in the first cell... I can't handle front-end, I'm a backend guys. Please help :D

// and its jsfiddle ^

Your HTML is invalid, as only `th` and `td` elements can be direct child of `tr`. See http://www.w3.org/TR/html-markup/spec.html#tr Thus your browser is modifying the HTML which you are supplying — Satpal, Sep 25 '15 at 07:42
You can not put a
element inside a table. Look here: http://stackoverflow.com/questions/5967564/form-inside-a-table — david, Sep 25 '15 at 07:43
I updated my post with one more solution and JSfiddle for all of them. — Milkncookiez, Sep 25 '15 at 07:56

score 0 · Answer 1 · answered Sep 25 '15 at 08:23

Before clarifying why it isn't adding I would like to tell, as others said your html will not be valid structure then, for the reasons or proofs mentioned in comments. Also when you execute the below code of inserting the whole stuff, your table gets messed up after insertion.

Clarification for your question

You have insertBefore('#bank_accs_tbl > tbody > tr:first'); where in you are trying to insert the element created before table-tbody-first tr where in as I see your html there isn't any tbody itself and you just have thead and table closed. So first you need to add tbody and an empty tr so as to pose tbody's first tr is present in DOM. Otherwise your selector for insertBefore will not be found in HTML DOM. Below should be your table structure at beginning:

<table id="bank_accs_tbl" class="table table-striped">
     <thead>
        <th>ID</th>
        <th>Bank type</th>
        <th>Label</th>
        <th>Currency</th>
        <th>Min. transfer</th>
        <th>Approved</th>
        <th></th>
     </thead>
     <tbody><!--Add this part-->
        <tr>
        </tr>
     </tbody>
</table>

DEMO

score 0 · Accepted Answer · answered Sep 25 '15 at 08:34

Alright... apparently, as @Satpal said and @david posted a help link, <form> cannot be a direct child of table, th or tr. It will auto-close and stuff you don't want to happen will eventually happen.

The solution I though of is to (as in many other cases) have hidden input fields inside the form, which on its side will be enclosed in a single, separate self, together with the submit button. And these hidden fields will eventually acquire the data from the visible input fields, and then submitted.

Here's the code:

var warning_msg = "You are about to add a new bank account for this merchant.\n\nAre you sure?";
        $('<tr>' +
            '<td></td>' +
            '<td><select id="add_bank_type_dropdown_input">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input id="add_bank_label_input" name="add_bank_label_input" type="text"></td>' +
            '<td><input id="add_bank_currency_input" name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input id="add_bank_min_transfer_input" name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input id="add_bank_approved_input" type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td>' +
            '<form method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">' +
            '<input id="add_bank_type_dropdown_hidden" type="hidden">' +
            '<input id="add_bank_label_hidden" type="hidden">' +
            '<input id="add_bank_currency_hidden" type="hidden">' +
            '<input id="add_bank_min_transfer_hidden" type="hidden">' +
            '<input id="add_bank_approved_hidden" type="hidden">' +
            '<button type="submit" class="btn btn-primary">Add</button>' +
            '</form>' +
            '</td>' +
            '</form>' +
            '</tr>').insertBefore('#bank_accs_tbl > tbody > tr:first');

and then I do:

$('#add_bank_type_dropdown_hidden').val($('#add_bank_type_dropdown_input').val());
            $('#add_bank_type_label_hidden').val($('#add_bank_type_label_input').val());
            $('#add_bank_type_currency_hidden').val($('#add_bank_type_currency_input').val());
            $('#add_bank_type_min_transfer_hidden').val($('#add_bank_type_min_transfer_input').val());
            if ($('#add_bank_type_approved_input').is('checked')) {
                $('#add_bank_type_approved_hidden').val(1);
            } else {
                $('#add_bank_type_approved_hidden').val(0);
            }
            $('#addNewBankAccountForm').submit();

Dynamically added row is not visualised HTML

2 Answers2