pass javascript input (google maps) to code behind

Question

Please help Me It Is Very IMPORTANT

i have a autocomplete javascript input (using google maps) I want to transfer the value of autocomplete input to aspx.cs code , i want to transfer it to string named address , please help me , i breaking my head more than 3 days on this issue.

the aspx page:

<

div id="locationField">
      **<input id="autocomplete"** placeholder="הקלד את הכתובת"
             onFocus="geolocate()" type="text" dir="rtl"></input>
    </div>

    <script>
        var placeSearch, autocomplete;
        var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'short_name',
            country: 'long_name',
            postal_code: 'short_name'
        };


        function initAutocomplete() {
            // Create the autocomplete object, restricting the search to geographical
            // location types.
            autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            { types: ['geocode'] });
            var hdnfldVariable = document.getElementById("<%= hdnfldVariable.ClientID %>");


        }


        function somefunction() {
            //set this if you have dynamic ClientID
            var hdnfldVariable = document.getElementById("autocomplete").value.toString();

            autocomplete.addListener('place_changed', fillInAddress);
        }

        function fillInAddress() {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();

            for (var component in componentForm) {
                document.getElementById(component).value = '';
                document.getElementById(component).disabled = false;
            }
            autocomplete.getPlace().address_components
            // Get each component of the address from the place details
            // and fill the corresponding field on the form.
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i][componentForm[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }
        }

        // Bias the autocomplete object to the user's geographical location,
        // as supplied by the browser's 'navigator.geolocation' object.
        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key---&libraries=places&callback=initAutocomplete"
        async defer></script>


      <asp:HiddenField ID="hdnfldVariable" runat="server" />

       <asp:Button ID="ButtonAddEvent" runat="server" Text="Add" 
        Font-Bold="True" Font-Names="Gisha" Font-Size="17pt" ForeColor="Blue" 
        onclick="ButtonAddEvent_Click" 
        OnClientClick="somefunction();"
        style="z-index: 1; left: 497px; top: 774px; position: absolute" />
</asp:Content>

the code behind ( pass the input value to here):

 protected void ButtonAddEvent_Click(object sender, EventArgs e)
    {
        string Event_Address = hdnfldVariable.ToString();
}

please help me , this is very important project , thank you very much:)

What have you tried? Personally I usually use an AJAX call, but you could use a rest service etc — Trey
– Trey, Commented May 23, 2017 at 21:02

Jonathas Sucupira · Accepted Answer · 2017-05-23 21:27:25Z

1

Make the following changes to this javascript function.

    function somefunction() {
        //set this if you have dynamic ClientID
        document.getElementById("<%= hdnfldVariable.ClientID %>").value = document.getElementById("autocomplete").value.toString();

        autocomplete.addListener('place_changed', fillInAddress);
    }

Than this change to the code behind:

    string Event_Address = hdnfldVariable.Value.ToString();

answered May 23, 2017 at 21:27

Jonathas Sucupira

5275 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

גל אברג'יל Over a year ago

Thank you very much:) You're the king

Collectives™ on Stack Overflow

pass javascript input (google maps) to code behind

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related