How do I send a Latitude & Longitude Value For AJAX to get Information From GeoNames

user_16666765 0
Viewed 112

I need some help and advice if possible.

I'm working on a task for an online course and I'm stumped. I have the below html, trying to send a latitude value to ajax for a php request to geonames API and return the nearest ocean. I have tried a couple of different ways as shown below in the html code.

    <select id="latitude">
        <option value= "3.4360">3.4360</option>
        <option value="lat">133.7751</option>
        <option value="lat">106.3468</option>
    </select>

    <select id="longitude">
        <option value= 55.3781>55.3781</option>
        <option value="lng">25.2744</option>
        <option value="lng">56.1304</option>
    </select>

And this is the ajax request that should be pulling the info from the above html.

$('#btnRun').click(function() {
    $.ajax({
        url: "libs/php/getCountryInfo.php",
        type: 'POST',
        dataType: 'json',
        data: {
                lat: parseInt($('#latitude').val()),
                lng: parseInt($('#longitude').val())
            },
            success: function(result) {

                console.log(JSON.stringify(result));

                if (result.status.name == "ok") {

                    $('#txtDistance').html(result['data'][0]['distance']);
                    $('#txtGeonameID').html(result['data'][0]['geonameid']);
                    $('#txtName').html(result['data'][0]['name']);
                }
            
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // your error code
            }
        }); 
    
    });

I don't think the two link up at all and I had a look at the parseInt option as well but I am out of ideas now.

Thank you for any help you can give.

php json ajax
1 Answers

The <option> tags in your Html are wrong, the value attribute is set to the strings lat and lng and not the actual latitudes and longitudes.

<select id="latitude">
    <option value="3.4360">3.4360</option>
    <option value="133.7751">133.7751</option>
    <option value="106.3468">106.3468</option>
</select>

<select id="longitude">
    <option value="55.3781">55.3781</option>
    <option value="25.2744">25.2744</option>
    <option value="56.1304">56.1304</option>
</select>

Also, if you exclude the value attribute then the text inside the option is considered its value. The markup below is equivalent to the one above.

<select id="latitude">
    <option>3.4360</option>
    <option>133.7751</option>
    <option>106.3468</option>
</select>

<select id="longitude">
    <option>55.3781</option>
    <option>25.2744</option>
    <option>56.1304</option>
</select>

Latitude and longitude values aren't integers so you cannot use parseInt on them, also there is no reason to parse them as numeric values as they will be converted back to String to be sent in the ajax call

$.ajax({
    url: "libs/php/getCountryInfo.php",
    type: 'POST',
    dataType: 'json',
    data: {
            lat: $('#latitude').val(),
            lng: $('#longitude').val()
    },
    success: function(result) {

        console.log(JSON.stringify(result));

        if (result.status.name == "ok") {

            $('#txtDistance').html(result['data'][0]['distance']);
            $('#txtGeonameID').html(result['data'][0]['geonameid']);
            $('#txtName').html(result['data'][0]['name']);
        }
        
    },
    error: function(jqXHR, textStatus, errorThrown) {
            // your error code
    }
});
user_13530110
Related