Getting my JS and HTML form to work with Ember.js
<p>I'm quite new to JS, and have been practicing JS by interacting with a small HTML form I created. I've successfully got the functionality that I was trying to work. Now, I'm trying to make what I have function with the Ember framework.
So I've created a form that based on an entered location, finds and returns the longitude and latitude (I used Google Geocode); I've also created a dropdown menu that based on the selected option, fills a text field with a specific email address. The code I have:</p>

<p><strong>First, my JavaScript:</strong></p>

<pre><code>function codeAddress(){
var geocoder = new google.maps.Geocoder();
var address  = document.getElementById("address").value;
alert("Address entered: "+address);
geocoder.geocode( {'address': address}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK)
{ 
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    //alert("Latitude : " + latitude + "   -   " + "Longitude : " + longitude);
    document.getElementById("latitude").value = latitude;
    document.getElementById("longitude").value = longitude;
}
else
{
    alert("Geocode was not successful for the following reason: " + status);
}}); 
}
function setEmail(){
    var county = document.getElementById("counties");
    var selectedOption = county.options[county.selectedIndex];
    var dataValue = selectedOption.getAttribute("data-value");
    var textBox = document.getElementById("email");
    if(dataValue==="1"){
        textBox.value = "first@email.com";
    }
    else if(dataValue==="2"){
        textBox.value = "second@email.com";
    }
    else if (dataValue==="3"){
        textBox.value = "third@email.com";
    }
    else{
        textBox.value = "None Selected";
    }
}
</code></pre>

<p><strong>Second, the HTML form:</strong></p>

<pre><code>&lt;head&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="GeoCoder.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;h2&gt;Google Geocoder&lt;/h2&gt;
&lt;form name="myform"&gt;
    &lt;div&gt;
        Address:
        &lt;br&gt;
        &lt;input type="text" id="address" name="address"&gt;
        &lt;input type="button" value="Long/Lat" id="firstButton" onclick="codeAddress()"&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;br&gt;
        Latitude&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;Longitude:
        &lt;br&gt;
        &lt;input type="text" id="latitude" readonly&gt;
        &lt;input type="text" id="longitude" readonly&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;div
        &lt;br&gt;
        Email:
        &lt;br&gt;
        &lt;input type="text" id="email" readonly=&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;br&gt;
        Counties:
        &lt;br&gt;
        &lt;select id="counties" onchange="return setEmail()"&gt;
            &lt;option data-value="0" value="Choose One"&gt;Choose One&lt;/option&gt;
            &lt;option data-value="1" value="Charlotte"&gt;Charlotte&lt;/option&gt;
            &lt;option data-value="1" value="Collier"&gt;Collier&lt;/option&gt;
            &lt;option data-value="1" value="Hillsborough"&gt;Hillsborough&lt;/option&gt;
            &lt;option data-value="1" value="Lee"&gt;Lee&lt;/option&gt;
            &lt;option data-value="1" value="Manatee"&gt;Manatee&lt;/option&gt;
            &lt;option data-value="1" value="Pasco"&gt;Pasco&lt;/option&gt;
            &lt;option data-value="1" value="Pinellas"&gt;Pinellas&lt;/option&gt;
            &lt;option data-value="1" value="Polk"&gt;Polk&lt;/option&gt;
            &lt;option data-value="1" value="Sarasota"&gt;Sarasota&lt;/option&gt;
            &lt;option data-value="3" value="Brevard"&gt;Brevard&lt;/option&gt;
            &lt;option data-value="2" value="Broward"&gt;Broward&lt;/option&gt;
            &lt;option data-value="3" value="Indian River"&gt;Indian River&lt;/option&gt;
            &lt;option data-value="2" value="Martin"&gt;Martin&lt;/option&gt;
            &lt;option data-value="2" value="Miami-Dade"&gt;Miami-Dade&lt;/option&gt;
            &lt;option data-value="2" value="Monroe"&gt;Monroe&lt;/option&gt;
            &lt;option data-value="2" value="Palm Beach"&gt;Palm Beach&lt;/option&gt;
            &lt;option data-value="3" value="St Lucie"&gt;St Lucie&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>I started playing around with Ember and have successfully completed the quick-start guide etc, but I don't really grasp how the html-form needs to change for my project to run. So far, I've put my .js file in the "Controller"-folder, and plan to put my html code into the .hsb file inside the "template"-folder. </p>

<p>My main question is, what do I need to change in my HTML form for it to function within Ember? Any help or suggestions about Ember are apprecited!</p>