The alert drop box if not showing if I skip-CodePudding

The alert box is not showing up when I skip to choose and I've no idea why it's happening. I will include both codes. I am tying to change getElementByName but it didn't work either. Is there a away to fix? Also, I did some researches and try to fix but still not working and didn't work as the same.

    <?php  
include("_dbconn.php");

$area = isset($_GET["area"])? $_GET["area"] : "";

// $area = str_replace("1", "Production Floor Access", $area);
// $area = str_replace("2", "Office Floor Access", $area);
// $area = str_replace("3", "Specific Access Doors", $area);

if(substr($area,-1) == "|"){
    $area = substr($area,0,-1);
}
$area_list = explode("|",$area);

// print_r($area_list);
$area_clause = " area_no in ('" . implode("','", $area_list) . "')";

$ary_approver = array(
  "Albert Chin"       => "[email protected]",
  "Alberto Leotti"    => "[email protected]",
  "Alex Koh"          => "[email protected]",
  "Bala Subbu"        => "[email protected]",
  "Bertrand Seow"     => "[email protected]",
  "Calvin Goh Chin Boon"     => "[email protected]",
  "Chan Boon Hock"           => "[email protected]",
  "Cheng Kear Yong"   => "[email protected]"
);


$sql = "Select distinct(approver_name) from access_request.tbl_access_area where ".$area_clause."";
$result = mysqli_query($conn,$sql);
//echo $result;

$cnt = 0;

echo "<table align=\"center\" border=\"0\" width=\"95%\" bordercolor=\"#DADADA\" cellpadding=\"3\" cellspacing=\"1\">\n";
echo  "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\">\n";
    echo  "<font face=\"arial\" size=\"2\" color=\"#3C5F84\">  Approver  </font>";
    echo "       ";
    echo "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\" style=\"
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
    grid-gap: 10px;
    margin-left:138px;
    margin-top:-23px;\">";

    while($row = mysqli_fetch_array($result)){
        foreach($ary_approver as $k => $v){


            if($k == $row["approver_name"]){
                echo "<input type=\"checkbox\" id=\"chkApprover" . $cnt . "\" name=\"chkApprover[]\" value=\"$v\"><font face=\"arial\" size=\"2\" color=\"#3C5F84\">". $k . "</font>";
                //echo "<br>           ";
            }
        }
        $cnt  ;
    }

    echo  "</td></tr>\n";
    echo  "</td></tr>\n";
    echo "<tr bgcolor=\"#F5F5F5\"></tr>\n";
    echo  "</table>\n";

?>

Below codes are javascript codes.

var alist = '';
var list = document.getElementsByName('chkApprover[]');

for ( i=0; i < list.length; i   ) {   
  if (document.getElementById('chkApprover'   i).checked == true) {
    alist = alist   list[i].value   '|';
  }
}

if(alist == ""){
  alert("Please choose at least one Approver for your request!");
  return false;
}

CodePudding user response：

Your HTML is VERY wrong. You cannot nest trs.

Please check https://validator.w3.org/

You need an event handler on a form to run your test

document.getElementById("form1").addEventListener("submit", function(e) {
  var alist = '';
  var list = document.getElementsByName('chkApprover[]');

  for (i = 0; i < list.length; i  ) {
    if (document.getElementById('chkApprover'   i).checked == true) {
      alist = alist   list[i].value   '|';
    }
  }

  if (alist == "") {
    alert("Please choose at least one Approver for your request!");
    e.preventDefault()
  }
})

<form id="form1">
  <table align="center" border="0" width="95%" bordercolor="#DADADA" cellpadding="3" cellspacing="1">
    <tr bgcolor="#F5F5F5">
      <td align="left" colspan="5">
        <font face="arial" size="2" color="#3C5F84"> Approver </font>
      </td>
    </tr>
    <tr bgcolor="#F5F5F5">
      <td align="left" colspan="5" style="display: grid; grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content; grid-gap: 10px;    margin-left:138px; margin-top:-23px;">
        <input type="checkbox" id="chkApprover0" name="chkApprover[]" value="$v">
        <font face="arial" size="2" color="#3C5F84">Albert Chin </font>

        <input type="checkbox" id="chkApprover1" name="chkApprover[]" value="$v">
        <font face="arial" size="2" color="#3C5F84">Alberto Leotti </font>
      </td>
    </tr>
    <tr bgcolor="#F5F5F5"></tr>
  </table>
  <input type="submit">
</form>