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

I want to do like that js-tutorials.com/javascript-tutorial/… by using the values from database not hard coded. — Lambda Theta
– Lambda Theta, Commented Dec 26, 2018 at 11:08
js-tutorials.com/javascript-tutorial/… . I want the output like the output in that link but in this link the input is hard coded I want the according to the database. — Lambda Theta
– Lambda Theta, Commented Dec 26, 2018 at 11:48

Anubhav Gupta · Accepted Answer · 2018-12-26 09:53:46Z

2

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.

answered Dec 26, 2018 at 9:53

Anubhav Gupta

10210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lambda Theta Over a year ago

How can I add ajax. could you help me

score 1 · Accepted Answer · 2018-12-26 13:13:09Z

1

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

edited Dec 26, 2018 at 13:13

answered Dec 26, 2018 at 10:19

user3307073

12 Comments

Lambda Theta Over a year ago

How I can display the result from mysql. When I have selected client on the first dropdown and then display the regions on the second dropdown according to that client from database??

Lambda Theta Over a year ago

The Client is not hard coded it can be change, one client may have multiple regions and I want a solution that can be changed accordingly.

Lambda Theta Over a year ago

and when we select a client then only those regions belongs to that client appears on the regions drop down

Lambda Theta Over a year ago

I want to do like that js-tutorials.com/javascript-tutorial/… by using the values from database

user3307073 Over a year ago

You may POST your client_id to the server, do SELECT region_name FROM regions WHERE client_id={received_value} server side, respond with query results, and change your div and dropdown contents. That's roughly the logic.

|

Collectives™ on Stack Overflow

dynamically dropdown in nodejs mysql

2 Answers 2

1 Comment

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related