Transmit the updated value of the element via AJAX

Is there a way to capture the value of a checkbox when it changes and then send that value through Ajax?

I have numerous checkboxes displayed on my HTML page, so I can't simply send all the values every time one changes. I only want to transmit the value of the checkbox that was just changed.

Below is a snippet of my HTML code :

<INPUT type="checkbox" name="cb_redir301" value="post_id_445">
<INPUT type="checkbox" name="cb_redir301" value="post_id_573">
<INPUT type="checkbox" name="cb_redir301" value="post_id_264">
<INPUT type="checkbox" name="cb_redir301" value="post_id_387">
<INPUT type="checkbox" name="cb_redir301" value="post_id_190">
(...)
<INPUT type="checkbox" name="cb_redir301" value="post_id_268">

I attempted to use the following JavaScript to capture and send the value, but it doesn't seem to work, possibly due to the non-uniqueness of the checkbox's name ('cb_redir_301').

$('#redir_selector').change(function(evt) {
    $.post(ajaxurl, {
        action: 'save_backend_assocs', 
        nonce:  $('#ajax_admin_redir_selector_nonce').text(),
        cb_redir301: $(this).is(':checked')
    }, function(response) {
                    });

            });

});

How can I instruct JS to only send the value of the checkbox that has been altered?

Answer №1

Quicker:

const checkBoxes = document.querySelectorAll("input[type='checkbox']");
for(let x = 0; x < checkBoxes.length; x++) {
    checkBoxes[x].addEventListener("change", updateInfo);
}

Answer №2

Discovered a fix by:

$("input[type='checkbox']").on("change",function(){

console.log($(this).val());

This should resolve the issue.

Regards, Ken

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

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

methods for eliminating duplicate values from distinct genres

By clicking on the link provided, you will be able to view the code. The issue arises when I click on the action checkbox as it removes redundant data. However, if I then click on another checkbox, such as family, it will display the value. Interestingly, ...

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone. Let's start with a basic link: <a href="#" onfocus="menu()">ME ...

What is the process of invoking a Java method through AJAX on a website?

I am trying to figure out how to call the Java method getMessage() from a jar file whenever a button on my webpage is clicked. Can anyone help me achieve this? File name: index.html <!doctype html> <html> <head> <meta charset="utf-8" ...

Is there a way to retrieve all the default CSS properties of the input checkbox tag using JavaScript?

Despite attempting to use console.log with JavaScript, my efforts were unsuccessful. Here is an example: console.log(document.getElementsByTagName('input')[0].attributes[0]) ...

Once chosen, zoom in on the map to view the results

I am facing an issue with multiple selects in my code, where one select depends on the result of another. The ultimate goal is to zoom in on the area that has been searched and found, but unfortunately, it is not functioning as expected. If you'd lik ...

Unveiling the Key to Utilizing $children in Vue 3 to Develop a Tabs Component

I am currently working on developing a Tabs component using Vue 3, similar to the one discussed in this relevant question. <tabs> <tab title="one">content</tab> <tab title="two" v-if="show">conten ...

Creating a Map Using HTML and JavaScript

My current project involves creating a simple map that can be moved with mouse drag functionality, featuring images such as islands. I have successfully retrieved the mouse position by declaring variables posX and e.clientX, as well as for e.clientY. Howe ...

What are the steps for setting up API REST calls proxy for a frontend hosted on Netlify?

While testing locally, I am able to successfully post a call and access it through Netlify. However, once I host the frontend app on Netlify, the POST Proxy is being set to the Netlify URL. The hosted URL: Upon clicking "Sign Up" and then clicking on "Si ...

Exploring the depths of a multidimensional dictionary within AngularJS

I am currently working on a project using AngularJS. The data I have is in the form of JSON: { "leagues":{ "aLeague":{ "country":"aCountry", "matchs":{ "aUniqueID1":{ "date":"2014-09-07 13:00:00", "guest_play ...

Rely on the pre-installed package

Currently, I am creating a intelligent package that relies on 'showdown', a pre-installed Meteor package. How should I indicate this dependency? Even after adding packages: { 'showdown': {} } to smart.json, I encountered an error st ...

Ways to retrieve slider value when button is clicked?

I am currently working on a range-slider that has two ranges and I need to retrieve the slider value in my javascript code. Here is my approach so far: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.cs ...

What is the best way to locate the index of a td element that contains the text "Up" using jQuery, and then utilize that index to choose the corresponding

I have a table that has the following structure: <table> <tr><td>a</td><td>b</td><td>up</td><td>d</td></tr> <tr><td>0</td><td>1</td><td>99</td>< ...

The submission of a form within a conditionally displayed component is not being executed

Within my custom tagfile, I have implemented a form: <h:form> <h:commandButton value="click"> <f:ajax event="click" listener="#{bean[method]}" /> </h:commandButton> </h:form> I am dynamically rendering it usi ...

Performing AJAX post/get requests between two HTML pages using JavaScript

I am currently in the process of developing my first website. I have created a new HTML design that will serve as a ticket for the site. This ticket will be loaded from the main page when users click on the "See Ticket" button. The HTML file contains a tab ...

Is it possible to alter CSS based on the width of the webpage using javascript

We are currently developing a web application that will be deployed on various devices such as mobile phones, iPads, iPhones, and Android. Instead of using user agents to show different views, I prefer having CSS that adjusts based on the screen width. We ...

Ways to set a default value in AngularJS when there is no value to compare in an array

Hello, I'm a newcomer to AngularJS and I have the following code snippet in HTML: // Here, I have another ng-repeat loop where I compare home.home_info_id with avg.home_inof_id <div ng-repeat='home in homeDetailInfo'> <div ng-r ...

"Looking for a way to create a new line in my particular situation. Any tips

Here is the code snippet I am working with: let list: Array<string> =[]; page.on('request', request => list.push('>>', request.method(), request.url()+'\\n')); page.on('respon ...

Transform an { Key : Value } Object into Regular Variables using jQuery

Here is a code snippet in PHP: foreach($myarray as $key=>$value) { ${$key} = $value; } Now, I am wondering if we can achieve the same functionality using JS/jQuery? In this jQuery example, I am trying to assign the value of each td element with a cla ...

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...