Is there a way to dynamically change select forms in HTML?

Question

I have a web application where a user can change the descriptions of certain events for their use in a tourists android app.

Thing is, as for now, the form has 2 fields, a select type of field with all the events in the database, and a text field where the user writes the new description.

Now, while this is enough, when the app is finished and released to the public, the database will have hundreds of events. So, I thought of making it so there is a 3rd field called "PLACE". And once a place is selected, the select form of the events will change, only showing the events related to the place (Example: Botanic Garden will only show data of the medieval fair and not of, let's say, a play of Hamlet).

¿Is this possible with JS?

This is the code I'm using:

<html>
   <head>
   <link rel="stylesheet" href="style_form.css">

   <script type="text/javascript">
       //auto expand textarea
       function adjust_textarea(h) {
           h.style.height = "20px";
           h.style.height = (h.scrollHeight)+"px";
       }
   </script>
</head>

   <body>

       ENTRE
   <form class="form-style-4" action="update.php" method="post">
       <br>
   <label for="id"><span>Elija un evento a cambiar</span>
   <br>
     <select name="id">

         <?php

           $server = I;
           $usuario = WONT;
           $pass = SHOW;
           $database= THIS;

           $mysqli = new mysqli($server, $usuario, $pass, $database);

           $query = $mysqli -> query ("SELECT * FROM INFORMACION_EVENTOS");

           while ($valores = mysqli_fetch_array($query)) {
               echo '<option value="'.$valores[id].'">'.$valores[titulo].'</option>';
           }

       ?>
     </select>
     <br>
     </label>
     <label for="descripcion">
     <span>Descripcion</span>
     <br>
     <textarea name="descripcion" onkeyup="adjust_textarea(this)" required="true" placeholder="Max 50 caracteres"></textarea>

     </label>
     <input type="submit" value="Submit">
   </form>
   </body>
</html>

You should use targeted queries rather than `SELECT * FROM INFORMACION_EVENTOS`, such as based on place. Which would also require switching to prepared statements since you would be relying on user input. — EternalHour, Apr 21 '20 at 20:50

score 0 · Accepted Answer · answered Apr 21 '20 at 20:54

Yes. That is one of the primary purposes of Javascript in the browser - to manipulate the Document Object Model (DOM). There are two ways to go about it: You can build the data into the Javascript, perhaps dynamically generating all or a portion of the Javascript on the server side, as the page is delivered, building objects or arrays of the various options you wish to have and including them in the Javascript sent to the browser. This way becomes cumbersome and unwieldy as the amount of data increases.

The other option is to use AJAX and a server API to allow the page to request the options as the selection changes. This is how most sites manage it, but it can be a fair bit more work, as it requires code on both the server and the client, with a defined API for interaction.

As for physically manipulating the values in the <select> element, you can either write something yourself, similar to this StackOverflow answer, or you can use a DOM library like jQuery or Angular, etc.

Is there a way to dynamically change select forms in HTML?

1 Answers1