tips for selecting various API requests based on the selected drop down menu choice

Hey there! I'm looking to enhance my login page by adding a feature that allows users to select from a dropdown menu with different options. Each option will be linked to a specific API, and based on the API response, the user's ability to log in will be determined. How can I go about linking an API call to each menu option?

<label for="Hierarchy">hierarchy</label>
<select name="hierarchy" id="hierarchy" value="">
  <option value=""></option>
  <option value="Staff">staff</option>
  <option value="Teacher"> teacher</option>
  <option value="Student">student</option>
</select>

Answer №1

To dynamically trigger API calls based on the option selected in a dropdown menu using jQuery, you can utilize the .change() event and retrieve the selected option value with this.value. This allows you to run the corresponding API call by evaluating the option value within an if statement.

Here's a demonstration of how this can be implemented:

$("#hierarchy").change(function() {
  let position = this.value;
  if(position == "Staff") {
    api_login('usa'/*ADD OTHER ARGUGMENTS HERE*/);
  } else if(position == "Teacher") {
    api_login('france'/*ADD OTHER ARUGMENTS HERE*/);
  } else if(position == "Student") {
    api_login('uk'/*ADD OTHER ARUGMENTS HERE*/);
  } else {
    console.log("Stop/Don't run any APIs");
  }
});

function api_login(country, dealer_code, userid_code, actionID = '10', VRN = '', filename = '') {
  // Function implementation
}

If you intend to expand the options in your dropdown, consider using an object where the key is the option value and the value is the function responsible for triggering the API call.

Additionally, make sure to pass the country parameter through api_login() for dynamic API endpoint selection. As for other arguments, they need to be included based on your requirements. Note that the current URLs for API endpoints do not support appending the country at the beginning.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking on a DIV using jQuery, with anchor elements

I have a method for creating clickable divs that works well for me: <div class="clickable" url="http://google.com"> blah blah </div> Afterwards, I use the following jQuery code: $("div.clickable").click( function() { window.location ...

Retrieve an element generated by a React script without using the ref attribute

There is a chat button on my website generated by a script (zendesk chat) that creates an iframe with the ID "launcher". I am using Nextjs and I am trying to access this element, but I am unable to attach a ref since I do not have the code. I have been sea ...

Make the div fill the entire width and height of its parent element

Here is the code I am working with: <div> <div class="inner"></div <img src="blabla" /> </div> My goal is to make the .inner div 100% width and 100% height of its parent div, which is dependent on the dimensions of th ...

Ways to unzip binary information in node.js

Once I have decoded my data from base 64 to binary, my next step is to unzip this information. In my project, I am using node.js instead of PHP, which has a convenient gzdecode() function for decompressing data. However, with node.js, I am unsure of how t ...

The slideUp function is not functioning as expected

I am trying to implement a slideUp effect on my webpage. Here is the code within my <body> tag: <script> $('#slide_up').click(function(){ $('p.text_study').slideUp('slow', function() { $ ...

A guide on arranging the JSON array within an AngularJS controller

Can someone assist me with sorting the JSON list provided below in the controller and then displaying it in the view? The orderBy filter only sorts one level, but I need it to sort recursively for all children. Input: R2 -->S4 ------>T5 ------> ...

Exploring AngularJS unit testing: integrating async and await with Jasmine

I'm currently facing a challenge with unit testing my Angular service using the async/await keywords in the respective (Jasmine) unit tests below. The test for the built-in Promise is functioning correctly, however, I am encountering difficulties in g ...

The element 'Listitem' is unrecognized and cannot be found in the current context

I am currently working on an ASPX project in Visual Studio and have encountered an issue with a Drop Down field. It appears that the List Items are being ignored in my code. Can anyone advise me on what might be missing? <form runat="server"> &l ...

Checking if the upload process has been completed using XMLHttpRequest Level 2

Currently, I am utilizing ajax for uploading files. Once the file has been uploaded, PHP needs to conduct a thorough check on it (including mime type, size, virus scan using clamscan, and more). This process can take a few seconds, especially for larger fi ...

I'm looking for recommendations on the best technologies to implement in a location-based mobile app. Any suggestions

Currently working on a server-side website tailored for mobile devices. My main objective is to create a member system where users can log in and share their geolocation data. Once logged in, the user's geolocation information will be stored in my dat ...

Unable to execute app.get in Express framework of Node.js

const express = require('express'); let router = express.Router(); router.get('/create-new', (req, res, next) => { res.send('<form action="/submit-data" method="POST"><input type="text" name="name"><button ...

Error in Cordova Android Compilation ("unable to locate Build Tools version 24.0.1")

I'm currently experiencing some difficulties while trying to compile my Cordova project on Android. Upon entering the command "cordova build Android", I encountered the following error message: FAILURE: Build failed with an exception. * What caused ...

Struggling with transferring a hidden form value from the database to a PHP if-statement

In my database table named "Related," I have 3 columns: related_id article_id object_id This table tracks the relationships between articles and objects. I recently updated the code to only include a delete button (x). When a user clicks on this button, ...

Utilize Ajax to showcase MySQL query outcomes upon onClick() event

As a newcomer to Ajax scripts, I am currently working on creating a script that will showcase MySQL query results when a user clicks on a specific link. My approach involves utilizing the onClick() function to trigger an Ajax script. Below is a snippet of ...

Spacing between Div tags

Struggling with a tricky HTML cross-browser problem. The site was built by multiple people, making it quite messy, but needs to go live as soon as possible! Each of the 4 page layouts on the site are different and handled by separate classes. However, whe ...

ExpressJS refuses to wait for my promise to be fulfilled

I'm in the process of creating a search-page on my server. Whenever the endpoint is accessed and the user waits for the search function to deliver the results and display them on the page, Express somehow redirects to the 404 handler instead. An error ...

Issue with parent-child communication in React.js causing malfunction

I am facing an issue with maintaining state between two different JavaScript files using React. The parent class, break.js, is defined as follows: export default function AlertDialog(props) { const [demoOpen, setDemoOpen] = React.useState(true); ...

What's the best way to refresh append() functionality within a modal? I'm currently working with NODE JS and AJAX and

Whenever I click the modal, the append() calls are adding HTML content. But if I try to use empty() or html(), the modal stops appearing altogether. What is the correct approach to creating this modal? function loadModalContent(id) { $('#myModal& ...

Choosing default value in edit form in CakePHP while using virtual fields

In my edit form, I have successfully pre-selected values without any issues. However, there is a select input field that contains objects from the class ContactPerson. To display the prename and lastname in the view, I created a virtual field called fullna ...

Implementing a try-catch-finally block in Javascript to handle errors during JSON parsing appears to be ineffective

As someone relatively new to web scripting, I find the similarities between Java try-catch blocks and Javascript ones intriguing. However, my attempts at using them have yielded slightly different results than expected. Here is a snippet of code showcasing ...