JSFiddle - React, Tailwind, and code Playground

by xonev

HTML

<form name="formtest" action="">
    <table class="background_table">
    <tbody>
    <tr>
        <td>Are you a man?</td>
        <td>
            <input type="radio" name="q1" id="yes1" value="1" />Yes
            <input type="radio" name="q1" id="no1" value="0" />No
        </td>
    </tr>
    <tr>
        <td>Do you have hair?</td>
        <td>
            <input type="radio" name="q2" id="yes2" value="1" />Yes
            <input type="radio" name="q2" id="no2" value="0" />No
        </td>
    </tr>

    <tr>
        <td>Do you have children?</td>
        <td>
            <input type="radio" name="q3" id="yes3" value="1" />Yes
            <input type="radio" name="q3" id="no3" value="0" />No
        </td>
    </tr>
    </tbody>
    </table>

<input type="submit" />
</form>

JavaScript

try {
    $(function() {
        $('input[value="1"]').change(function () {
            var explainId = $(this).attr('name') + 'explain';
            $(this).closest('tr').after('<tr id="' + explainId + '"><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
        });
        
        $('input[value="0"]').change(function () {
            var explainId = $(this).attr('name') + 'explain';
            $(this).closest('tr').next('tr#' + explainId).remove();
        });
    
    
        /*$("#formtest").validate({
            errorLabelContainer: "#form_error_message",
            wrapper: "li",
            rules: {
                q1: 'required',
                q2: 'required',
                q3: 'required',
                q4: 'required',
                a1: { required: "yes1:checked" },
                a2: { required: "yes2:checked" },
                a3: { required: "yes3:checked" },
                a4: { required: "yes4:checked" }
            },
            messages: {
                //custom messages for all rules above
            },
            submitHandler: function() {
                //Do processing
            }
        });*/
    });
}
catch (e) {
    alert(e.message);
}