Skip to main content

How to use AJAX for fetching data in child dropdown by selecting Parent dropdown - Nodejs , Expressjs, MongoDB

 // so here i have dummy database to understand - 


suppose we have Thee product categories electronic, Garments & home appliance , In which we have subcategories please refer below two pictures 


1. Category (parent Dropdown ) // MongoDB database


2. Subcategory (child Dropdown ) 

    


now I want that if  I would  select product category, product subcategories should automatically fetched in in second or child dropdown

 

=====================//addProduct.ejs Start =================================

<form method="post" action="/admin/launchp" enctype="multipart/form-data">



<div class="form-group">

<label for="catnm" style="color: #870A30;">Product Category </label>

<select class="form-control" id="category-dropdown" name="catnm">

<option value="">Product Category:</option>

<% if(clist.length){

for(var i = 0; i< clist.length; i++) {%> 

<option id="catnm_id" value="<%= clist[i].catnm %>">

<%= clist[i].catnm%>

</option>

<% } } %>

</select>

</div>


<div class="form-group">

<label for="subcatnm"style="color: #870A30;" >Product Sub Category:</label>

<select class="form-control" id="subcategory-dropdown" name="subcatnm">

</select>

</div> 


</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$('#category-dropdown').on('change', function() {

  var _id = $('#category-dropdown').val();

$("#subcategory-dropdown").html('');

$.ajax({

url: "/admin/get-subcat-by-category",

type: "POST",

data:{ catnm : _id },

dataType: 'json',

success: function(result) {

  console.log(result);

$('#subcategory-dropdown').html('<option value="">Select Subcategory </option>');

$.each(result.states, function(key, value) {

$("#subcategory-dropdown").append('<option value="' + value.subcatnm + '">' + value.subcatnm + '</option>');

});


}

});

});

  </script>

//====================addProduct.ejs End  =========================


//=================Backend Code Start ==============================

//router.js  //create your own router & schema  file or modify & Put this code in your file 

          //= using AJAX fetch product subcategory on behalf of product category

router.post("/get-subcat-by-category",(req,res)=>{

  CategorySchemaModel.find(req.body,(err,result)=>{

      console.log(result[0].subcatnm)

   res.json({

   msg: 'success',

   states: result

});  

  }).catch((err)=>{

   console.log(err);

   res.json({

msg: 'error'

});

  });

 });

===================== router.js end ==================


here here is our final result -   




Comments

Post a Comment

Popular posts from this blog

Part 19- Router (Networking Devices)- Computer Networking- CCNA

Hello friends...i am Vasu Birla and today will discuss about the most important Networking Device ..Router.  so let's start... ROUTER Router is a device which connect two or more networks together, which is why router is also known is Inter-networking device also. Inter-networking means two or more networks are connected together with the help of router. one more thing router is just like a computer  but it is designed for routing only, our computer can be router also but that are software router while hardware router which are specialize for routing is more efficient and fast than software router.  There is a Operating System installed on router which get moves data from one network to another network with the help of routing table.  Router does work on Network layer or Layer 3 of the OSI model.  Cisco Router There many companies which manufacture Router but main companies are - Cisco , Juniper , HP, 3com and Nortel  ...
1 comment
Read more

How to deploy NodeJS app on server with Apache2 and acess it with Server IP addresss - Node JS deploy project Live.

     hello friens , This is Vasu Birla , in previous post we have seen the deployement of NodeJS app on AWS instance server instance but AWS server is expensive than other servers . SO today we will use simple Ubuntu server for making Live out Project using Apache2 . At the end you will be abe to access your NodeJS app using server IP address from anywhere  .. 1.  Login to your server using SSH terminal . (in AWS part i already explained how to do this )     -> Open your putty in hostname put your server IP -      login with ssh username ->root and password     (if you dont have root username and pass ask your      provider or reset it from cpanel or hosting panel ) 2. after login - on terminal you can Put your project anywhere.     There are two ways to put your project folder on server location     (i) - > using Github - (very popular and easy to track your everyday code changes t...
Post a Comment
Read more

GitHub Repo Collaboration Work on single project

 =============================================== To collaborate effectively with your friend on the same project, you should use Git branches to manage different lines of development. Here's a step-by-step procedure you can follow to streamline collaboration: 1. Create Separate Branches for Each Developer Create a New Branch for Your Friend: On your local repository, create a new branch for your friend. For example if your friend name is kilvish , if you want to create a branch named kilvish , you would run: make sure you would be on main branch already   command->  git checkout -b kilvish git push origin kilvish 2. Set Up Your Friend’s Environment( On your Friend's System )  at kilvish side  run ->  Clone the Repository (if not already done): If your friend hasn’t cloned the repository yet, they should do so: command ->  git clone https://github.com/Vasu-Birla/your-repo.git   // your your main clone line  Fetch All Bran...
Post a Comment
Read more