-1

Hi I would like to add a feature to my login page where the user has an option of choosing from a list of drop down options, each option has its own api linked depending on each api determines whether the user can login, how would i be able to link 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>
Pardeep Dhingra
  • 3,916
  • 7
  • 30
  • 56
joe
  • 15
  • 1
  • 6

1 Answers1

2

You can use jQuery's .change() event, and then use this.value to check which option was selected and thus run the corresponding API call using an if statement.

See example below:

$("#hierarchy").change(function() { // Run this function when option selected
  let position = this.value;
  if(position == "Staff") {
    api_login('usa'/*ADD OTHER ARUGMENTS 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 API's");
  }
});


function api_login(country, dealer_code, userid_code, actionID = '10', VRN = '', filename = '') { /* ADD country AS A FIRST ARGUMENT */
  if (dealer_code === undefined || userid_code === undefined) {
    return false;
  }
  if (actionID === undefined) {
    actionID = '10';
  }
  var string = 'dealerID=' + dealer_code + '&salesExecID=' + userid_code + '&actionID=' + actionID + '&VRM=' + VRN + '&filename=' + filename;
  var querystring = country +'.snstest.judgeservice.co.uk/api.php?' + (string); /* CHANGE THIS LINE TO USE country */
  var error = [];

  $.getJSON(querystring, function(json) {
    var response = String(json.code);
    var message = String(json.message);
    var ident = String(json.identifier);
    var username = String(json.accountName);
    var siteName = String(json.siteName);
    console.log(json);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

uk.snstest.judgeservice.co.uk/api.php? usa.snstest.judgeservice.co.uk/api.php? france.snstest.judgeservice.co.uk/api.php? so depedning what country
student=uk staff=usa teacher=france

If you plan to add further options to your dropdown, I suggest you use an object with the key being the option value, and the value of the key is the function to trigger the API call.

Moreover, with the above code, you can use api_login() with the country passed through. You still need to add your other arguments but as you haven't provided what they are I haven't included them. Also, note that the URL API's which you linked currently don't work with the country appended to the front

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • Thanks very much, could you show me an example on how to add the corresponding api call? – joe Dec 13 '18 at 10:51
  • @Falakii- I can't as I don't know what API your using – Nick Parsons Dec 13 '18 at 10:53
  • The URL doesn't link to anything... (site can't be reached) – Nick Parsons Dec 13 '18 at 10:58
  • Okay, do you know the parameters used to query the API (the query string to attach) ? Eg: I need to know what `snstest.judgeservice.co.uk/api.php?this=Student` <--- the `this` is – Nick Parsons Dec 13 '18 at 11:01
  • thats how i currently login but i want to add the drop down with a list of 3 different api calls – joe Dec 13 '18 at 11:14
  • ok, how do you want the API calls to differ from each other? (eg: do you want the `dealer_code` to change, the `userid_code` to be different? – Nick Parsons Dec 13 '18 at 11:18
  • ok, so lets say I select "student" this will do an API call to the `uk` api, now if I choose "teacher" do you want this to do a call to a different country's API? – Nick Parsons Dec 13 '18 at 11:24
  • yh thats exactly what i want – joe Dec 13 '18 at 11:25
  • Ok, so can you tell me what selection value corresponds with what country? Eg: "student" corresponds with `uk`, "teacher" corresponds with `us`, "staff" corresponds with ...? – Nick Parsons Dec 13 '18 at 11:26
  • Ok, I've edited my answer. Please note that when you call the `api_login()` function you still must pass through all your arguments. Also you can see the lines I've edited in your function by the commented lines. Lastly, uk.snstest.judgeservice.co.uk/api.php? usa.snstest.judgeservice.co.uk/api.php? france.snstest.judgeservice.co.uk/api.php? aren't currently up and running so it won't currently work – Nick Parsons Dec 13 '18 at 11:41
  • thank you for your help, just a quick question where did you get the parameter country from – joe Dec 13 '18 at 12:12
  • When I call the function `api_login` I pass through `country`. The country I pass through is based on the selection I make and is determines in the `change` event's function. So if the value is "Student" I pass through `"uk"` as the country (`api_login("uk")`) so that I can use `uk.snstest.judgeservice.co.uk/api.php?` as my API to query. So the `country` is added to the front of the URL. – Nick Parsons Dec 13 '18 at 12:15
  • hi is there any chance you can help me further, i can send you my email etc – joe Dec 16 '18 at 01:23
  • @Falakii- hey, I might be able to - depending on how big the task is :P - Do you think you could open a new question with what you need help with? – Nick Parsons Dec 16 '18 at 01:27
  • its still same question its just that i couldn't get it to work when adding the code to my actual code base, wondering if i could send you the code and see if you can make it work? – joe Dec 16 '18 at 15:40
  • @Falakii- ok, you just need to let me know what each parameter should be in the URL. If you upload your project to GitHub or Google docs I can download it and take a look – Nick Parsons Dec 17 '18 at 10:39