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

Question

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 1

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);

Answer 2

这段简单的代码解决了这个问题。

它返回的错误是：值＆＃39; [object HTMLInputElement]＆＃39;无效

以下是我的问题的解决方案：

        var address1 = document.getElementById("StreetNr").value + " " + document.getElementById("StreetName").value;
        var address2 = document.getElementById("Suburb").value + " " +   document.getElementById("Town").value;

        var address = address1 + " " + address2;