Using JavaScript to set the value of a label within an ASP.NET ListView

Having trouble with an asp.net listview that contains two buttons, a textbox, and label in each row.

When one of the buttons is clicked, a javascript function should be triggered. This function is supposed to take the value from the textbox and initiate a countdown in the corresponding label.

The issue arises when the function always takes the value from the first row of the listview instead of the selected row. Many attempts have been made to resolve this, but the correct row's value is still not being used.

Seeking guidance on how to ensure the function retrieves and sets the accurate values for each row.

Thank you

function countdown() {
      interval = setInterval(function () {
          var lbl = document.getElementById("ctl00_ContentPlaceHolder1_lstViewFormulas_ctrl0_lblCountDown");
          var txt = document.getElementById("ctl00_ContentPlaceHolder1_lstViewFormulas_ctrl0_txtTimeMinutes");


  <asp:Button ID="buttStartTimer" runat="server" OnClientClick="javascript:countdown()" Text="Start" />
  <asp:Button ID="buttStopTimer" runat="server" OnClientClick="javascript:stopcountdown()" Text="Stop" />
  <asp:TextBox runat="server" ID="txtTimeMinutes" Text='<%#Eval("FormulaTiming")%>'></asp:TextBox>
  <asp:Label ID="lblCountDown" runat="server" Text=""></asp:Label>

Other Attempts

  <%--<input type="button" onclick='countdown()'; value="Start" id="Start" />
  <input type="button" onclick='stopcountdown()'; value="Stop" id="Stop" />--%>
  <%--<input type="button" onclick='countdown(this.form.TimeMinutes, this.form.spCountDown)'; value="Start" id="Start" />
   <input type="button" onclick='stopcountdown()'; value="Stop" id="Stop" />--%>
  <%-- <input type="button" onclick='<%# Eval("FormulaTiming", "countdown({0});")%>' value="Start" id="Button2" />
  <input type="button" onclick='stopcountdown()'; value="Stop" id="Button3" />--%>
  <%--<input type="text" value='<%#Eval("FormulaTiming")%>' id="txtTimeMinutes" />--%>

Answer №1

Have you considered using jQuery instead?

Add a class to all the buttons and then utilize jQuery to select that class:

$(".myButtonClass").click(function() {
    var buttonID = $(this).attr('id');
    var rowID = buttonID.substring(buttonID.lastIndexOf('_') + 1);
    updateLabel("ctl00_ContentPlaceHolder1_listViewForms_row"+rowID+"_label")
}

Just make sure your updateLabel function is set up correctly to modify the label input.

Please keep in mind, this code snippet has not been thoroughly tested (just came to mind).

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

Whenever I try to load an image from MongoDB, I encounter the error message: "data:image/png;base64,[object Object]."

I am currently facing an issue with displaying images in an HTML table that pulls data from MongoDB. The image is not showing up, and I'm struggling to identify the root cause of the problem. Here are the steps I have taken so far: Below is the Java ...

When using jQuery to enable contenthover on divs, they will now start a new line instead of

I've been working on achieving a layout similar to this, with the contenthover script in action: Mockup Draft Of Desired Look However, the result I'm getting is different from what I expected, it can be seen here. The images are not aligning co ...

Autocomplete's `getOptionLabel` function unexpectedly returned an object ([object Object]) instead of the expected string

Currently delving into the world of ReactJS and working with @mui controls, specifically a Multiselect Dropdown with autocomplete feature. Here is the child component causing me some trouble, displaying the following error message: "index.js:1 Materi ...

Is my Magento journey on the correct course?

I am wanting to include or require a file in DATA.php within magento. Below is the code snippet I have: public function formatPrice($price) { require_once(Mage::getBaseDir('app').'\design\frontend\neighborhood ...

Real-Time Push Notifications from SQL Server to Node.JS

Currently, I am in the process of developing a web application that aims to extract poorly structured data from SQL Server and transfer it to MongoDB using Node.JS. The main motivation behind this project is the necessity to access data from an existing, i ...

Transform the CSS animation to include a sliding down motion combined with a blur effect

Can the CSS transition be changed to allow for a sliding down effect with a blur effect? I am looking to change this CSS animation effect to match the gif image shown below. Is it achievable using JavaScript, CSS, or a combination of both? Any help in solv ...

What is the best way to convert newline characters into <br> tags within a JSON string?

In my JSON file, I am receiving the following raw string. When I console.log it, it displays perfectly. "Hello, my name is Jane, from "IStaff" company.\r\n\r\n.We are interested in your service.\r\n\r\n.Please call ...

Auto-stop the EC-2 instance after a specified period of time utilizing SDK

Is it possible to automatically terminate an EC-2 instance after a specific time, such as 2 hours from when it was created? I am currently utilizing NodeJS for my AWS EC-2 operations. Is there a specific parameter that needs to be included when creating ...

Oops! Looks like the maximum call stack size has been exceeded, resulting in a RangeError. Additionally, a warning from Vue has been triggered due to an error in the v-on handler related to

I am in the process of developing a student management system that provides me with a comprehensive list of students, their individual details, and a feature within the "StudentDetails" component that enables me to navigate to another component. Below are ...

Titanium: Warning upon initiation

Is it feasible to trigger an alert immediately after a window finishes loading? I am using a create window function followed by an alert message, then returning. function NewView() { var self = Ti.UI.createWindow({}); alert("A basic or confirm al ...

Error encountered while compiling NextJS: Unexpected use of single quotation mark in jsx-quotes

I can't seem to compile my NextJs 13 app without encountering errors. Take a look at my shortened eslintrc.js file below: module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', ...

The execution of the Mocha test script is hindered by a socket.io issue causing it to

Running my tests (mocha) by typing npm run test in the console was working fine until I pulled down some code from my team. There seems to be an issue now. We are building an app that utilizes Socket.io, and for some reason, it appears in the command promp ...

React CSS modules are a powerful tool for styling components in

Having some difficulty with css modules in react, I am unsure how to utilize react modules dynamically. import classnames from 'classnames' import styles from './hover.module.css /// /// const [flashElements,setFlashElements]=useState(elemen ...

Disable the button if the LocalStorage does not have any data stored

In my current setup, I have a list of words that users can interact with by clicking on a heart icon to store the word in localStorage. Once the first word is added, a red button at the top of the page becomes active, which will eventually link to the favo ...

Solving repeated function firing with ng-checked in an AngularJS ng-repeat loop

In the HTML code below, there is an ng-repeat that creates checkboxes: <span ng-repeat="name in $ctrl.widgetSelectorNames" class="widget-selectors"> <label class="checkbox" for="{{name}}"> <input type="checkbox" value="{ ...

Unraveling JSON Data in the Server-Side Code

I am facing an issue with decoding JSON data in PHP after posting a form using jQuery post. The form is successfully posted, but I am struggling to extract the data on the PHP side. Despite trying various solutions, I keep getting a result like "FirstName= ...

Deactivate certain choices in React Select

Encountering difficulties disabling specific options in a large list within a React Select component. A total of 6,500 options are loaded into the select element. Initially, there were issues with search functionality lagging, but this was resolved by impl ...

What is the best way to reset the values in react-multiple-datepicker?

Having trouble clearing values assigned in react-multiple-datepicker library. import MultipleDatePicker from "react-multiple-datepicker"; import React from "react"; class Addjob extends React.Component { constructor(props) { super ...

Conversational interface toolkit

In the process of creating a chat system using vline and Symfony2. Vline is known as a webRTC platform and API. Successfully integrated it with Symfony2 to send messages between clients. Now aiming to improve the user interface to resemble Skype. What ...

How can I develop a new function that emulates the behavior of document.ready during ajaxComplete using jQuery?

I am currently using the FoundationPress theme (a Wordpress Theme that incorporates the Foundation 6 framework from Zurb) and I am looking to ajaxify it using the Ajaxify Wordpress Site plugin. However, one issue I am facing is that a lot of the javascrip ...