Unable to pass Asp.net control's value to javascript function

Question

I want to send Latitude and longitude values from two TextBoxes to a java script function that displays a marker at that location on the map.

I have written the following code but it doesn't work:

<script type="text/javascript">
var map;
function init()
{
    var mapoptions=
    {
        center: new google.maps.LatLng(17.379064211298, 78.478946685791),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map=new google.maps.Map(document.getElementById("map_can"), mapoptions);
}    
function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>'),document.getElementById('<%=TextBox2.ClientID %>'));
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}   
</script>

Button controls code:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark()" />

Marker isn't displayed. Also Chrome console doesn't display any errors. Where am I wrong?

I guess the issue is not just in passing the control values but also because of the map reloading after I call the placemark(). If so, how do I overcome it? — Shiridish
– Shiridish, Commented Sep 5, 2012 at 11:34
Don't ever mix javascript in server-side code. There's no reason for it. Instead, pass data as data-* attributes, or use class selectors to categorically select elements (you can get their ids dynamically). — zzzzBov
– zzzzBov, Commented Sep 5, 2012 at 12:14

Jaime Torres · Accepted Answer · 2012-09-05 12:24:05Z

According to the google API V3 reference, the constructor is

LatLng(lat:number, lng:number, noWrap?:boolean)

So your function could be:

function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}

And update your button definition as:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(); return false;" />

But would probably be better as:

function placemark(lat, lng)
{
   var ulatlng= new google.maps.LatLng(lat,lng);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}

And update your button to be:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value); return false" />

Either way, please ensure you include "return false" so your page does not postback, causing the refresh.

If you wanted to be even cleaner:

ASCX:

<asp:Button ID="uxBtnPlaceMarker" runat="server" Text="Place Marker" />

Code behind:

   protected void Page_Load(Object sender, EventArgs args)
   {
       //...Do whatever you do here...
       this.uxBtnPlaceMarker.OnClientClick = string.Format("placemark(document.getElementById('{0}').value,document.getElementById('{1}').value); return false", TextBox1.ClientID, TextBox2.ClientID);
   }

Man that's great!! Cheers to you :) Thanks for the return statement. That solved my issues.

Developer · Accepted Answer · 2012-09-05 11:20:08Z

0

You should use .value property of textbox. for example

    var mapCan = document.getElementById("map_can").value;

answered Sep 5, 2012 at 11:20

Developer

7772 gold badges9 silver badges25 bronze badges

1 Comment

Conrad Lotz Over a year ago

You need to pass the object and not the value according to google documentation: developers.google.com/maps/documentation/javascript/…

Conrad Lotz · Accepted Answer · 2012-09-05 11:40:24Z

0

Try getting the text boxes values instead:

var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value)

What you also can try is to zoom out on the map. The marker might be misplaced and show somewhere else (Lat Long swapped). To test replace the text boxes with the correct values and ensure that the marker displays

edited Sep 5, 2012 at 11:40

answered Sep 5, 2012 at 11:14

Conrad Lotz

8,9533 gold badges25 silver badges28 bronze badges

1 Comment

Shiridish Over a year ago

No the marker isn't there. I guess the issue is not with passing the control values but because of the map reloading after I call the placemark(). Is it?

rohan panchal · Accepted Answer · 2012-09-05 12:17:21Z

0

var ulatlng=  document.getElementById(TextBox1).value;

use like this this will work

answered Sep 5, 2012 at 12:17

rohan panchal

8813 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

Unable to pass Asp.net control's value to javascript function

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related