Question

Technologies:

javascript

php

Tolerim

15 days ago

The course checkbox selection does not trigger a change in the select box.

As an attempt to make a select input change based on the selection of another select input, I have been using AJAX, PHP, and JavaScript by following a demo on https://www.w3schools.com/php/phpajaxdatabase.asp. Unfortunately, I seem to have gotten confused, and the roles select box doesn't seem to change based on my selection in the course checkbox. To provide context, here is the relevant code of the original PHP file:

    <script>
function showUser(str) {
  if (str == "") {
    document.getElementById("changethis").innerHTML = "<select name='role' id='role'> <option value=''> Role </option>";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (changethis.readyState == 4 && changethis.status == 200) {
        document.getElementById("changethis").innerHTML = changethis.responseText;
      }
    };
    xmlhttp.open("GET","getuser.php?q="+cidopt.value,true);
    xmlhttp.send();
  }
}
</script>
    <title>Application Form</title>
  </head>
<body id="appformbod" onload='showUser(coursesel.value)'>
<span id="appformblock">
<h1 id=apphead>Application For Employment</h1>
<form action="applicationSubmit.php" method="post">
    <div id="formcont">
    <?php
        $conn = mysqliconnect('localhost', 'root', '','hmsdb');
        if (mysqliconnecterrno()){
            die("Connection Error");
        }
        else{
            $query="SELECT courseid, name, code, semester FROM units";
            $result = mysqli_query($conn, $query);
            if (!$result){
              ;
          }
            else{
                echo "<div id='selectboxes'><p> <select name='coursesel' id='coursesel'>
                <option value=''> Course </option>";
                foreach($result as $row) {
                    echo "<option id='cidopt' value=".$row['courseid'].">".$row['name']." ".$row['code']." Semester ".$row['semester']."</option>";
                }
                echo "</select </p>";
                echo "<p id='changethis'> </p></div>";
            }
        }
    ?>

Additionally, here is the relevant code for the getrole.php file:

<?php
$q = intval($_GET['q']);

$con2 = mysqliconnect('localhost', 'root', '','hmsdb');
if (!$con2) {
  die('Could not connect: ' . mysqli_error($con));
}

$sql2="SELECT role FROM units WHERE courseid = '".$q."'";
$result2 = mysqli_query($con2,$sql2);
echo"<select name='role' id='role'> <option value=''> Role </option> <option value=''> Role </option>";
foreach($result2 as $row2) {
    echo "<option value=".$row2.">".$row2."</option>";
}
echo "</select </p>";
mysqli_close($con);
?>

Answers(1)

Accepted Answer

The issue with the code seems to be that changethis in the if statement in the showUser function is undefined. The correct parameter should be xmlhttp. After making this change, the code should work as intended. Here's an updated version of the code:

<script>
function showUser(str) {
  if (str == "") {
    document.getElementById("changethis").innerHTML = "<select name='role' id='role'><option value=''> Role </option>";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("changethis").innerHTML = xmlhttp.responseText;
      }
    };
    xmlhttp.open("GET","getuser.php?q="+cidopt.value,true);
    xmlhttp.send();
  }
}
</script>

<title>Application Form</title>

<body id="appformbod" onload='showUser(coursesel.value)'>
<span id="appformblock">
<h1 id=apphead>Application For Employment</h1>
<form action="applicationSubmit.php" method="post">
    <div id="formcont">
    <?php
        $conn = mysqli_connect('localhost', 'root', '','hms_db');
        if (mysqli_connect_errno()){
            die("Connection Error");
        }
        else{
            $query="SELECT courseid, name, code, semester FROM units";
            $result = mysqli_query($conn, $query);
            if (!$result){
              ;
          }
            else{
                echo "<div id='selectboxes'><p> <select name='coursesel' id='coursesel'>
                <option value=''> Course </option>";
                foreach($result as $row) {
                    echo "<option id='cidopt' value=".$row['courseid'].">".$row['name']." ".$row['code']." Semester ".$row['semester']."</option>";
                }
                echo "</select></p>";
                echo "<p id='changethis'> </p></div>";
            }
        }
    ?>

</form>
</pre>