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:
First, my JavaScript:
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";
}
}
Second, the HTML form:
<head>
<script src="http://ift.tt/1bYgB9H"></script>
<script type="text/javascript" src="GeoCoder.js"></script>
</head>
<h2>Google Geocoder</h2>
<form name="myform">
<div>
Address:
<br>
<input type="text" id="address" name="address">
<input type="button" value="Long/Lat" id="firstButton" onclick="codeAddress()">
</div>
<div>
<br>
Latitude     Longitude:
<br>
<input type="text" id="latitude" readonly>
<input type="text" id="longitude" readonly>
</div>
<br>
<div
<br>
Email:
<br>
<input type="text" id="email" readonly=>
</div>
<div>
<br>
Counties:
<br>
<select id="counties" onchange="return setEmail()">
<option data-value="0" value="Choose One">Choose One</option>
<option data-value="1" value="Charlotte">Charlotte</option>
<option data-value="1" value="Collier">Collier</option>
<option data-value="1" value="Hillsborough">Hillsborough</option>
<option data-value="1" value="Lee">Lee</option>
<option data-value="1" value="Manatee">Manatee</option>
<option data-value="1" value="Pasco">Pasco</option>
<option data-value="1" value="Pinellas">Pinellas</option>
<option data-value="1" value="Polk">Polk</option>
<option data-value="1" value="Sarasota">Sarasota</option>
<option data-value="3" value="Brevard">Brevard</option>
<option data-value="2" value="Broward">Broward</option>
<option data-value="3" value="Indian River">Indian River</option>
<option data-value="2" value="Martin">Martin</option>
<option data-value="2" value="Miami-Dade">Miami-Dade</option>
<option data-value="2" value="Monroe">Monroe</option>
<option data-value="2" value="Palm Beach">Palm Beach</option>
<option data-value="3" value="St Lucie">St Lucie</option>
</select>
</div>
</form>
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.
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!
Aucun commentaire:
Enregistrer un commentaire