Get selected value from dropdown list

Question

I am trying to get the selected value from the dropdown, but have no luck.

<select class="form-control" name="cars" onchange="getAvailableCars();">
   <?php getCars() ?>
</select>

getCars() function retrieves all available cars from the database, and they show in the dropdown menu.

Here is function getCars()

function getCars(){
    $link = new mysqli("localhost", "root", "", "cars");
    $link->set_charset("utf8");

    $sql=mysqli_query($link, "SELECT CarID, CarCode, CarName FROM cars a WHERE CarAvailable = 1");

    echo '<option value="">Select </option>';
    while($record=mysqli_fetch_array($sql)){
        echo '<option value= "' .$record['CarID']. '">' . $record['CarCode'] ."-|-". $record['CarName'] .' </option><br/>';
    }
}

Then I created JS function which will get selected Card ID from the select menu.

<script>
    function getAvailableCars() {

        var car = document.getElementById("cars");
        var selectedCar= car.options[car.selectedIndex].value;

        console.log(selectedCar);
        /*
        var arr = {artikal:selectedCar};
        $.ajax({ url: 'available-cars.php?a=1',
            data: arr,
            type: 'post',
            success: function(output) {
                document.getElementById("cars").value = output;
            }
        });
        */
    }
</script>

Console displays issue:

Uncaught TypeError: Cannot read properties of null (reading 'options')

Also, I have tried with Jquery, but I got in console undefined.

var cars = $("#cars:selected").val();

I was following link below, any other too but for some reasons, I cannot get the selected value: get-selected-value-in-dropdown-list-using-javascript

You added attribute `name` to tag `select` you should replace with `id` attribute or add it: ` — Raffaele, Dec 13 '21 at 10:56
@Raffaele that is correct. Thanks a lot, not sure how I missed this. — dcron, Dec 13 '21 at 11:00

score 0 · Answer 1 · answered Dec 13 '21 at 11:19

I think your problem is your car variable is not called right.

var car = document.getElementById("cars");

but your form have class = "form-control" and name = "cars" and dont have any id

<select class="form-control" name="cars" onchange="getAvailableCars();">

You may change car into

var car = document.getElementsByClassName("form-control");
// or
var car = document.querySelector(".form-control");

score 0 · Answer 2 · edited Aug 25 '23 at 19:39

    <!DOCTYPE html>
<html>
<body>

<form>
  Select your favorite fruit:
  <select id="mySelect" onchange="myFunction()">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="banana">Banana</option>
  </select>
</form>


<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

When a user selects an option from the dropdown menu, the JavaScript function myFunction() is triggered, and the selected value is displayed in a paragraph element with the id "demo". This allows users to select their favorite fruit from the list of options.

Here's a breakdown of how the code works:

The HTML <form> tag is used to create a form element.
Inside the form, there's a <select> element with the id "mySelect". This is a dropdown menu containing several <option> elements.
Each <option> element represents a fruit (Apple, Orange, Pineapple, Banana) and has a value attribute associated with it.
The onchange attribute in the <select> element specifies that the myFunction() JavaScript function should be called whenever the user changes the selected option.
The JavaScript function myFunction() is defined within a <script> tag. It retrieves the selected value from the dropdown using document.getElementById("mySelect").value and then updates the innerHTML of the paragraph element with the id "demo" to display the selected value.

This code allows users to interact with the dropdown menu, select a fruit, and see the selected fruit's name displayed below the dropdown menu.

Get selected value from dropdown list

2 Answers2