Conditional Form Fields in Dynamic Data Table

Viewed 11

I have table with a repeating recordset area. I am using Data Tables for the table design. For each record, there is a form with a drop-down menu. Based on the drop down menu choice, I need it to possibly display a text area to add more info. I have this working for the first record but, it doesn't show for the remaining records. Any advice would be helpful. The text area should only show if thy choose Not Met or Partially Met from the drop down menu. When they hit the save button, it will get inserted into the database.

Here is my code:

<table id="example" class="table table-responsive table-striped table-bordered" width="100%" border="0" cellspacing="0">
    <thead>
      <tr>
        <th align="left" valign="top">Select a Status</th>
        <th align="left" valign="top">Clause #</th>
        <th align="left" valign="top">Clause</th>
        </tr>
    </thead><tbody>
        <?php
$wa_startindex = 0;
while(!$pod_certify->atEnd()) {
  $wa_startindex = $pod_certify->Index;
?>
          <tr>
            <td width="15%" valign="top"><form name="form2" method="post"><?php if ($pod_certify->getColumnVal("thegeps_clauseID") != $pod_certify->getColumnVal("thegeps_clauseID2")) {?><input type="hidden" name="geps_clauseID" id="geps_clauseID" value="<?php echo($pod_certify->getColumnVal("thegeps_clauseID")); ?>" required><input type="hidden" name="userID" id="userID" value="<?php echo($logged_user->getColumnVal("userID")); ?>" required><input type="hidden" name="dataID" id="dataID" value="<?php echo $_GET['dataID']; ?>" required>
            <select name="status2" id="status2" class="form-control" required>
            <option></option>
            <option value="Met">Met</option>
            <option value="Partially Met">Partially Met</option>
            <option value="Not Met">Not Met</option>
            </select>
            <script>
  $('#status2').on('change',function(){
    if( $(this).val()=='Partially Met'){
    $("#otherType4").show()
    }
    else{
    $("#otherType4").hide()
    }
});
</script>
<script>
  $('#status2').on('change',function(){
    if( $(this).val()=='Not Met'){
    $("#otherType5").show()
    }
    else{
    $("#otherType5").hide()
    }
});
</script> <div style="display:none;" id="otherType5"><br><label><strong>Please Explain:</strong></label><br><textarea name="explanation" id="explanation" class="form-control"></textarea></div><div style="display:none;" id="otherType4"><br><label><strong>Please Explain:</strong></label><br><textarea name="explanation" id="explanation" class="form-control"></textarea></div><button type="submit" name="submit" id="submit" class="btn btn-warning btn-sm mb-2">Save</button><?php }?><?php if ($pod_certify->getColumnVal("thegeps_clauseID") == $pod_certify->getColumnVal("thegeps_clauseID2")) {?><input id="certifyID" name="certifyID" type="hidden" value="<?php echo($pod_certify->getColumnVal("certifyID")); ?>"><button type="submit" name="submit2" id="submit2" class="btn btn-danger btn-sm mb-2">Delete <?php echo($pod_certify->getColumnVal("status")); ?> Certification</button><?php }?></form></td> 
            <td valign="top"><?php echo($pod_certify->getColumnVal("article_number")); ?></td>
            <td valign="top"><?php echo($pod_certify->getColumnVal("geps_clause")); ?></td>  
            </tr>
          <?php
  $pod_certify->moveNext();
}
$pod_certify->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?></tbody>
    </table>
0 Answers
Related