Johnane Umslana Johnane Umslana - 3 months ago 17
Javascript Question

Why doesn't Javascript pass value to textbox MVC by id?

I'm trying to add the lat and long into the textboxes provided.
There seems to be a problem because when I hardcode the address into the variable, it return the lat and long but as soon as I retrieve the address by the textbox values, it doesn't work. How come?

Here is the view with the code:

<div class="form-group">
@Html.LabelFor(model => model.StreetNr, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.StreetNr)
@Html.ValidationMessageFor(model => model.StreetNr)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.StreetName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.StreetName)
@Html.ValidationMessageFor(model => model.StreetName)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Suburb, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Suburb)
@Html.ValidationMessageFor(model => model.Suburb)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Town, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Town)
@Html.ValidationMessageFor(model => model.Town)
</div>
</div>




create_click = function () {

var geocoder = new google.maps.Geocoder();
//var address = 'summerstrand';
var address = '102 Prince Alfred North End Port Elizabeth'
//var address = document.getElementById('StreetNr').value + ' ' + document.getElementById('StreetName').value + ' ' + document.getElementById('Suburb') + ' ' + document.getElementById('Town');

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('Lat' + " " + latitude + " " + 'long' + " " + longitude);
document.getElementById('EventLat').value = latitude;
document.getElementById('EventLong').value = longitude;
}
else {
alert("Location not found, Please enter a valid address");
document.getElementById('StreetNr').value = " ";
document.getElementById('StreetName').value = " ";
document.getElementById('Suburb').value = " ";
document.getElementById('Town').value = " ";
document.getElementById('ZipCode').value = " ";
}
});

document.getElementById('Get_Location').click();
};

Answer

Try this:

 var geocoder = new google.maps.Geocoder();
        //var address = 'summerstrand';
        var address = document.getElementById('StreetNr').value + ' ' + document.getElementById('StreetName').value + ' ' + document.getElementById('Suburb').value + ' ' + document.getElementById('Town').value;

        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('Lat' + " " + latitude + " " + 'long' + " " + longitude);
                document.getElementById('EventLat').value = latitude;
                document.getElementById('EventLong').value = longitude;
            }
            else {
                alert("Location not found, Please enter a valid address");
                document.getElementById('StreetNr').value = " ";
                document.getElementById('StreetName').value = " ";
                document.getElementById('Suburb').value = " ";
                document.getElementById('Town').value = " ";
                document.getElementById('ZipCode').value = " ";
            }
        });

You forget to give .value to Suburb and Town Please also check you get proper address from editor in console with using Console.log(address);

Comments