Collect user input from an array of checkboxes

Question

Collect user input from an array of checkboxes

After spending hours attempting to retrieve data from an array of checkboxes with the same name, I am still facing difficulties.

<input type="checkbox" name="node"/>

var selectedValues = [];

             $(document.getElementsByName("node")).each(function () {
            selectedValues.push($(this).checked);
           });

            $.ajax({
                url: "/Summary/Test",
                type: "POST",
                data: selectedValues,
                traditional: true                
            });

public void Test(string [] nodes)
        {
        }

I'm finding it challenging to identify where my mistake lies. Why is it not executing that particular line?

javascript ajax model-view-controller

Answer 1

Answer №1

To gather an array of values from checked checkboxes, utilize the mep method like this:

var selectedValues = $('[name=node]:checked').map(function() {
    return this.value;
}).get();

This code assumes you are using jQuery.

If you prefer plain javascript, a similar approach can be taken:

var selectedValues = [],
    nodes = document.querySelectorAll('[name=node]');

Array.prototype.slice.call(nodes).forEach(function(el) {
    if (el.checked) {
        selectedValues.push(el.value);
    }
});

For AJAX functionality:

$.ajax({
    url: "/Summary/Test",
    type: "POST",
    data: {nodes: selectedValues},
    traditional: true             
});

Answer 2

To gather an array of values from checked checkboxes, utilize the mep method like this:

var selectedValues = $('[name=node]:checked').map(function() {
    return this.value;
}).get();

This code assumes you are using jQuery.

If you prefer plain javascript, a similar approach can be taken:

var selectedValues = [],
    nodes = document.querySelectorAll('[name=node]');

Array.prototype.slice.call(nodes).forEach(function(el) {
    if (el.checked) {
        selectedValues.push(el.value);
    }
});

For AJAX functionality:

$.ajax({
    url: "/Summary/Test",
    type: "POST",
    data: {nodes: selectedValues},
    traditional: true             
});

Answer 3

Answer №2

It's important to avoid naming all checkboxes the same, as only the final value will be submitted. Make sure to update each one with:

<input type="checkbox" name="node[]" />

This adjustment will generate an array of the chosen values.

Answer 4

It's important to avoid naming all checkboxes the same, as only the final value will be submitted. Make sure to update each one with:

<input type="checkbox" name="node[]" />

This adjustment will generate an array of the chosen values.

Collect user input from an array of checkboxes

Answer №1

Answer №2

Similar questions

Looking for a jQuery Gantt Chart that includes a Treeview, Zoom functionality, and editing capabilities?

The autocomplete feature in Codemirror seems to be failing specifically when writing JavaScript code

Ensure UseEffect is only triggered once with specific dependencies

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

Set the Vue 3 Select-Option to automatically select the first option as the default choice

The CSS popup box fails to reset its data after being closed, and the closure button does not effectively close the popup

Incorporating Earth Engine scripts into my AngularJS project to showcase NDVI data layer on a Google Map

The Express application fails to receive a response from a Mongodb query function

Are there any ASP.NET MVC counterparts to JavaScript Generators?

Failed to establish Modbus TCP connection

Angular's watch feature fails to trigger when the value is modified

Sending data using jQuery to a web API

Emphasizing Text Within Div Element

Error message: JQuery IAS Infinite Scrolling + Packery - The IASCallbacks function is not declared

What could be causing the href to malfunction on my local website?

Altering the input type of a cloned element in Internet Explorer results in the loss of the value

Utilizing dual identifiers in a Jquery plugin

Executing a custom object function in AngularJS by using the ng-click directive

Sending an array encoded in JSON to jQuery

In the absence of a value