Q:

URL getting returned when trying to obtain value from select tag

I am new to flask and Javascript. All I am trying to do is to create a form with a dynamic dropdown list, get the values selected and put them in a database. 
Now I am in the first phase of getting the dynamic dropdown lists created.
Here is my python part of the code.
class Form(FlaskForm):
    site = SelectField('Site', choices=[(' ', ' '), ('International', 'International'), ('Domestic', 'Domestic')])
    location = SelectField('Location', choices=[])
    city = SelectField('City', choices=[])
    street = SelectField('Street', choices=[])
    sub_street = SelectField('BuildingStreet', choices=[])
    floor = SelectField('Floor', choices=[])
    room = SelectField('Room', choices=[])
    side = SelectField('Side', choices=[])

@app.route('/')
def basic():
    return render_template('basic.html')

@app.route('/Welcome', methods=['GET', 'POST'])
def index():
    form = Form()

    location_choice_list = [(locations.id, locations.location) for locations in
                            Hostname.query.filter_by(site='International').all()]
    form.location.choices = remove_duplicates.unique_list(location_choice_list)

    city_choice_list = [(cities.id, cities.city) for cities in Hostname.query.filter_by(site='International').all()]
    form.city.choices = remove_duplicates.unique_list(city_choice_list)

    street_choice_list = [(streets.id, streets.street) for streets in
                          Hostname.query.filter_by(site='International').all()]
    form.street.choices = remove_duplicates.unique_list(street_choice_list)

    sub_street_choice_list = [(sub_streets.id, sub_streets.sub_street) for sub_streets in
                              Hostname.query.filter_by(site='International').all()]
    form.sub_street.choices = remove_duplicates.unique_list(sub_street_choice_list)

    floor_choice_list = [(floors.id, floors.floor) for floors in
                         Hostname.query.filter_by(site='International').all()]
    form.floor.choices = remove_duplicates.unique_list(floor_choice_list)

    room_choice_list = [(rooms.id, rooms.room) for rooms in Hostname.query.filter_by(site='International').all()]
    form.room.choices = remove_duplicates.unique_list(room_choice_list)

    side_choice_list = [(sides.id, sides.side) for sides in Hostname.query.filter_by(site='International').all()]
    form.side.choices = remove_duplicates.unique_list(side_choice_list)

    return render_template('index.html', form=form)

@app.route('/location/<site>')
def location(site):
    print(site)

    choice_list = Hostname.query.filter_by(site=site).all()

    locationObjp = {'id': '', 'location': ''}
    c = [{'id': ' ', 'location': ' '}]
    for location in choice_list:
        locationObj = {}
        locationObj['id'] = location.location
        locationObj['location'] = location.location

        if locationObj['location'] != locationObjp['location']:
            c.append(locationObj)
            locationObjp = locationObj
        else:
            locationObjp = locationObj

    return jsonify({'Location_Choice_list': c})

@app.route('/city/<location>')
def city(location):
    print(location)

    choice_list = Hostname.query.filter_by(location=location).all()

    cityObjp = {'id': '', 'city': ''}
    c = [{'id': ' ', 'city': ' '}]
    for city in choice_list:
        cityObj = {}
        cityObj['id'] = city.city
        cityObj['city'] = city.city

        if cityObj['city'] != cityObjp['city']:
            c.append(cityObj)
            cityObjp = cityObj
        else:
            cityObjp = cityObj

    return jsonify({'City_Chocie_list': c})

