CODEWITHSUNDEEP
javascriptphpjqueryhtml
RoyNasr
RoyNasr

Reputation: 359

Getting the value of dropdownlist in php

I have the following the html/php code : 

<!DOCTYPE html>
<html>
<head>
    <title>Voiture</title>
</head>

<body>
    Welcome<br>
    <form method="post" action="">
        Liste de voiture<select name="selected" id="selected">
            <?php
            $sql = 'select Type from voiture';
            $result = $conn->query($sql);
            $json = array();
            while ($row = $result->fetch_assoc()) {
                if(!in_array($row['Type'], $json)){
                    $json[] = $row['Type'];
                    echo '<option name = "'.$row['Type'].'">'.$row['Type'].'</option>';
                }
            }
               ?>

        </select> <br>

        <span id="sel" name="sel"></span>
        <table border="1">
            <tr id="header">
                <td>Type</td>
                <td>Model</td>
                <td>Couleur</td>
                <td>Prix</td>
                <td>User</td>
                <td>Action</td>
            </tr>
        </table>
        <input type="submit" name="submit" hidden>
    </form>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(function(){
            $('#selected').on('change',function(){
                $('#sel').text(document.getElementById('selected').value);
                $.getJSON('phpVoiture.php',function(data){
                    for (var x = 0 ; x < data.length ; x++){
                        $('<tr><td>'+data[x]['type']+'</td>'+'<td>'+data[x]['Model']+
                                '</td><td>'+data[x]['Couleur']+'</td>'+
                                '<td>'+data[x]['Prix']+'</td>'+'<td></td></tr>').insertAfter($('#header'));
                    }
                });
            });
        });
    </script>
</body>
</html>

And the following php page : 

<?php

require_once ('./dbConnect.php');
include ('./Voiture.php');

$sel = $_POST['selected'];
$conn = mysqli_connect(servername, username, password, db ,port);
$query = "select * from voiture where Type = '".sel."'";
$result = mysqli_query($conn, $query);
$json = array();
if(mysqli_num_rows($result)>0){
    while($row = mysqli_fetch_assoc($result)){
        $json[] = [
            'type' => $row['Type'],
            'model' => $row['Model'],
            'couleur' => $row['Couleur'],
            'prix' => $row['Prix']
        ];
    }
}
else{
    echo mysqli_num_rows($result);
}
echo json_encode($json);

The problem is that when I select an option in the drop down list nothing happens. I want the query in the second php page to select the cars that have the type that I selected in the drop down list. I tried troubleshooting by echo an alert in both pages that have the value of the selected option, but this step also failed, so I think there is an issue with retrieving the value of the selected option. Any help would be appreciated.

Upvotes: 0

Views: 52

Answers (1)

David
David

Reputation: 218808

You're not sending the selected value to the server. Add it to the AJAX call:

$.getJSON('phpVoiture.php', { selected: $('#selected').val() }, function(data){
    //...
});

Also, your <option> elements don't have values. You used name instead, but that belongs on the <select>. Use value:

echo '<option value="'.$row['Type'].'">'.$row['Type'].'</option>';

Additionally, you're using a GET request instead of a POST request. So you need to look for the value in the $_GET array:

$sel = $_GET['selected'];

You have other typos too, such as an incorrect use of a variable in PHP:

"...".sel."..."

would be:

"...".$sel."..."

Though this brings up a point about SQL injection. You really shouldn't be directly concatenating the variable like that at all. Instead, use prepared statements with query parameters.

It's entirely possible that there continue to be other mistakes in the code I simply haven't spotted yet. You'll want your debugging to include two things:

  1. Looking at your PHP logs for errors.
  2. Using your browser's debugging tools to observe the AJAX request/response.

Upvotes: 1

Related Questions