0

I have an HTML form which selects towns from a MYSql Db and through PHP "foreach" returns an array of results, which are then seen in the dropdown. I would like to then be able to click on one of the returned results within the dropdown and use it to populate a table further on in the code as a PHP variable (or another way if possible). I have attached the code. The dropdown works, but the town that is clicked on does not return the expected result, but rather always returns the last result in the list, making me think that the JS portion of my code is incorrect. I have very limited knowledge of JS, so I may very well be approaching this totally incorrectly. Any input appreciated.

<div class="container">
   <div class="table-responsive">
      <table class="table table-hover tablewd">
        <thead>
           <tr>
              <th>Origin Town</th>
           </tr>
        </thead>
        <tbody>
           <tr>
              <td>
                <form>
                   <div class="form-group">
                      <select class="form-control" id="colltown" name="colltown">

                            <?php {
                               $sql1 = "SELECT * FROM town_info";
                               $sth1 = $pdo->prepare($sql1);
                               $sth1->execute();
                               $towns = $sth1->fetchAll(PDO::FETCH_ASSOC);
                               foreach ($towns as $town) {
                                  echo "<option value='$town[id]'>$town[place_name]</option>";
                               }
                            }?>

                            <script>
                               function myFunction() {
                                  document.getElementById("colltown").value;
                               }
                            </script>
                            <button onclick="myFunction()">
                               <?php echo $origin_town = $town[place_name];?>
                            </button>
                        </select>
                     </div>
                  </form>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
Matt.S
  • 287
  • 4
  • 20
AdieB
  • 119
  • 2
  • 10
  • 1
    This code sample seems a little incomplete to make a good assessment. Where's the rest of the form, or at least the opening and closing ` – tshimkus Feb 19 '19 at 08:18
  • I have updated the code. Initially when I posted, some of the code was mysteriously cut-off. This was kindly corrected by a user. – AdieB Feb 19 '19 at 08:31
  • 1
    You can access it in javascript the way you are doing it, but you won't be able to assign it to a PHP variable like that. PHP processes before any code is delivered to the browser, so you can't assign a PHP variable directly from javascript. My recommendation would be to use GET or POST from the form to make the PHP variable assignment. – tshimkus Feb 19 '19 at 08:44
  • Take a look at this question for a good way to make that happen: https://stackoverflow.com/questions/1917576/how-to-pass-javascript-variables-to-php – tshimkus Feb 19 '19 at 08:45
  • @tshimkus the solution that you reference uses a submit button, while I need to be able to click on an option on the dropdown, so I don't think it would work. – AdieB Feb 19 '19 at 08:56
  • 1
    Select an option, submit, and post. There is a way to do it by having javascript open a new PHP file, but I find it simpler to use something like that example that reloads the page and assigns the variable. – tshimkus Feb 19 '19 at 08:57

1 Answers1

1

Add change event to select and use this to grab the selected value

document.querySelector('select').addEventListener('change', function() {
  const selectedValue= this.value;
  console.log(selectedValue);
});
<select>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
</select>
random
  • 7,756
  • 3
  • 19
  • 25