So first I have created a class with all the dropdowns that the user gets to select from the form. Except for the site, all the other choices are populated initially with options corresponding to "International". i.e. All locations corresponding to "International", all cities corresponding to "International" and so on. I have used a small function that I have put up as a module to remove duplicate entries in the database that can't be avoided. Initially, when the form is displayed, everything works as expected. I have not put up the basic.html file because it just contains a link to "/Welcome". Also, there is no problem with the remove_duplicates function that I have used as a module.
This is my HTML part of the code.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    </head>
    <body>
        <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.site.label }} {{ form.site }}
        {{ form.location.label }} {{ form.location }}
        {{ form.city.label }} {{ form.city }}
        {{ form.street.label }} {{ form.street }}
        {{ form.sub_street.label }} {{ form.sub_street }}
        {{ form.floor.label }} {{ form.floor }}
        {{ form.room.label }} {{ form.room }}
        {{ form.side.label }} {{ form.side }}
        <input type="submit">
        </form>
        <script>
                var site_select = document.getElementById("site");
                var location_select = document.getElementById("location");
                console.log(site_select);
                console.log(location_select);
                site_select.onchange = function()  {

                    site = site_select.value;
                    console.log(site);

                    fetch('/location/' + site).then(function(response) {
                        response.json().then(function(data) {
                            var optionHTML = '';
                            for (var location of data.Location_Choice_list) {
                                optionHTML += '<option value="' + location.id + '">' + location.location + '</option>';
                                }

                                location_select.innerHTML = optionHTML;

                            })

                        })
                }

                var city_select = document.getElementById("city");
                location_select.onchange = function()  {

                    location = location_select.value;
                    alert(location);

                    fetch('/city/' + location).then(function(response) {
                        response.json().then(function(data) {
                            var optionHTML = '';
                            for (var city of data.City_Choice_list) {
                                optionHTML += '<option value="' + city.id + '">' + city.city + '</option>';
                                }

                                city_select.innerHTML = optionHTML;

                            })

                        })
                }

        </script>

    </body>
    </html>

Here is where the problem is. As we can see, there are two routes '/location/' and '/city/'. These two routes are to return a jsonified version of the locations that belong to a particular site and cities that belong to a particular location. The javascript does a fetch to these URLs and then uses the entries in the jsonified output to form the select statements for the next dropdowns. Now here the first dependent dropdown (location), on selecting "site", changes perfectly as expected. I have just written the exact function for getting the cities for a particular location. As can be seen from the code, the onchange values of the site and location are got through the usual (.value) attribute of the select statement. For the site, I get the correct value after selecting. But for location, after selecting, the value that is getting returned (I have alerted) is "http://127.0.0.1:5000/Welcome" and so this value is being used by the javascript while fetching which obviously will lead to a 404 error. 
So I am not sure, why the first function is working fine and the second is not. I want to know the reason why the location value is getting captured as a URL instead of the value selected. Because it's getting returned as a URL, I am getting the dreadful "Uncaught (promise) unexpected token < at position 0. I have also tried to print out the initial site_select and location_select values which also good without any errors. 
I have looked into a lot of posts in the net for this but nothing has worked till now and it's been a week now with this dreadful error. 
Thanks for the help in advance.

A:

Your location variable is conflicting with the window.location variable, which is taking the current document url- https://developer.mozilla.org/en-US/docs/Web/API/Window/location

var list = [{"id":" ","location":" "}, {"id":"CN0","location":"CN0"},{"id":"India","location":"India"},{"id":"Japan","location":"Japan"},{"id":"Honkong","location":"Honkong"},{"id":"GB0","location":"GB0"}];

const countries = document.querySelector('#countries');
let optionHTML = ""; 

list.forEach((obj) => {
    optionHTML += '<option value="' + obj.id + '">' + obj.location + '</option>';
});

countries.innerHTML = optionHTML;

countries.addEventListener('change', function() {
    location = this.value;
    // alert(location);
    alert(window.location === location);
});
<select name="" id="countries"></select>

Instead use different variable other than location or use block-scoped variable using let or const which are not hoisted and does not conflicts with the global variables. 

var list = [{"id":" ","location":" "}, {"id":"CN0","location":"CN0"},{"id":"India","location":"India"},{"id":"Japan","location":"Japan"},{"id":"Honkong","location":"Honkong"},{"id":"GB0","location":"GB0"}];


const countries = document.querySelector('#countries');

let optionHTML = ""; 

list.forEach((obj) => {
    optionHTML += '<option value="' + obj.id + '">' + obj.location + '</option>';
});

countries.innerHTML = optionHTML;

countries.addEventListener('change', function() {
    let location = this.value;
    console.log(location);
});
<select name="" id="countries"></select>

