通过从 javascript 文件查询数据库，根据下拉菜单中的选择更新 div 内容

Question

I had a question answered earlier here that was a massive help that involved changing content using ajax based on a dropdown selection from a mysql database.

I now need to fill the contents of the editted div with the values from the same row as the selected option from the drop down menu.

In order to do this it seems that the only way is to query from my js file, and the only ways to do this is through either nodejs or further ajax. I have attempted both ways but nodejs is proving tough as I am using cpanel to host the site. Ajax would be a great way to do this but I need the query to include WHERE cModel = '$cModel' in order to retrieve the correct values and obviously I can't get that variable when im getting the php script from a separate file.

I apologise if i've left out some important details, this has been doing my head in massively and i wanted to see if there was any easier way to do this. Thanks!

HTML & PHP for one dropdown box:

<form id="parts">
        <fieldset>
            <legend>Choose your parts</legend>
            Any parts marked with * are required<br/><br/>
            <label for="CPU">CPU*</label><br/>
            <?php
                $cresult = $mysqli->query("SELECT * FROM pCpu ORDER BY cModel asc");
            ?>
                <select id="CPU" name="CPU" onchange="myUpdateFunc()">
                <option value="" disabled selected>Select your Part</option>
                <?php
                while ($rows = $cresult->fetch_assoc()) {
                    $cmodel = $rows['cModel'];
                    echo "<option value='$cmodel'>$cmodel</option>";

                }

                ?>
                </select>

                <br/>

                <div id="divResults">

                </div>
                <br/><br/>

JS :

function myUpdateFunc()
{
    var mySelected = $("#CPU").find("option:selected").val();

    $('#divResults').html ('CPU Model: ' + mySelected + '<br/> CPU Socket: ')
}

Answer 1

AJAX is definitely the way to go. Call a PHP script and pass it cModel .

function myUpdateFunc()
{
  var mySelected = $("#CPU").find("option:selected").val();
  $.ajax({
    url: "searchCPU.php?cmodel=" + mySelected, 
    success: function(result){
    $('#divResults').html ('CPU Model: ' + result + '<br/> CPU Socket: ')
     }
  });
}

searchCPU.php

<?php
    $cmodelParam = $_GET['cmodel'];
    $cresult = $mysqli->query("SELECT * FROM pCpu WHERE cModel = $cmodelParam");
    //assuming it returns a single row for simplicity
    $row = mysqli_fetch_assoc($cresult);
    echo $row['cModel'];
?>

Obviously you can do more error checking and this is open to SQL injection . You should always use prepared statements . I didn't alter it to simply answer your question and let you resolve those issues on your own.