I have successfully built a weather app which retrieves weather conditions based on geolocation. I modified the code to retrieve weather using the city name which is passed as a variable from a javascript alert box which works fine:
var city = window.prompt("Enter Your City");
updateByCity(city);
However when I create a form on the app itself and try to pass the form data to the updateByCity function using the following code:
document.getElementById("submit").onclick = function() {
var city = document.getElementById("city").value;
updateByCity(city);
The application does not retrieve any weather data. I dont know why. Using alerts I discovered that it passes the city variable to the updateByCity(city) function and successfully creates a URL to pass to AJAX but for some reason the logic breaks down when parsing the AJAX response.
Here is the code where I think I am having issues:
function updateByCity(city) {
//alert(city);
var url = "http://api.openweathermap.org/data/2.5/weather?" + "q=" + city + "&APPID=" + APPID;
sendRequest(url);
}
function sendRequest(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
var weather = {};
weather.icon = 'https://cors.5apps.com/?uri=http://openweathermap.org/img/w/' + data.weather[0].icon + '.png';
weather.humidity = data.main.humidity;
weather.wind = data.wind.speed;
//weather.direction = data.wind.deg;
weather.direction = degreesToDirection(data.wind.deg);
weather.desc = data.weather[0].description;
weather.loc = data.name;
// weather.temp = data.main.temp;
weather.temp = K2F(data.main.temp);
update(weather);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
It works fine if I send the variable via the alert but not via clicking Submit button on the form for some reason.