JavaScript code to compute data within a gridview

I am working with a gridview

 <asp:gridview ID="Gridview1" runat="server" ShowFooter="true" CssClass="vutblrow" TabIndex="3" HeaderStyle-CssClass="vutblhdr" CellPadding="4" ForeColor="#333333" GridLines="None"  Width="25%" PagerStyle-Mode="NumericPages"


            AutoGenerateColumns="false" onrowcreated="Gridview1_RowCreated" Height="16px">
              <PagerStyle CssClass="pgr"  Height="25px" BorderStyle="Solid" />
            <Columns>
            <asp:BoundField DataField="RowNumber" HeaderText="Serial Number" />
            <asp:TemplateField HeaderText="Air/Bus/Train Fare">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" CssClass="txtBoxNormalmedium" ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City To">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" CssClass="txtBoxNormalmedium" ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City From">
                <ItemTemplate>
                     <asp:TextBox ID="TextBox3" runat="server" CssClass="txtBoxNormalmedium"></asp:TextBox>
                </ItemTemplate>
                <FooterStyle HorizontalAlign="Right" />
                <FooterTemplate>
                 <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"
                        onclick="ButtonAdd_Click" CssClass="btnNormalAdd" />
                </FooterTemplate>
            </asp:TemplateField>
                 <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click" CssClass="lnkbut">Remove</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            </Columns>
        </asp:gridview>

 <asp:Label ID="lblgpf14" runat="server" CssClass="lblText " Text="Total Air Fare"></asp:Label>      
 <asp:TextBox ID="txt" runat="server" CssClass="txtBoxNormalmedium" Enabled="False" onkeyup="Calculate();"></asp:TextBox>

As users input the air/bus/train fare, the value should be displayed in the textbox labeled "txt". The javascript function should be triggered by the onkeyup event. This textbox is located outside the gridview. When the user clicks on "Add new row" and enters the train fare, the total value must be shown in the "txt" textbox. I'm struggling to write the JavaScript code for this functionality. Can someone please assist me?

Answer №1

Implement event binding for when a user inputs a value (in two places based on your question) using the following method:

<asp:TextBox ID="texboxid" onkeyup="showCal(this)" />

Your JavaScript function should look like this:

function showCal(obj){

  var val=document.getElementById(obj.id).value;

      if(val!='' && !isNaN(val) ){
         var prvVal=document.getElementById('txt').value;
         prvVal= (!isNaN(prvVal))?prvVal:0;
        document.getElementById('txt').value = parseInt(prvVal)+parseInt(val);
      }else{
         alert("The value you have entered is either empty or not a number.")
      }
}

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

I'm having trouble with the appearance of my table and I can't seem to pinpoint where I went wrong with the

I'm having trouble with my table - it looks wonky and unfinished. I can't seem to figure out what went wrong, and I'm completely stuck. Can someone please assist me? ...

Error with shader in webgl/three.js

i'm struggling with some issues in three js and need help with parallax mapping. vertex shader : varying vec3 v_pos; varying vec3 v_nrm; varying vec2 v_txc; void main(){ v_pos = position; v_nrm = normal; v_txc = uv; gl_Positi ...

Tips for retrieving a value from a callback function?

How do I return a value from a callback function? The following code snippet is what I have: function storeData(data) { const id = "5f354b7470e79f7e5b6feb25"; const body = { name: "john doe" }; bucket.insert(id, body, (error, r ...

When making a jQuery call, be cautious as the JSONP callback may result in unescaped data

Within my client's HTML/JS code, I am making calls to an external API from a different domain to retrieve JSON data. Due to the cross-origin policy, traditional AJAX/XHR requests are not allowed between domains. To solve this issue, the API vendor sug ...

Remove data from Firebase that is older than two hours

I need to implement a solution to automatically delete data that is older than two hours. Currently, I am iterating through all the data on the client-side and deleting outdated entries. However, this approach triggers the db.on('value') function ...

Retrieving NLog configuration from file as needed

Currently, I am utilizing ASP NET 5 with MVC 6 along with NLog. While browsing through the NLog wiki, I came across a convention related to configuration files that are automatically loaded and processed. However, I find myself unsure of how to implement t ...

Ways to conceal a primary page section upon clicking a different tab

I am currently implementing the w3schools HOW TO - tabs feature on my website to create tabbed navigation. However, I'm running into an issue where clicking on tabs other than 'Home' still displays the 'Home' content along with the ...

Using jQuery .sortable() to reorder list items and update their IDs based on their new positions

My apologies for my limited English skills, but here is what I am trying to achieve. I have a list structured like this: <ul id="sortable" class="sortable"> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> &l ...

Navigating the realm of POST requests in Node.js: A comprehensive guide

Attempting a POST-request function for the first time, I encountered a roadblock while using "Axios". Check out the HTML and JavaScript files below: https://i.sstatic.net/afD41.png HTML (This section allows for inputting values in the "English" and "Japan ...

Unexpected behavior: Bootstrap modal triggers twice upon closing and reopening

When I click a button, a login form modal is displayed. This modal is loaded from an external file using AJAX. However, I have encountered an issue where if I close and reopen the modal, it launches twice and the modal-backdrop class appears twice as well. ...

JavaScript table search feature for novices - finding results

I am relatively new to this, but I am working on improving the workflow within my company. I found some code at this link in order to create an internal site for searching current part numbers. However, my employees are looking for parts based on descripti ...

What sets apart passing arguments to a function from utilizing variables at the class level?

As someone who is just starting out in the Typescript and Angular-2 world, my previous experience includes working with Java and Angular-1.5. Imagine a scenario where there is a component class with several variables that need to be used across functions, ...

Discover the total number of rows that will be removed automatically (on cascade) when a single row is deleted from a table

Is there a way to determine the number of rows that will be removed from each table when deleting a single row in one table? For instance, if I delete a product from a table with on delete cascade enabled, other related rows in tables like Comments and Pr ...

Initiate a button click event from the parent element situated within an Iframe

I am facing a challenge in accessing a button within an iframe. The path to the button is as follows: div.iframe-container > iframe#builder-frame > html > body > div#header > ul.header-toolbar.hide > li > span.deploy-button-group.butt ...

Facebook fails to send signed_request in IE7_BROWSER

I have created a universal Facebook app for fan pages. This app can be easily added to any page, displaying unique content specific to each individual page. To make this work, I need to receive a signed_request from Facebook in order to obtain the fan page ...

Vue composable yields a string value

I am currently using a Vue composable method that looks like this: import { ref } from 'vue'; const useCalculator = (num1: number, num2: number, operation: string) => { const result = ref(0); switch (operation) { case 'add& ...

Sending an AJAX request to a REST service in order to submit the information captured in an HTML form

<html> <body> <form method="POST"> <label>username</lable> <input id="username" name="username" type="text"> <label>emailid</lable> <input id="emailid" ...

Merging Two Angular Pages within a Jhipster Application

My jhipster application is simple, generating 2 entities: Product and Category. The generated pages to list the data for these entities can be found here. Specifically, there are pages for Product and Category. If I want to create a new page that combines ...

Having trouble accessing my account on Umbraco version 7.0.3!

I recently launched a new website using Umbraco 7.0.3, and while everything runs smoothly on my local server, I encounter problems when trying to log in to Umbraco on my hosting platform. After entering my login credentials, I am immediately redirected bac ...

Evaluating a string as if it were a boolean

The following code snippet includes the condition: if(!obj.Substance){ ...Some Code... } It is important to note that the Substance variable in this scenario is of string type. I am curious to determine under what conditions the code will enter the if b ...