How to pass user input from ASP.NET TextBox to JavaScript function?

Question

I am trying to pull the information that the user inputs in the text boxes and pass the value to a JavaScript function in order to display the result in a "window.alert()" method.

I am currently using ASP.NET. This what I have so far for the ASP.NET front part and for the JavaScript;

 <asp:Button ID="btnCalculateSalary" runat="server" Text="Calculate Salary" OnClick="calcFunction()" />

    <script>
        function calcFunction(c1, c2) {
            c1 = document.getElementById('txtAnnualHours').value;
            c2 = document.getElementById('txtPayRate').value;

            return window.alert("Your Annual Salary is: " + c1 * c2);
        }

Are you just looking for OnClientClick for your control, instead of OnClick? — David
– David, Commented Dec 15, 2016 at 19:03
Whichever one works. I am learning, so I don't know which one works accordingly with JavaScript. — user6232145
– user6232145, Commented Dec 15, 2016 at 19:04
Well, OnClick for server-side controls is to handle the server-side events. Use OnClientClick for a client-side click handler. Note however that it is still a server-side control and may still cause a post-back refreshing the whole page. — David
– David, Commented Dec 15, 2016 at 19:06
@CristianUPolanco: That's because OnClick looks for server-side code to execute, and you have no calcFunction() method in your server-side code. What happens when you try OnClientClick instead? — David
– David, Commented Dec 15, 2016 at 19:19
@CristianUPolanco: Excellent. Sorry for any confusion in there. You'll find that the difference between server-side and client-side code will be critically important in web development in general. ASP.NET WebForms goes to great length to try and unify these two separate things, often resulting in confusion and problems. But I'm just exposing personal opinion at this point :) — David
– David, Commented Dec 15, 2016 at 19:24

David · Accepted Answer · 2016-12-15 19:32:28Z

1

This isn't doing what you think:

OnClick="calcFunction()"

Since that's a server-side ASP.NET "control" and not an HTML element, OnClick is referring to ASP.NET's server-side event handlers. But you have a client-side function to be executed. In that case, try:

OnClientClick="calcFunction()"

One important thing to note, however, is that this is still a server-side ASP.NET control. Which means that after processing the client-side click event it may (depending on a number of unrelated factors) still invoke a post-back to the server which will refresh the page. A common source of confusion among beginners is that a quick page refresh will "reset" their client-side state and cause them to suspect that "it isn't working".

Often when all you want to do is perform client-side actions, you may want to skip the server-side controls altogether and just use normal HTML elements.

Another unrelated side note... Your JavaScript function doesn't need those c1, c2 parameters in the function declaration. Values aren't being passed to the function, and passed values aren't being used in the function.

answered Dec 15, 2016 at 19:32

Collectives™ on Stack Overflow

How to pass user input from ASP.NET TextBox to JavaScript function?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related