1

I have a dropdown menu that I populate with items from a database. I want to populate text fields with other attributes from the same table I get my dropdown options from. The problem I'm having is retrieving the other attributes, and placing them in the text field. I have written console logs to help me see what my code is doing. At this point, every console log for every function gets returned as if the code is working as it should. The only thing that's not happening is when my code goes to the ajax processing file, it is not getting the data, so when it goes back to the main file, there is no attributes to place in the text fields.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <?php                        
    # Perform database query
    $query = "SELECT * FROM student";
    $result = $conn->query($query) or die('Query 1 failed: ' . mysql_error());

    ?>

    <label for="studentSelect">Student Name: </label>
    <select id="studentSelect">
    <option value="0">Please select</option>
    <?php
    while ($row = $result->fetch_assoc())
    {
        echo '<option value="' . $row['studentID'] . '" > "' . $row['studentFirstName'] . '"  "' . $row['studentLastName'] . '"</option>';
    }
    ?>
    </select>
    <div>
        <label for="element_5_1">First Name</label>
        <input id="element_5_1" name="element_5_1" class="element text large" type="text">
    </div>

    <div>
        <span class="floatLeft">
        <label for="element_5_3">Last Name</label>
        <input id="element_5_3" name="element_5_3" class="element text medium" style="width:14em" type="text">
        </span>

        <span style="float:left">
        <label for="element_5_4">Major</label>
        <input id="element_5_4" name="element_5_4" class="element text medium" style="width:4em" type="text">
        </select>
        </span>
        <span style="float:left">
        <label for="element_5_5">Credits Earned</label>   
        <input id="element_5_5" name="element_5_5" class="element text medium" style="width:6em" type="text">
        </span>
    </div>



    <script type="text/javascript">
    function makeAjaxRequest(studentFirstName)
    {
        console.log("making request");
        $.ajax({        

        type: "POST",
        data: { studentFirstName: studentFirstName },
        dataType: "json", 
        url: "process_ajax.php",
        success: function(json) 
        {
            insertResults(json);
            console.log("successful post");
        },
        failure: function (errMsg) 
        {
            alert(errMsg);
        }
        });
        }                               

        $("#studentSelect").on("change", function()
        {       
            var id = $(this).val();
            if (id === "0")
            {
                clearForm();
                console.log("cleared form");
            }
            else 
            {
                makeAjaxRequest(id);
            }
        });                             

        function insertResults(json)
        {                                   

            $("#element_5_1").val(json["studentFirstName"]);

            $("#element_5_3").val(json["studentLastName"]);

            $("#element_5_4").val(json["major"]);

            $("#element_5_5").val(json["creditsEarned"]);
        }

        function clearForm()
        {
            console.log("in clearForm");
            $("#element_5_1, #element_5_3, #element_5_4, #element_5_5").val("");
        }

    </script>

I then have a separate ajax processing file

<?php
$host = "********.mysql.database.azure.com";
$username = "************";
$password = "*******";
$db_name = "**********";

//Establishes the connection
$conn = mysqli_init();
mysqli_real_connect($conn, $host, $username, $password, $db_name, 3306);
if (mysqli_connect_errno($conn)) {
die('Failed to connect to MySQL: '.mysqli_connect_error());

$studentName = $_POST['studentFirstName'];

$query = "SELECT * FROM student";
$result = mysql_query($query) or die('Query 2 failed: ' . mysql_error());
while ($row = mysql_fetch_assoc($result)) {
    if ($studentName == $row['studentFirstName']){
        echo json_encode($row);
    }
}
?> 

Any help at all is much appreciated!

  • I dont see a database connection in the first code – RiggsFolly Nov 09 '17 at 00:32
  • @RiggsFolly that's only part of the whole page. I have a connection statement in a part of the code not posted. I only posted the code relevant to the question, which is a very different question than the one you marked it a duplicate of. The problem I'm having here isn't with mixing mysqli_ with php. The problem is retrieving a second set of attributes based on a set already received. – Jakim Beaufort Nov 09 '17 at 00:37
  • I'm noticing a couple of issues here. Aside from the whole mysli-part (do change that to PDO; mysqli is deprecated), you expect the `studentFirstName` in the `process_ajax.php`-file, but the select-element's value attribute holds its ID. I think that's pretty much what breaks it. – Helge Talvik Söderström Nov 09 '17 at 00:59
  • @HelgeTalvikSöderström Ive taken out the id but that makes the drop down list not get populated at all. The problem isn't with the drop down list tho; the process ajax file doesn't have any links to it. the only thing the process file links to is the makeAjaxRequest function which is supposed to take the attributes the process file gets, and place it in the text fields. – Jakim Beaufort Nov 09 '17 at 01:17
  • That happened to me first, running your code, but becuase I couldn't get any database results as My PHP version didn't support MySQLi. I converted the DB stuff to PDO and got it working. Make sure you don't get any DB errors =) – Helge Talvik Söderström Nov 09 '17 at 01:23
  • What do you mean convert it to PDO? I am very very new to web development – Jakim Beaufort Nov 09 '17 at 02:33

0 Answers0