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?
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
After successfully deploying this basic smart contract using Remix, I encountered an issue when trying to interact with it through web3.js in my upcoming app. I used the evm version: paris for deployment and everything worked smoothly on Remix IDE.
Here i ...
I'm working on an index view where I want to update a table data dynamically using select_tag onchange feature without the need to refresh the page. Do I need to use Coffeescript to detect the onchange event, capture the new value, and then send it to ...
Unique Context
This inquiry pertains to a previous question of mine, which can be found at this link: How to handle apollo client errors crashing page render in Nuxt?. However, I'm isolating the focus of this question solely on Nuxt (excluding apollo ...
Currently working on an Angular project, I am facing a scenario where I have a link on page A that directs users to a different origin page B. The HTML code for the link is shown below:
...
<a href="https://another.origin"> PAGE B </a>
...
On ...
I am facing an issue with my Next Js project. I have implemented the backend logic to display data, but when I attempt to show all the data using the useEffect hook and the map function, I encounter the following error:
TypeError: Cannot read property &apo ...
I'm having trouble updating the request options as they are now deprecated. I can't seem to locate the alternative option for this.
Can anyone offer some assistance?
import { Injectable } from '@angular/core';
import { HttpClient } fr ...
I'm currently facing an issue with my CSS layout. Despite managing the problem in IE and seeing everything work well, the footer container has mysteriously disappeared! I've attempted to recode the CSS without success, even after trying for days ...
My code snippet in the HTML file contains Javascript:
<script>
$(document).ready(function(){
$("#sub").click(function(){
var user_issue = $("#issue").val(); ...
Currently, I am facing an issue with passing input from an HTML text box to a JavaScript variable. Once the input is stored in the JavaScript variable, it needs to be passed to a Python function for execution. Can someone provide assistance with this pro ...
I need to provide the date either from the view template or possibly from the controller in order for the highchart to display the data specified by the <highchart /> directive.
Explanation :
<ul>
<li ng-repeat="li in list"> ...
I'm facing an issue with my resize function where the contents within a window change when it reaches a certain width. I'm trying to achieve this same effect on window load but haven't been successful so far. Here's what I've attem ...
I need to develop an app that can access the tabs a user has open, but I'm struggling to find a way to do so without having my app run in Chrome itself. Creating an extension restricts the UI significantly, which is problematic since my app requires a ...
When developing JSF pages with stylesheets, everything seems to be working fine in the Eclipse preview function. However, when I test the pages on IE8, the styles do not seem to have any effect.
I am utilizing composite views to define a general layout fo ...
How can I validate phone numbers based on the selected country in Angular?
Are there any Angular packages specifically for this task?
I've attempted to use regex, but it only works for certain countries. I need a solution that can validate mobile an ...
I've been diligently working on a code to automatically populate dropdowns onchange, right after selecting the necessary values from an autocomplete search field. However, I am facing an issue where my autofill feature fails to work after making a sel ...
Can I incorporate two CSS frameworks into my current Nuxt.js project? Does anyone have any insight on why it might be beneficial to use two different CSS frameworks in a Vue.js project?
Please provide some guidance on this matter. I am looking to optimize ...
Hello,
I have written a code snippet that triggers an action on mouse click. Initially, I created a function that scrolls the screen to a specific element upon clicking another element:
(function($) {
$.fn.goTo = function() {
$('html, bo ...
Hey there, I'm dealing with a login form that includes fields for both username and password.
I have a PHP backend script that properly processes the data and encodes the response in JSON format.
However, my JQuery JS script utilizing Ajax doesn&apo ...
Just like the inquiry found on this page, I am striving to construct a grid of perfect squares, each containing an image with 100% height.
The issue arises from utilizing the padding-bottom: 100%; height: 0 method, which prevents height: 100% from functio ...
Embarking on my first ajax project, I believe I am close to resolving an issue but require some guidance. The webpage file below features an input field where users can enter their email address. Upon submission, the ajax doWork() function should trigger t ...