Question 276270 in PHP Question posted in
Official manual can be found here.

Trouble Accessing Selected Value from a Select Element with JavaScript and PHP

I have an HTML element populated with options using PHP. I’m trying to access the selected value from this dropdown list using JavaScript when the user makes a selection. However, the JavaScript code I’ve written to capture the selected value is not working correctly, and it always returns an empty value.

<form id="form" name="form" method="POST" action="selectDoctor">
                    <h2 class="heading__4"> Escolher Especialidade:</h2>
                    <select name="specialty" id="specialtySelect">
                        <option value=""> Selecione </option>
<?php
     foreach ($specialties as $specialty) {
            echo '<option id="result" value="' . $specialty['speciality_id'] . '">' . $specialty['speciality_name'] . '</option>';
        } 
?>
                    <button class="btn btn-primary mt-3">Seguinte</button>

    </form>

<script>
    const selectElement = document.getElementById("specialtySelect");
    const result = document.getElementById("result");

    selectElement.addEventListener("change", (event) => {
       console.log(event.target.value);
    });


</script>

Console.log(event.target.value) returns empty

Tags:

2

Answers


  1. 0

    You cannot use the same ID on your options.

    What you need to do is read the selected index of your <option>

    You also missed the closing </select> tag.

    In your script, you are currently only attempting to read the value once, not on the change event. See the example below.

    Working example: https://jsfiddle.net/2zopahtb/

    <form id="form" name="form" method="POST" action="selectDoctor">
    <h2 class="heading__4"> Escolher Especialidade:</h2>
    <select name="specialty" id="specialtySelect">
        <option value="" disabled selected> Selecione </option>
        <?php
        foreach ($specialties as $specialty) {
            echo '<option id="" value="' . $specialty['speciality_id'] . '">' . $specialty['speciality_name'] . '</option>'; // you cannot use the id 'result' on more than one thing. 
        }
        ?>
    </select>
    <button class="btn btn-primary mt-3">Seguinte</button>

</form>

<script>
    const selectElement = document.getElementById("specialtySelect");
    let result;

    selectElement.addEventListener("change", (event) => {
        result = selectElement.options[selectElement.selectedIndex].value
        console.log(result);
    });
</script>
    Login or Signup to reply.
  2. 0 
    <form id="form" name="form" method="GET" action="selectDoctor">
  <h2 class="heading__4"> Escolher Especialidade:</h2>
  <select name="specialty" id="specialtySelect">
    <option value=""> Selecione </option>
    <?php
     foreach ($specialties as $specialty) {
            echo '<option value="' . $specialty['speciality_id'] . '">' . $specialty['speciality_name'] . '</option>';
        } 
    ?>
  </select>
  <button class="btn btn-primary mt-3">Seguinte</button>
</form>

<script>
  const selectElement = document.getElementById("specialtySelect");

  selectElement.addEventListener("change", (event) => {
    console.log(event.target.value);
  });
</script>

    Here are the explanations for each fix:

    • I changed the method attribute of the form element from POST to GET. This means that the selected value will be appended to the URL as a query string when the form is submitted, and it can be accessed by the server or by JavaScript. Alternatively, you can use AJAX to send the data without reloading the page.
    • I removed the id attribute of the option elements. The id attribute should be unique for each element in the HTML document, and having multiple elements with the same id can cause problems when selecting them by JavaScript or CSS.
    • I removed the result variable and the result element from the JavaScript code, since they are not needed. You can access the selected value directly from the event.target.value property, which returns the value attribute of the option element that is selected.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search