Query not working through JavaScript with 500 internal server error

Question

I'm new to AJAX and I'm trying to create two dropdownlists of options from a database depending on what the user selects in two previous dropdowns. I've checked every way shape and form I've looked up but one dropdownlist doesn't return any values and the other says internal server error 500.

This is where the onChange event is, triggering the AJAX functions:

<select required="true" id="oficinaLoc" name="oficinaLoc" onchange="getAgent(this.value); selClub(this.value)">
    <option value="">Seleccione Unidad</option>
    <option value="680 - Centro de Tecnología de Información">680 - Centro de Tecnología de Información</option>
    <option value="681 - Educación Agrícola">681 - Educación Agr&iacute;cola</option> 
    <option value="682 - Planificación y Evaluación">682 - Planificaci&oacute;n y Evaluaci&oacute;n</option>
    <option value="683 - Medios Educativos e Información">683 - Medios Educativos e Informaci&oacute;n</option>
    <option value="684 - Ciencias de la Familia y el Consumidor">684 - Ciencias de la Familia y el Consumidor</option>

    etc...

These are my AJAX functions:

function getAgent(str) {
    if (str == "") {
        document.getElementById("dispAgente").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("dispAgente").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getagent.php?q="+str,true);
        xmlhttp.send();
    }
}

function selClub(unidad) {
    if (unidad == "") {
        document.getElementById("dispNombre").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("dispNombre").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getnombre.php?j="+unidad,true);
        xmlhttp.send();
    }
}

And these are the PHP pages it calls to through the XMLHttpRequest respectively:

getagent.php

<?php
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);

$q = ($_GET['q']);

$con = mysqli_connect('intrasise.uprm.edu','jchristian','registro4h','4h');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"4h");
$sql="SELECT nombre FROM personal4h WHERE unidadProg LIKE '%".$q."%'";
$result = mysqli_query($con,$sql);

echo '<select name="agenteExt"';
while($row = mysqli_fetch_array($result)) {
    echo "<option value = " . $row['nombre'] . ">" . $row['nombre'] . "</option>";
}
echo "</select>";
mysqli_close($con);
?>

getnombre.php

<?php
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);

$j = ($_GET['j']);

$con = mysqli_connect('intrasise.uprm.edu','jchristian','registro4h','4h');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"4h");
$sql="SELECT nombreClub FROM club4h WHERE oficinaLoc LIKE '%".$j."%'";
$result = mysqli_query($con,$sql);

echo '<select name="nombreClub"';
while($row = mysqli_fetch_array($result)) {
    echo "<option value = " . $row['nombreClub'] . ">" . $row['nombreClub'] . "</option>";
}
echo "</select>";
mysqli_close($con);
?>

The getAgent function doesn't return any options in the dropdownlist even though it creates the empty select. The selClub function gives me a 500 internal server error on the xmlhttp.open("GET","getagent.php?q="+str,true); line. I really don't know what else to do, I've followed every online article I've found about this to the dot.

Answer 1

A 500 error is a server error, so that means the problem will be in PHP and I'm seeing alot of issues there. I'm not sure that this is a complete list,...you'll need to debug it yourself, but here's a couple that aren't helping.

$j = ($_GET['j']);
$j = $_GET['j'];
//dump the ()

echo '<select name="nombreClub"';
echo '<select name="nombreClub">';
//closing > is missing

echo "<option value = " . $row['nombre'] . ">" . $row['nombre'] . "</option>";
echo "<option value=\"".$row['nombre']."\">".$row['nombre']."</option>";
//quotes around the value are missing

If you view the errors thrown by the PHP files, then you'll be on your way.

Good luck