request.form[“”] cannot get value in C#

Question

<script type="text/javascript">
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getPostion);
        }
    }

    function getPostion(position) {
        var currentLat = position.coords.latitude;
        var currentLon = position.coords.longitude;
        alert(currentLat);
        document.forms[0].lat.value = "123";
        alert(document.forms[0].lat.value);
        document.forms[1].lon.value = currentLon;
        alert(document.forms[1].lon.value);
    }
</script>
<input type="hidden" name="lat">
<input type="hidden" name="lon">

<asp:TextBox ID="status" runat="server" CssClass="text" MaxLength="100" Columns="40" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="textSubmit" runat="server" CssClass="textSubmit" Text="submit" OnClientClick="getLocation()" OnClick="Post" />

protected void Post(object sender, EventArgs e)
    {
        string latitude = Request.Form["lat"].ToString();
        string longitude = Request.Form["lon"].ToString();

        string text = status.Text.Trim().ToString();//breakpoint here
        string connectionString = WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
        SqlConnection con = new SqlConnection(connectionString);
        try
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("INSERT INTO [dbo].[Locations] VALUES('jshmqjw'," + Convert.ToDouble(latitude) + ", " + Convert.ToDouble(longitude) + ",CONVERT(varchar(100), GETDATE(), 20), 'text' )", con);
            cmd.ExecuteNonQuery();
        }
        catch (Exception err)
        {
            Response.Write("<script>alert('Error reading The database. " + err.Message + "') </script>");
        }
        finally
        {
            con.Close();
        }
    }

i want to send variable from javascript to C#. i use hidden field to store value first and then in C# use request.form["name"] to get the value. But after i set a breakpoint after one line, it turns out that the variables are null. can anyone help!~

Answer 1

Add runat="server":

<input type="hidden" runat="server" id="lat" name="lat">
<input type="hidden" runat="server" id="lon" name="lon">

And

 string latitude = lan.Value;
 string longitude = lon.Value;

JavaScript Code:

function getPostion(position) {
    var currentLat = position.coords.latitude;
    var currentLon = position.coords.longitude;
    alert(currentLat);
    document.getElementById("<%=lan.ClientID%>").value = "123";
    alert(document.getElementById("<%=lan.ClientID%>").value);
    document.getElementById("<%=lon.ClientID%>").value = currentLon;
    alert(document.getElementById("<%=lon.ClientID%>").value);
}

Also, you can use:

<asp:HiddenField />

Answer 2

This should solve your problem:

Replace your html hidden fields with:

<asp:HiddenField ID="lat" runat="server"/>
<asp:HiddenField ID="lon" runat="server"/>

Then in your getPosition()-

document.getElementById('<%= lat.ClientID %>').value= currentLat ;
document.getElementById('<%= lon.ClientID %>').value= currentLon ;

And in code behind:

string latitude = lat.Value;
string longitude = lon.Value;

Answer 3

this maybe because you put the javascript above the targeted code.

if you refer to a tag element using "document.getElement..." then that tag element must already be rendered in order to find it.

either you put the code after you targeted elements, or use Jquery document ready.

Answer 4

Just add the corresponding name attributes

<input type="hidden" id="lat" name="lat">
<input type="hidden" id="lon" name="lon">