Access an element when the "Submit" button is clicked to get the values

Question

So here's a great example from https://developer.forecast.io/docs/v2

What I want to do and trying is this:

I have a simply webpage whereby I want to display the current forecast and extended forecast.

Here's my Index.html




    
        Weather Forecaster
        
        
        
        
        
        
        
        
        
    
    
        
            
                
                    
                        
                    
                    
                        Here's Today's Weather
                        
                            Day 1
                        
                        
                        
                            Day 2
                        
                        
                        
                            Day 3
                        
                        
                        
                            Day 4
                        
                        
                        
                            Day 5

Notice the "IFRAME".... the src is this: http://www.latlong.net/convert-address-to-lat-long.html

Now, if you go there, which is pretty cool, you can put ANY address to get the LAT LON for that address:

Here's a screen shot with an example LAT LON from DC... the Whitehouse.

OK, now, my code uses Angular with a simple controller and service...

Here:

APP:

/* global angular */
// Code goes here
var myApp;
myApp = angular.module("myApp", []);
myApp.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});
console.log("Host name is: " + document.location.hostname);
//if (document.location.hostname === "localhost") {
//    myApp.constant('URL', '/WeatherForecaster/js/json/');
//} else if (document.location.hostname === "omnimanger.co/wx" || "www.omnimanager.co/wx") {
//    myApp.constant('URL', '/js/json/');
//} else {
//    myApp.constant('URL', '/wx/js/json/');
//}
myApp.constant("URL", {
   //Default LAT/LON for CONCRETE 
   apiKey: "3bb0f0fe93c92922f0b42f9eabda48d0/",
   lat: "48.530031",
   lon: ",-121.879460",
   country: "us",
   uri: "https://api.forecast.io/forecast/"
}).config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});;

myApp.constant("wx", {
    data: {
        latitude: 0,
        longitude: 0,
        currently: {},
        minutely: {
            summary: "",
            icon: "",
            data: []
        },
        hourly: {
            summary: "",
            icon: "",
            data: []
        },
        daily: {
            summary: "",
            icon: "",
            data: []
        },
        flags: {
            sources: [],
            "lamp-stations": [],
            "isd-stations": [],
            "madis-stations": [],
            units: ""
        }
    }
});

CONTROLLER:

'use strict';
myApp.controller('wxController', function (wxDataService) {

    var ctrlWx = this;
    //Listen for the Submit (FIND) button on the iFrame

    ctrlWx.content = {};
    console.log("LAT/LON: ", ctrlWx.latlon);
    ctrlWx.fetchWx = function () {
        //General Data
        wxDataService.getWxData().then(function (result) {
            ctrlWx.content = result;
            console.log("All Data: ", result);
        });
    };
    ctrlWx.fetchWx();

});

SERVICE:

myApp.factory('wxDataService', function ($http, URL) {

    console.log("URL", URL);

        //DEFAULT Headers for KEY and AUTH TOKEN
    var headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': ['GET', 'POST'],
        'Access-Control-Allow-Headers': 'Content-Type',
        'Content-Type': 'application/json'
    };
    var myURL = {
        data: {
            header: headers,
            uri: URL.uri + URL.apiKey + URL.lat + URL.lon
        }
    };

    var getWxData = function () {
        return $http.get(myURL)
                .success(function (data) {
                    console.log("SUCCESS!");
                    console.log("The Weather Data is here: " + data);
                    return data;
                })
                .error(function (e) {
                    console.log("He\'s dead Jim!
", e);
                    return e;
                });
    };
    return {
        getWxData: getWxData
    };
});

SOLUTION I'm Trying to Achieve:

When the user enters the address and clicks the "FIND" button, which generates the LAT LON, I want to capture that LAT LON inside the IFRAME.

This is what I'm trying to do, but I know I need to make a directive that BINDS the "CLICK" or "SUBMIT" event to the FIND button. What I have below is NOT that; yet.

var latlon = {};
$(function () {
    $('#my-iframe').load(function () {

        $(this).contents().find("#latlongform, #gadres").live('blur', function (e) {
            latlon = {
                mylat: $("input[name='lat']").val(),
                mylon: $("input[name='lon']").val()
            };
            if (e) {
                console.log("Err: ", e);
                return e;
            }
        });
    });
});

GIVENS:

The FORM and the LAT LON are as follows:

    
        
            
                Address
                
                

                Write city name with country code for better results.
            
            
                
                    Latitude
                    
                
                
                    Longitude

QUESTION:

How can I get the LAT LON, "AFTER" the user clicks FIND, THEN fire my angular service to inject the CALL to the URL which gets the WEATHER DATA...as described. Here's that WEATHER DATA JSON OBJECT. It uses an API KEY which mine is limited to 1000 uses per day.

If you'd like to see what the result is on the weather API, you need to get a FREE API_KEY.... it gives 1000 hits per day...

Thanks everyone and I hope you can all this this is a VALID question.

Access an element when the "Submit" button is clicked to get the values

Answers (1)

Accessing the Forecast.io API with JSONP

Revised Code

Sample Result

Related Questions

Access an element when the &quot;Submit&quot; button is clicked to get the values

Answers (1)

Accessing the Forecast.io API with JSONP

Revised Code

Sample Result

Related Questions

Access an element when the "Submit" button is clicked to get the values