Getting Value Of HiddenField and passing into var in JS

Question

I'm trying to take the values from 2 asp:HiddenFields and storing them into the var latitudeDB, var longitudeDB in JavaScript. These 2 values set into the HiddenFields are from my database. I have already checked with Debug.WriteLine to check the 2 values upon start up of the website and they are both the exact values from the database.

May i ask how can i get the 2 values from the HiddenFields to store into var latitudeDB and var longitudeDB for future uses? And the two values ought to be FLOAT/DOUBLE to be used...

In Page_Load,

        foreach (DataRow r in ds.Tables[0].Rows)
        {
            accountDB = r["AccountStatus"].ToString();
            latitudeDB = Convert.ToDouble(r["Latitude"]);
            longitudeDB = Convert.ToDouble(r["Longitude"]);
            usernameDB = r["Username"].ToString();
            ipDB = r["IPAddressOfCreation"].ToString();
        }
        HF_Latitude.Value = latitudeDB.ToString();
        HF_Longitude.Value = longitudeDB.ToString();

        Debug.WriteLine(HF_Latitude.Value);
        Debug.WriteLine(HF_Longitude.Value);

In my server side form (JavaScript),

                 <script type="text/javascript">
                    function initMap() {
                        var latitudeDB = parseFloat(document.getElementById("<%= HF_Latitude.ClientID %>").value);
                        var longitudeDB = parseFloat(document.getElementById("<%= HF_Longitude.ClientID %>").value);

                        //var latitudeDB = $("#<%= HF_Latitude.ClientID %>").val();
                        //var longitudeDB = $("#<%= HF_Longitude.ClientID %>").val();

                        var mapProp = {
                            zoom: 15,
                            center: new google.maps.LatLng(latitudeDB, longitudeDB),
                            mapTypeId: google.maps.MapTypeId.HYBRID,
                        };

                        var map = new google.maps.Map(document.getElementById("generatedMap"), mapProp);

                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(latitudeDB, longitudeDB),
                            map: map,
                            title: "<div style = 'height:50px;width:120px'><b>Consumer's location:</b><br />Latitude: " + latitudeDB + "<br />Longitude: " + longitudeDB,
                        });
                    }
                </script>

HiddenFields,

<asp:HiddenField runat="server" ID="HF_Latitude" />
<asp:HiddenField runat="server" ID="HF_Longitude" />

Appreciate any help please! Thank you so much...

var latitudeDB = parseFloat(document.getElementById("<%= HF_Latitude.ClientID %>").value); var longitudeDB = parseFloat(document.getElementById("<%= HF_Longitude.ClientID %>").value); this isn't working ? I don't get what's wrong here ? — JBO, Jul 31 '17 at 12:34
i just solved the issue @JBO . i placed my hiddenfields under the js.. — domster, Jul 31 '17 at 12:35
yep you could also make you js executable only on $(function(){}) = $(document).ready(function(){}) — JBO, Jul 31 '17 at 12:38
frankly, i dont have much knowledge about ajax? if im not wrong that's ajax.. thank you for the suggestion though! — domster, Jul 31 '17 at 12:39
it's jQuery, not ajax. But as long as both solutions works, you can go with what you found out :) Still, i think you will face jQuery soon or later. — JBO, Jul 31 '17 at 12:40
oh i see.. but actually using jQuery for the one you mentioned purpose is to? — domster, Jul 31 '17 at 12:41
The purpose of using it like i mentionned is to be sure all your DOM is loaded when you are using your javascript. I won't make a whole course of jQueyr but you can also simplify your dom selectors. From document.getElementById("generatedMap") you can write $("#generatedMap"). But it's only question of habits. If you don't want to use it, then don't :) — JBO, Jul 31 '17 at 12:49
ohh i get what you mean.. i think it's more precise to use jquery in my current situation? but i think i'd stick to what i have for now.. will refer back in the future.. thanks JBO! — domster, Jul 31 '17 at 12:55

score 0 · Accepted Answer · answered Jul 31 '17 at 12:36

0

I solved my issue. The HiddenFields should be placed above the Javascript.

answered Jul 31 '17 at 12:36

domster

556
2
8
26

Getting Value Of HiddenField and passing into var in JS

1 Answers1