Collect all selected checkboxes from the table upon form submission

Within my form, I've included a <table> that displays rows fetched from the database. Each row contains a checkbox, with the name attribute set to the record's ID.

The value of the checkbox changes based on its state: 1 if checked, 0 if unchecked.

When the user submits the form, I want to send the IDs of the selected rows. However, I'm unsure how to accomplish this.

 <table border=1 id="mondiv" class="hidden" >
            <th></th>
            <th>Numero</th>
            <th>Nom</th>
            <th>Prenom</th>
            <th>Spécialité</th>
{% for item in users %}
            <tr>
                <td><input type="checkbox" name="{{ item.id }}" onchange="changeetat(this)" /></td>
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.lastname }}</td>
                <td>{{ item.specialty }}</td>
            </tr>
{% else %}
            <h2>Aucun organisateur trouvé</h2>
 {% endfor %}
        </table>

Below is the associated Javascript function:

    function changeetat(element){
    if(element.checked){
       element.value = '1';
   }
   else{
       element.value = '0';
   }

}

I am using a Twig template with Symfony framework.

Answer №1

When jQuery is not in use, the following code can be used to handle checkboxes and inputs:

var inputs = document.getElementsByTagName("input"); //or
document.forms[0].elements;  
var cbs = []; //will store all checkboxes  
var checked = []; //will store all checked checkboxes  
for (var i = 0; i < inputs.length; i++) {  
    if (inputs[i].type == "checkbox") {  
        cbs.push(inputs[i]);  
        if (inputs[i].checked) {  
            checked.push(inputs[i]);  
        }  
    }  
}  
var nbCbs = cbs.length; //number of checkboxes  
var nbChecked = checked.length; //number of checked checkboxes  

Alternatively, when using jQuery:

var cbs = $("input:checkbox:checked");

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

Fresh Regular Expression created from a readable string

I can't figure out why rg = new RegExp(`/${a}.*${b}/`) isn't functioning properly here, while rg = /\(.*\)/ is working fine. let a = '\('; let b = '\)'; let rg; //rg = new RegExp(`/${a}.*${b}/`); // doesn&a ...

How is it possible for the output to be a string array when the variable was declared as a number in TypeScript?

Snippet: function sampleFunction(sample:string|number|string[]) { if(typeof sample == "string") { console.log("Sample is String " + sample); } else if(typeof sample == "number") { console.log("Sample is Number " + sampl ...

Retrieving data from a dropdown menu and transferring it to the $_POST superglobal for storage in

Currently, I am working on creating a registration form where I am using $_POST to paste all the elements like this: <input type="text" placeholder="Your username" name="username" value="<?php echo @$username; ?>"> However, my issue arises wh ...

Retrieve the name of the selected checkbox

Currently, I am working on a page where check boxes are generated dynamically. Every time a user clicks on any of the check boxes, the following event is triggered: $(':checkbox').click(function() { }); I would like to know how I can retrieve ...

Within Angular2 NGmodule, I aim to dynamically load two distinct sets of route modules depending on certain conditions

In Angular2, I am looking to load two different sets of route modules - one for jobseekers and the other for employers. Both sets will have the same URLs but will contain different modules for jobseekers and employers. Therefore, I need a way to dynamicall ...

Unveiling the mysteries of JSONP in conjunction with AJAX

JSONP allows for bypassing the same origin policy in JavaScript by using <script> tags to load third party data. However, I am uncertain about how JSONP is utilized together with AJAX. My assumption is that: When an AJAX call is initiated, a <sc ...

Can the language for vue-datepicker be imported through a variable?

In my current project, I am utilizing the vue-datepicker plugin. The documentation states that you can set the language as follows: <datepicker :language="nl" /> Additionally, import {nl} from 'vuejs-datepicker/dist/locale' And ...

Each instance of an Ajax request is being replicated

I have a webpage that includes a form. The form gets dynamically loaded using jquery.load within the document.ready loop. $('#storico').load('bp/storico.php?az=<?php echo $id; ?>'); Furthermore, I've set up a delegated even ...

JavaScript Game Timer

I am working on a countdown timer where I have set the variable seconds to 10. If the seconds reach zero, I want to add 2 seconds to it and stop the program from looping. Can someone please assist me with this? var isWaiting = false; var isRunning = fal ...

Is it considered poor coding practice to have a return statement within every iteration of a map loop?

While I appreciate the functionality of this map, I can't help but wonder if it's considered poor practice to use return on every iteration of a loop. Would using return in every iteration be deemed as bad practice? Thank you const array = [ ...

Encountering a problem with populating data in postgresql

After executing the npm run seed command to populate data into PostgreSQL, even though the seeding process seemed to be successful, I couldn't locate the seeded data in the PostgreSQL database. Can anyone advise on what might have gone wrong or sugges ...

A step-by-step guide on how to smoothly hide an element using ng-hide in AngularJS

Currently, I am able to toggle an element's visibility based on a boolean condition in my controller. However, I am looking for a way to smoothly fade out the element if the condition is true instead of instantly hiding it. Any suggestions on how to a ...

Is it possible to maintain the x-axis in a fixed position while scrolling with d3.js?

I am working with a d3 matrix that has both an x and y-axis. However, my y-axis is quite long, so I want to ensure that the x-axis remains visible even when scrolling. I have tried setting the position attribute to 'fixed' using .style("position" ...

I am experiencing an issue where a JavaScript function is not being called from the code behind when I attempt to call another function within the

When I call a javascript function from the code behind, it works fine. However, when I try to call another function from the same code behind, it does not work. Here is the code snippet: ClientScript.RegisterStartupScript(typeof(Page), "script", "copy1(& ...

Remove the "hover effect" from an element using programming on mobile devices

There is an element on my webpage that has a specific set of styles for when it is hovered over. However, on mobile devices, this triggers the "sticky hover" effect, where touching the element applies the hover effect until the user touches another part of ...

Utilize JavaScript to capture and select multiple values simultaneously

Having a simple problem that I can't seem to fix - I need to capture the values of a field with "select multiple" options. The code is provided in the following gist: Gist Code <script type="text/javascrit"> function newsletter_send( name, ema ...

Ways to substitute PHP functions using AJAX

I'm a beginner with AJAX. How do I replace the initial PHP function after an AJAX action is executed? It seems that the page does not refresh after the action takes place. Below is the code: Javascript function set_ddm(another_data) { var resul ...

React - struggling to display state data

I have a React component that I am working on. import React, { Component } from 'react'; class VesselDropdown extends Component { constructor(props) { super(props) this.state = { } } componentDidMount() ...

Disable automatic playback of HTML video

There is an HTML video with an image that loads initially and then disappears to play the video. I would like the image to always be visible until I click on it. Once clicked, the video should start playing. You can view the code on JSFiddle: http://jsf ...

Exploring the implementation of waterfall in a Node.js application

async.traverse(map, function(item, tnext){ async.waterfall([ function(wnext){ console.log("One"); //performing MongoDB queries db.collection.find().toArray(function(err){ if(err){ ...