Acquiring row data upon checkbox selection: A step-by-step guide

I'm struggling to separate and assign the values returned by a function to different parameters.

function saveTaxes() {
  $('input[type=checkbox]').each(function() {
    if ($(this).is(':checked')) {
      //test
      console.log($(this).closest("tr").children("td").get()[0]);
      console.log($(this).closest("tr").children("td").get()[1]);
      console.log($(this).closest("tr").children("td").get()[2]);
      //end test
      var $row = $(this).closest('tr');
      $('td', $row).each(function(i) {
        var abc = $(this).text();
        console.log(abc);
      })
      var params = {
        "cuit": $("#cuit").val(),
        "tax": i need the first val here,
        "concept": and second here
      };
      $.ajax({
        data: params,
        url: 'api/insert_taxes.php',
        type: 'post',
        success: function(response) {
          alert("Tax added.");
        }
      });
    }
  });
}

Answer №1

If you want to extract the text from each <td> element in a row and store it in an array, you can iterate over each element and use array notation like values[0] to access the values.

function saveTaxes() {

$('input[type=checkbox]:checked').each(function () {

  var $row = $(this).closest('tr');
  var values = [];

  $('td', $row).each(function(i){
      values.push( $(this).text() );
  })
  var params = {

    "cuit" : $("#cuit").val(),
    "tax" : values[0],
    "concept" : values[1]
  };

  $.ajax({

      data:  params,
      url:   'api/insert_taxes.php',
      type:  'post',
      success:  function (response) {
              alert("Tax added.");
      }

  });

});

}

Alternatively, if you know exactly how many cells there are, you can directly access them without using the $('td',$row).each( function:

...
var params = {
    "cuit" : $("#cuit").val(),
    "tax": $('td',$row).eq(0).text(),
    "concept": $('td',$row).eq(1).text()
}
...

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

Can you spot the real transformation happening?

Is there a built-in way (possibly in one of the frameworks) to determine if a form has been modified from its initial values? The onchange event is not sufficient, as it triggers even if no real change has occurred (such as toggling a checkbox on and off ...

Increasing the token size in the Metaplex Auction House CLI for selling items

Utilizing the Metaplex Auction House CLI (ah-cli) latest version (commit 472973f2437ecd9cd0e730254ecdbd1e8fbbd953 from May 27 12:54:11 2022) has posed a limitation where it only allows the use of --token-size 1 and does not permit the creation of auction s ...

Implementing a post request triggered by a button click in Node.js with Express

How can I invoke a controller from a button click event? I tested it in Postman and it works fine, but I'm having trouble calling it from a button on my front-end. I am using Nodemailer and Node Express to send emails. Here is my code. Can someone p ...

Using Underscore.js to Group JSON Data in jQuery

I am looking to format my JSON data in order to create a chart for my daily reporting templates. The chart should display the number of Approved, Rejected, and Pending items on a daily basis. The current JSON data I have is as follows: json_data = '[ ...

Establishing a link between numerous web browsers solely through client-side technology

After creating a compact AJAX-powered chat application, I wonder if it is feasible to handle all the communication client-side. Can individual pages recognize each other and share real-time updates without involving the server? Is there a way to achieve th ...

Transform Image on Hover in ReactJS

I am working on a Card Component that includes an image and text. Initially, the image is redImage and the text is black. When hovering over the card, I want the redimage to change to whiteimage and the text color to change to white as well. The content ...

Tips for Implementing a "Please Hold On" Progress Bar in ASP.NET

I have a master page named siteMaster.master, an aspx page called submission.aspx, and a user control named attachment.ascx. The script manager is included in my master page. The submission page inherits the master page and registers the user control attac ...

Issue: Unable to utilize import statement outside a module as per the guidelines of the vue-test-utils official tutorial

I'm struggling to get Vue testing set up with vue-test-utils and jest. I followed the installation guide at https://vue-test-utils.vuejs.org/installation/#semantic-versioning, but can't seem to figure out what's wrong. Here's what I&apo ...

Attach a Material-UI Popper component to a customized edge label in a React Flow

After finding inspiration from this particular example in the react-flow documentation, I decided to create my own customized version. It showcases a Material Ui Popper that appears when the edge is selected. However, my problem arises when attempting to z ...

A guide on incorporating router links within a list component in a React project

In one of my projects, I've implemented a navbar with a profile icon that expands to show four different options: "Log in", "Register", "Edit", and "Admin". However, I'm facing an issue where clicking on these links doesn't always redirect m ...

I have noticed an issue when it comes to transmitting and receiving parameters

Is there a way to incorporate an XML translation into an HTML dropdown list using AJAX? I have been trying to send the parameter using the GET method, but the JSP file responsible for generating the XML is not receiving it. var url = "responsexml.jsp"; ur ...

Does the PHP include function act as an HTTP request?

After coming across an article highlighting the negative impact of using excessive HTTP requests on server speed, I started wondering about the performance implications of PHP includes. Specifically, I'm curious if sending 4 AJAX requests compared to ...

The functions `jQuery .each()` and `jQuery .post()` offer powerful capabilities

For the past day, I've been working hard to make this method function properly. My goal is to utilize the jQuery .each() function to execute a task for each element within a specific array. The array is generated from a .post() request. $(document) ...

Troubleshooting an Issue with MediaStreamRecorder in TypeScript: Dealing with

I've been working on an audio recorder that utilizes the user's PC microphone, and everything seems to be functioning correctly. However, I've encountered an error when attempting to record the audio: audioHandler.ts:45 Uncaught TypeError ...

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

Assign a class to an element depending on the date

I need to customize a span element in my HTML code like this. html <span class="tribe-event-date-start">September 5 @ 7:00 pm</span> My objective is to identify that specific element based on its date and then apply a class to its parent co ...

Python web application encountering issues running in browser

After successfully creating a Python desktop application with Tkinter library, we decided to convert it into a web app using pyjamas. The conversion process generated html files and javascripts as expected. However, when attempting to open the html file i ...

Issue with the alphabetical ordering of subpages

My PageSidebar.js component lists child pages alphabetically. https://i.sstatic.net/DZro1.png However, when I navigate to a child page, the alphabetical order is not maintained. https://i.sstatic.net/fRVgO.png I've tried multiple solutions but hav ...

Angular.js has encountered an error due to exceeding the maximum call stack size

Hello everyone! I attempted to create recursion in order to extend my $routeProvider in Angular.js with the following code: var pages = { 'home': { 'url': '/', 'partialName': 'index', ...

Removing a selected row from a data table using an HTTP request in Angular 2

I am working with a table that has data retrieved from the server. I need to delete a row by selecting the checkboxes and then clicking the delete button to remove it. Here is the code snippet: ...