Question

How to populate a table one row 1 name into table 2 if a row value in table 1 = Yes

How To

Updated July 3

asked on July 2

Hi All.

I have a problem & would appreciate help to resolve it.

My parent application form has a child details table with a Medical Conditions Yes/No drop down.

My aim is to have the names of students with Medical Conditions = "Yes" populated into a 2nd table later in the form that will be used to drill into specific Medical conditions for each child.

If my code was working, "Yes" values for child 1 & 3 below would copy into the "Children with Medical conditions" table below;

This is the code I used;

function updateTable2() {
    // Clear Table 2
    $('.table2 tbody').empty();

    // Loop through Table 1 rows
    $('.table1 tbody tr').each(function () {
        var includeVal = $(this).find('.includeField input').val();
        var nameVal = $(this).find('.nameField input').val();

        if (includeVal === "Yes") {
            // Add row to Table 2
            var newRow = $('<tr><td><input type="text" class="nameField2" value="' + nameVal + '" /></td></tr>');
            $('.table2 tbody').append(newRow);
        }
    });
}

// Run on form load and when Table 1 changes
$(document).ready(function () {
    updateTable2();

    // Re-run when any input in Table 1 changes
    $('.table1').on('change', 'input', function () {
        updateTable2();
    });
});

To minimise errors I added the default CSS classes to each of the 5 items as seen here;

Table 2 has these settings;

The destination table 2 Name field is seen as below;

Any assistance to help get this working would be greatly appreciated!

Thanks.

Regards, Steve

0 0

Answer

SELECTED ANSWER

replied on July 3

Instead of appending html content, it's better to click the "add" button to trigger adding new row.

Also if includeField is a dropdown field, the value should be retrieved using select not input.

Here is the updated script:

function updateTable2() {
    // Clear Table 2
    $('.table2 tbody').empty();

    // Loop through Table 1 rows
    $('.table1 tbody tr').each(function () {
        var includeVal = $(this).find('.includeField select').val();
        var nameVal = $(this).find('.nameField input').val();

        if (includeVal === "Yes") {
            $('.table2 .cf-table-add-row').click();
            $('.table2 .nameField2 input').last().val(nameVal);
        }
    });
}

// Run on form load and when Table 1 changes
$(document).ready(function () {
    updateTable2();

    // Re-run when any input in Table 1 changes
    $('.table1').on('click change input', function () {
        updateTable2();
    });
});

0 0

Replies

replied on July 3

Hi Rui.

Brilliant, thank you so much, you nailed it.. all working now.

I appreciate your help.

Regards, Steve

0 0

You are not allowed to follow up in this post.

Question

Question

How to populate a table one row 1 name into table 2 if a row value in table 1 = Yes

Answer

Replies

Sign in to reply to this post.