How to tag a textarea as "Required" on option selection

Question

I am writing an .html page which is to be used to perform a system checkout and verify functionality of various aspects of that system. The .html page features a table encapsulated in a form with each row of that table being a step to verify an aspect of the system (e.g. Step 1: Do something) while each column is different criteria for that checkout process (e.g. Step #, Step Instruction, Expected Result, Actual Result, and Comments).

For the Actual Result column, I have a selection for blank (Incomplete), Pass, Fail, and N/A. The Comments column features a disabled textarea box with a placeholder reading "No Comments".

HTML:

<form method="post" action="">
    <table>
        <thead>
            <tr>
                <th align="center"><strong>Step</strong></th>
                <th align="left"><strong>Instruction</strong></th>
                <th align="left"><strong>Expected Result</strong></th>
                <th align="left"><strong>Actual Result</strong></th>
                <th align="left"><strong>Comments</strong></th>
            </tr>
        </thead>
        <tr>
            <td align="center" valign="top">1.</td>
            <td align="left" valign="top">Do something.</td>
            <td align="left" valign="top">Something happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        <tr>
            <td align="center" valign="top">2.</td>
            <td align="left" valign="top">Do something else.</td>
            <td align="left" valign="top">Something else happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        </tbody>
    </table>

    <input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>

Through JavaScript, I would like to set the textarea box in the "Comments" column to enabled and to be required should a "Fail" or "N/A" be selected in the preceding "Actual Results" column.

How would I scale this to support numerous rows each featuring a selection and textarea with similar functionality?

Answer 1

this code can help you.

let trc = document.getElementsByClassName("testResultClass")
for(let i = 0;i < trc.length;i++) {
  let elem = trc[i]
  elem.onchange = (e) => {
    let txbx = elem.parentElement.parentElement.getElementsByClassName("testResultBoxClass")[0]
    if(elem.value == "Fail" || elem.value == "N/A"){
      txbx.disabled = false
      txbx.required = true
    } else
      txbx.disabled = true
      txbx.required = false
  }
}

<form method="post" action="">
    <table>
        <thead>
            <tr>
                <th align="center"><strong>Step</strong></th>
                <th align="left"><strong>Instruction</strong></th>
                <th align="left"><strong>Expected Result</strong></th>
                <th align="left"><strong>Actual Result</strong></th>
                <th align="left"><strong>Comments</strong></th>
            </tr>
        </thead>
        <tr>
            <td align="center" valign="top">1.</td>
            <td align="left" valign="top">Do something.</td>
            <td align="left" valign="top">Something happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        <tr>
            <td align="center" valign="top">2.</td>
            <td align="left" valign="top">Do something else.</td>
            <td align="left" valign="top">Something else happens.</td>
            <td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
                    <option value="Incomplete" selected></option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
                    <option value="N/A">N/A</option>
                </select>
            </td>
            <td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
        </tr>
        </tbody>
    </table>

    <input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>