Solved

How do I use the aspx page to load a JavaScript function on a button click

Posted on 2008-10-24
12
349 Views
Last Modified: 2012-05-05
I need to load a JavaScript function upon a button click.  I forgot how do I relate the asp control inside the aspx page with the JavaScript and the OnClick event.

Could someone please send me this?

thans,
newbieweb
0
Comment
Question by:newbieweb
12 Comments
 
LVL 10

Accepted Solution

by:
jinn_hnnl earned 300 total points
ID: 22798435
<asp:Button ID="btAdd" runat="server" Text="Add" />

code behind Page_load
btAdd.Attributes.Add["onclick", "myJavaScriptFunction()");

Is that what you want ?

JINN
0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 22798474
And maybe you wondered, this is how you register a javascript function which at server side you want to generate and render to your page

Hope this helps
JINN



public void Page_Load(Object sender, EventArgs e)

 {

    if(Request.QueryString["redirect"] != null)

      if(Request.QueryString["redirect"] == "true")

        if (!this.IsStartupScriptRegistered("Startup"))

        {

          // Form the script to be registered at client side.

          String scriptString = "<script language=\>";

          scriptString += "function MyFunction(){alert('hello world'}";     

          scriptString += "</script>";

          this.RegisterStartupScript("Startup", scriptString);

        }
 

       btAdd.Attributes.Add("onclick", "MyFunction()");   

 }

Open in new window

0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 22798479
ahh, forget about line 3 and 4 (i copied it from my other solution and forget to take it off)
JINN
0
 

Author Comment

by:newbieweb
ID: 22798502
I was thinking more like this.  Except this does not work.  Is it the javaScript
of the ASP.NET that's at fault?

thanks,
newbieweb

<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function DODataLookup(){
            window.location = "../DataLookup.aspx";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="submitBtn" runat="server" script="DODataLookup()" Style="z-index: 100;
            left: 118px; position: absolute; top: 140px" Text="Submit" />
   
    </div>
    </form>
</body>
0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 22798592
Oke then it should be:
 
<asp:Button ID="submitBtn" runat="server" OnClientClick="DODataLookup()" Style="z-index: 100; left: 118px; position: absolute; top: 140px" Text="Submit" />
   
Check this link
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx

JINN

^^

0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 22798618
anyway you can set style like that for your button I guess, you will have to set the CssClass which refers to the predefine CSS class. If you want to simplify that:

<div style="z-index: 100; left: 118px; position: absolute; top: 140px">
     <asp:Button ID="submitBtn" runat="server" OnClientClick="DODataLookup()"  Text="Submit" />
</div>

or <span>

It is not possible to use normal html property for server control like you do with <input > <select ..> normal html element

JINN
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:newbieweb
ID: 22798860
This is not working.  Could it be the path name in the JavaScript?

how do I find the error?

newbieweb


<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function DODataLookup(){
            window.location = "../DataLookup.aspx";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="z-index: 100; left: 118px; position: absolute; top: 140px">
        <asp:Button ID="submitBtn" runat="server" OnClientClick="DODataLookup()"  Text="Submit" />
    </div>
    </form>
</body>
0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 22799461
you can test if your button call the javascript by:

      function DODataLookup(){
           alert(' hey ');
            window.location = "../DataLookup.aspx";
    }

you see hey, then the next line is the problem, appear to me it will navigate to the parent folder of this page and lookfor datalookup.aspx ? is what you want? What you are doing is redirecting the current page to that page.

Play around with the path

Jinn
0
 
LVL 16

Assisted Solution

by:Gyanendra Singh
Gyanendra Singh earned 200 total points
ID: 22799472
I have test your code ... Its working in my end ... it seems that below line is not correct in your method

window.location = "../DataLookup.aspx";

please check the path  and correct it .. attached working code
<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <title>Untitled Page</title>

    <script type="text/javascript">

        function DODataLookup(){

        alert ( "HI")

            window.location = "../DataLookup.aspx";

    }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div style="z-index: 100; left: 118px; position: absolute; top: 140px">

        <asp:Button ID="submitBtn" runat="server" OnClientClick="DODataLookup()"  Text="Submit" />

    </div>

    </form>

</body>

</html>

Open in new window

0
 

Author Comment

by:newbieweb
ID: 22801681
I'm having trouble with a null test in JavaScript for a var type:

        alert('OK1');
        var elem = document.getElementByID("recordLocatorTextBox");
       
        if (elem != 'undefined')
        {
               alert('OK2');
        }

what is the correct way to test if elem is null?  I never get OK2.

newbieweb
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22801754
if(elem!=undefined)
0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 22802609
There are major different between undefined and null,

If you check
 if (elem != null)
        {
               alert('OK2');
        }
it's the same as
 if(!elem),
and they are good enough

btw if you want to check if the property is set or not:
 if (elem.style != 'undefined') is the correct way (with quote)

Keep in mind, javascript is case sensitive:
var elem = document.getElementById("recordLocatorTextBox");
(instead of ID it's Id)

JINN
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now