dynamically dropdown in nodejs mysql

Question

I want to change the region according to the clients when a user click and select a client then the region dropdown change according to the region that are related to that client from databaseenter code here

Here is my client table:

Here is my Region table in which client_id is the foreign key:

This is my code

<div class="container">
  <h3>Add Area</h3>

  <form action="/add_areas" method="POST">
   
    <!--input type="text" placeholder="DistributorID" name="distributor_id"-->
    <input type="text" placeholder="Area Name" name="area_name" required="">
    <!-- <input type="text" placeholder="Contact ID" name="contact_id" required=""> -->

    <!-- <label>Client ID</label> -->
    <select name="client_id" required="">
     <option disabled selected value> -- select a Client  -- </option>
     <%for(i=0; i<clients.length; i++){%>
      <option value="<%= clients[i].id%>"><%= clients[i].client_name %></option>
     <%}%>
    </select>

    <select name="region_id" required="">
     <option disabled selected value> -- select a Region  -- </option>
     <%for(i=0; i<regions.length; i++){%>
      <option value="<%= regions[i].id%>"><%= regions[i].region_name %></option>
     <%}%>
    </select>
    <br>
    
    <button type="submit">Submit</button>
  </form>

  <br>
  <%if(areas.length>0) { %>
   <h3>All Existing Areas</h3>
   <!--For view-->
   <div class="table-rsponsive"> 
       <table class="table table-striped table-bordered table-sm " cellspacing="0" width="100%">
        <tr>
         <th>Area Name</th>
         <th>Client </th>
         <th>Region </th>
         <th colspan="2">Action</th>
        </tr>
      <% for(var i=0; i<areas.length; i++) {%>
        <tr>
          <td><%= areas[i].area_name %></td>
          <td><%= areas[i].client_name %></td>
          <td><%= areas[i].region_name %></td>

          <td><a href="/edit_areas/<%= areas[i].id %>"><button class="btn-primary">Edit</button></a></td>
          <td><a href="/delete_areas/<%= areas[i].id %>" onclick="javascript: return confirm('Are you SURE? If you delete this area All the town belongs to <%= areas[i].area_name %> area will automatically deleted!!');"><button class="btn-danger">Delete</button></a></td>
        </tr>
      <% } %>
    </table>
   </div>
   <% } 
   else{ %>
   <h3>No Area Found!!</h3>
  <% } %>
 
  <!--goto dashboard button-->
  <button type="submit" class="btn btn-primary btn-block" onclick="window.location.href='/dashboard.html'">Return to dashboard</button>
 </div>

Here is the page to add area: Here is the page to add area

Answer 1

You need to add a ajax request on onChange event for field_id=client_id to fetch regions based on selected client_id. For response you can design server according to your need, you can either generate HTML at server side or can get raw result from database in response and then generate HTML from it at client side. When you get the well suited HTML format for select options then append that html to region_id select.

Answer 2

Basically, solution boils down to the following:

//These are your target elements
const client = document.querySelector('#client');
const region = document.querySelector('#region');
const table = document.querySelector('#table');
//POST username upon change event and modify table 'div' and region'select' innerHTML's accordingly
client.addEventListener('change', function () {
    let xhr = new XMLHttpRequest();
    let user = this.value;
    xhr.open('POST', '/getRegionsByUser', true);
    xhr.send(user);
    xhr.onload = function(){
        if (xhr.readyState == 4 && xhr.status == 200) {
            let regions = JSON.parse(this.responseText);
            /* expected JSON-formatted string {list:[region1, region2, ...] */
            regions.list.forEach(region => {
                region.innerHTML += '<option value="'+region+'">'+region+'</option>';
                table.innerHTML += '...';
            });
        }
    };
});

server-side scripting depends heavily on your environment, conceptually, it is supposed to do SQL-select regions by username and responding with JSON-formatted list