Passing values to javascript function from asp.net button

B

bcorbett

Active member
Joined
Oct 16, 2006
Messages
27
Programming Experience
Beginner
I'm trying to pass the values in the textboxes below to a Javascript function (also below) on the button click of a ASP.net Button. I've been looking and can only find ways to it

on page load (<body onload="initialize()">)

Any Help will be appreciated!

VB.NET: 
<script type='text/javascript'>        
var map;        
var directionsPanel;        
var directions;       
function initialize(Lat,lng,From) {          
map = new GMap2(document.getElementById('map_canvas'));
map.setCenter(new GLatLng(lat,lng), 15);          
directionsPanel = document.getElementById('route');          
directions = new GDirections(map, directionsPanel);          
directions.load('from:' + From + 'to:' + lat + ', ' + lng ); 
          }    </script>        
<table>
            <tr>
                <td>
                    Lat:</td>
                <td >
                    <asp:TextBox ID="txt" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td >
                    Lng:</td>
                <td >
                    <asp:TextBox ID="txtlng" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td >
                    From Directions:</td>
                <td >
                    <asp:TextBox ID="txtFrom" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td >
                </td>
                <td >
                   [COLOR="Red"] <asp:Button ID="Button1" runat="server" Text="Get Directions" />[/COLOR]</td>
            </tr>
        </table>
        <div id="map_canvas" style="width: 70%; height: 480px; float: left; border: 1px solid black;">
        </div>
        
        <div id="route" style="width: 25%; height: 480px; float: right; border: 1px solid black;">
        </div>
 
Sort by date Sort by votes
Javascript runs client side. Change the server button to a client button, see Html section in Toolbox, select the Input (Button) control, add runat="server" attribute to it to refer to it in codebehind. It is also possible to use the server button, but you'd have to return false from the onclick script code to prevent it from postback.

Basically you just need to call the javascript code in the buttons onclick client event. Example code to be added to Page Load when not IsPostback:
VB.NET: 
Dim code As String = String.Format("javascript:initialize({0}.value,{1}.value,{2}.value)", Me.txt.ClientID, Me.txtLng.ClientID, Me.txtFrom.ClientID)
Me.Button1.Attributes("onclick") = code
 
Upvote 0 Downvote
It looks like that code is doing what its supposed to do, but the page is blinking.

meaning, I see what I expect to see, then it disappears, like its posting back.
I sent you a link to the page I'm working on via PM. If you have a sec could you take a look and see where I'm screwing up? I'd really appreciate it.


VB CODE:
VB.NET: 
 Protected Sub Button2_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.ServerClick
        Dim code As String = String.Format("javascript:initialize({0}.value);", Me.txtfrom.ClientID)
        Me.Button2.Attributes("onclick") = code
    End Sub

HTML CODE:

HTML: 
 <script type="text/javascript">

        var map;
        var directionsPanel;
        var directions;
        function initialize(strfrom) {
          map = new GMap2(document.getElementById('map_canvas'));
          map.setCenter(new GLatLng(42.351505,-71.094455), 15);
          directionsPanel = document.getElementById('route');
          directions = new GDirections(map, directionsPanel);
          directions.load('from: ' + strfrom + ' to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)');
           }
    </script>

    

</head>
<body>
    <form id="form1" runat="server">
        <div id="map_canvas" style="width: 70%; height: 480px; float: left; border: 1px solid black;">
        </div>
        <div id="route" style="width: 25%; height: 480px; float: right; border: 1px solid black;">
        </div>
         <br />
        <br />
        <table>
            <tr>
                <td style="width: 100px">
                    From:</td>
                <td style="width: 100px">
                    <asp:TextBox ID="txtfrom" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    </td>
                <td style="width: 100px">
                    <!--<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>--></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    </td>
                <td style="width: 100px">
                    <!--<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>--></td>
            </tr>
            <tr>
                <td style="width: 100px">
                </td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    </td>
                <td style="width: 100px">
                    <input id="Button2" runat="server" type="button" value="Get Directions" /></td>
            </tr>
        </table>
    </form>
</body>
</html>
 
Upvote 0 Downvote
If you look at the source of your page at runtime you'll see the input element has several values not present in your source, like the language="javascript" and the onclick has javascript code that calls the __doPostBack function. Where do these come from? They don't appear when I run a page with that source code. Neither for Html or Asp buttons do I see such output.
 
Upvote 0 Downvote
I saw that too. I'm not real sure where its coming from. I assumed it was ASP.net creating that code on compile.
 
Upvote 0 Downvote

Similar threads

M
  • Question
Question IE 11 Causing Page to Reload Instead of Passing User Name
Replies
1
Views
3K
mware
M
B
  • Question
Resolved Return The Results Of An Updated Webform
Replies
5
Views
4K
Sheepings
S
Neodynamic
How to add Cross-Browser Printing to ASP.NET ReportViewer toolbar
Replies
0
Views
4K
Neodynamic
Neodynamic
S
  • Question
How do I get a value from an asp:textbox into an asp:textbox in a modal window.
Replies
0
Views
2K
siraero
S
Neodynamic
How to directly Print Word docs without Preview or Printer Dialog from ASP.NET
Replies
4
Views
6K
Neodynamic
Neodynamic

Share this page

Latest posts

Back
Top