Can anybody provide a solution for transferring user input from an ASP.NET TextBox to a JavaScript function?

I need to extract user-input information from text boxes and pass the values to a JavaScript function for displaying the result using the "window.alert()" method.

As of now, I am working with ASP.NET. Below is what I have in terms of the ASP.NET frontend and the JavaScript code:

<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);
        }

Answer №1

The functionality you're trying to achieve may not work as expected:

OnClick="calcFunction()"

This code snippet is for a server-side ASP.NET "control", so the OnClick attribute refers to server-side event handlers. However, since you want to execute a client-side function, you should use:

OnClientClick="calcFunction()"

It's important to remember that despite this being a server-side control, it could still trigger a post-back to the server after executing the client-side click event. This can sometimes confuse beginners when their client-side changes are seemingly reset by a quick page refresh.

If your goal is solely client-side actions, consider using regular HTML elements instead of server-side controls.

Additionally, the parameters c1, c2 in your JavaScript function declaration are unnecessary since no values are passed or used within the function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript For/in loop malfunctioning - Issue with undefined object property bug

Currently, I am tackling a basic For/in loop exercise as part of a course curriculum I am enrolled in. The exercise involves working with a simple object containing 3 properties and creating a function that takes two parameters - the object name and the it ...

How can you retrieve the component's state from a higher level without relying on useContext?

I have a question regarding creating expanding flex cards. I found an example on Codepen that showcases what I'd like to achieve: https://codepen.io/z-/pen/OBPJKK In my code, I have a component called HomeButtons that generates these flex cards. With ...

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

My website contains a table with player names and servers, but I want to make them clickable for filtering purposes. For instance, clicking on a player name should reload the leaderboards to show which servers that player plays on, and clicking on a server ...

Looking for assistance with a simple Javascript program

My program needs to have a for loop and utilize existing input functions (name and number). Additionally, I need to calculate totals. Users should be able to CANCEL and proceed to doc.write where they can enter their name and number. Furthermore, users s ...

Hash functionality does not cooperate with the back button, requiring the use of JavaScript to trigger a function when the URL changes

Hi everyone, I have a code snippet that is designed to read the value after the hash in the URL and display a specific div based on that value. It works as expected, except for when the hash is changed while already on the site or when navigating back with ...

Avoid using `@typescript-eslint/no-floating-promises` when using a `const` function

Can anyone help me understand why the @typescript-eslint/no-floating-promises rule works with some async functions but not all? To my understanding, these two functions should be equivalent: const getUser = async (userId: string): Promise<User> => ...

Exploring the principles of object-oriented design within the context of Node

I am facing challenges with the asynchronous flow of Node.js. Let's assume we have the following class: function myClass() { var property = 'something'; var hasConnected = false; this.connect = function(params) { // Logic to conn ...

Storing HTML form information in a file

Currently, I am using Trisquel 7.0. My knowledge of html and JavaScript is at a basic level. However, I am eager to learn how to save html form data to a file (and also interested in loading/filling html forms from files). After some research, I discovere ...

Is there a way to retrieve Web Controls from a Dictionary?

I have multiple TextBoxes and DropDownLists. Whenever a value is selected from a DropDownList, it should change the background color of the corresponding TextBox. Initially, I attempted to use a Dictionary with TextBox as the key and DropDownList as the v ...

Creating dynamic elements in JavaScript and assigning them unique IDs

Hi there, I'm currently working on a project that requires generating dynamic divs with a textbox and delete button inside each one. The challenge I'm facing is figuring out how to assign a unique ID to each textbox element so that I can properly ...

I am unable to comprehend the function definition

I have familiarity with different types of JavaScript function declarations such as expression functions and anonymous functions. However, I am unsure about the syntax used in these two specific functions: "manipulateData: function (input)" and "getDataByI ...

The audio directory is not included in the build of the Ionic framework, causing it to be skipped and absent

Recently, I've been working on an Ionic/Cordova app and came across a folder labeled /audio which consists of mp3 files: /www /assets /audio file.mp3 /css /js config.xml index.html The issue at hand is that the /audio directory is n ...

Searching for the position of objects within a collection?

I am seeking the ability to parse through an object and allocate each of its available attributes to a variable. Within this scenario, there are four potential properties present in different objects - some containing all four while others may only have t ...

Retrieve information from an array of objects by utilizing a separate array

There are two separate arrays provided below: ages = [20,40,60]; doctors = [{ "name": "Moruu", "age": 18, "sex": "Male", "region": "Africa" }, { "name": "Khol ...

Steps for resolving the problem: [$sce:itype] while using AngularJS version 1.6

I'm encountering an issue with $sce while using AngularJS 1.6.4: Error: [$sce:itype] http://errors.angularjs.org/1.6.4/$sce/itype?p0=html Stack trace : L/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:6:425 trustA ...

Using AJAX to call a VB ASP.NET web method with parameters in the GET request

I've come across numerous inquiries regarding this issue, but I can't seem to find a solution (the abundance of questions on the internet about this topic is astonishing!!). Let me be direct: test.asmx 'Simple POST method with parameters ...

Stripping quotation marks from CSV information using Javascript

After performing a fetch request using JavaScript, I have converted JSON data into CSV format. datetime","open","high","low","close","volume" "2020-01-28","312.48999","318.39999","312.19000","317.69000","31027981" "2020-01-27","309.89999","311.76001","30 ...

Creating a dropdown feature for menu items in Vue when the number or width of items exceeds the menu bar's limits

I am working on a navigation bar that displays menu items as tabs. One issue I am encountering is when the number of menu items exceeds the space available, I need to move the excess items into a dropdown menu (showmore) using Vue. Here is an example of t ...

so many alerts to choose from aside from jsx/react

After some consideration, I believed I had devised an effective way to notify users when the array is empty and there's nothing to display. However, upon implementation, I realized my technique only works onFocus or page reload because I placed the fu ...

The XMLHttpRequest is displaying additional characters within its response

Upon completing an XMLHttpRequest(), I am receiving the unexpected output of "true↵↵↵". In my php file, all I have is echo json_encode(true); Can anyone shed some light on why this strange behavior is occurring? Thank you ...