how to loop table row and get the column checkbox - javascript

Using ajax, how to:
loop through each table row
get the respective column checkbox value
upon finish loop, store in database (refer to Database section below)
javascript/jquery
<script type="text/javascript">
$(document).ready(function() {
$('#btnUpdPermission').on('click', function(e) {
var id = '<?php echo $_GET['id'];?>';
$('#table_perm tbody tr').each(function(){
});
});
});
</script>
HTML
<div class="table-responsive">
<table class="table table-bordered" id="table_perm">
<thead>
<th>Permission</th>
<th>Read</th>
<th>Create</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<tr>
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Quotation</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Banking</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" id="btnUpdPermission">Save</button>
HTML (screenshot)
Database table design
file_id is the foreign key to the file master table (page that authorized user will access)
user_id is the foreign key to the user master table (to whom this access is granted)
rights r=read,c=create,e=edit,d=delete

1.loop through each table row
You should use .each method in combination with children.
children method gets the children of each element in the set of matched elements, optionally filtered by a selector.
$('#table_perm tbody tr').each(function(){
$(this).children('td').each(function(){
});
});
2.get the respective column checkbox value
For this you can use find method.
$('#table_perm tbody tr').each(function(){
$(this).children('td').each(function(){
let checkboxValue = $(this).find('.big-checkbox').val();
});
});
3.upon finish loop, store in database
For this, you can create an asynchronous call by sending all the information via AJAX or you can use a form by passing an action method from server-side.

If I understand it well, each row corresponds to permissions to one file master table, right? (identified by file_id in your database) If that's the case, first I'd put that id each table row (as an id, as a data-* field, etc.)...
<tr data-id="3">
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
<tr data-id="4">
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
...................
Then, considering your table structure, to loop your rows and get all the checkboxes values, one option could be...
var myPermissions = {};
$('#table_perm tbody tr').each(function() {
var sectionId = $(this).data('id');
var sectionPermissions = [];
$(this).find('input.big-checkbox:checked').each(function() {
sectionPermissions.push($(this).attr('name').charAt(0));
});
myPermissions[sectionId] = sectionPermissions.join(',');
});
So you finally get an object myPermissions with all permissions for each section...
{
3: "r,c",
4: "r,d",
5: "c,e,d"
....
}
You can send that in your ajax call as a parameter.
NOTE: Two pieces of advice in your code...
There's an error in your html, your closing td lines twice (</td></td>)
If you're going to do this collecting data with ajax and not using a form, to avoid getting the permission letter from the string name, it would be better if you assign a value to each checkbox indicating the letter of that permission. I mean...
<td><input type="checkbox" class="big-checkbox" name="r[]" value="r"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]" value="c"/></td>
..........
... so then would be easier and cleaner to get the value...
sectionPermissions.push($(this).val());
I hope it helps

Related

How to fetch checkbox values from table in javascript?

I have a table which has checkbox in each column and I want to get the 'name' attribute of checked checkbox. Below is the checkbox look like. Each checkbox has different name associated with row and column. Syntax of name attribute is [row_name-col_name]:
I tried like the below in a JS file:
var formid = jQuery(elem).attr('id');
var checkdvalue = [];
var j = 0;
jQuery('#ecf_table').find('tr').each(function() {
var row = jQuery(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
checkdvalue[j++] = jQuery(row.find('input[type="checkbox"]')).attr('name');
}
alert(checkdvalue);
});
I need an array which looks like A.4-2,A.4-3,A.6-2 for the above table. However I am getting A.4-1,A.6-1 only. Please help me to get desired value.
You don't have to loop through the entire table, you can just select all checked checkboxes on the page. If you wish to limit it to that table, use selector #ecf_table input[type="checkbox"]:checked instead.
function calculate() {
var arr = [];
$('input[type="checkbox"]:checked').each(function () {
arr.push($(this).attr('name'));
});
console.log(arr);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="A.1">
<input type="checkbox" name="A.2">
<input type="checkbox" name="A.3">
<input type="checkbox" name="B.1">
<input type="checkbox" name="B.2">
<input type="checkbox" name="B.3">
<button onclick="calculate()">Click me</button>
The issue with your code is that your selector finds a collection of checkboxes. You then call attr() on that collection, but that method will only look at the first element found, not all of them.
To make the logic work you could instead select all the checked boxes and use map() to build the array from them. Using that method, all your code could be reduced to this:
var checkedvalue = $('#ecf_table :checkbox:checked').map(function() {
return this.name;
});
I did a small edit to your code.
This should work fine.
function TestMethod()
{
var checkdvalue = [];
var j = 0;
jQuery('#ecf_table').find('tr').each(function () {
var row = jQuery(this);
row.find('input[type="checkbox"]').each(function () {
var checkbox = jQuery(this);
if(checkbox.prop("checked") == true)
{
checkdvalue[j++] = checkbox.attr("id");
}
});
});
alert(checkdvalue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" runat="server">
<div>
<table id="ecf_table">
<tr>
<td colspan="6">Advanced Scrum Product Owner</td>
</tr>
<tr>
<td>e-Competence Level</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>A.4</td>
<td><input type="checkbox" id="A.4-1"/></td>
<td><input type="checkbox" id="A.4-2"/></td>
<td><input type="checkbox" id="A.4-3"/></td>
<td><input type="checkbox" id="A.4-4"/></td>
<td><input type="checkbox" id="A.4-5"/></td>
</tr>
<tr>
<td>A.6</td>
<td><input type="checkbox" id="A.6-1"/></td>
<td><input type="checkbox" id="A.6-2"/></td>
<td><input type="checkbox" id="A.6-3"/></td>
<td><input type="checkbox" id="A.6-4"/></td>
<td><input type="checkbox" id="A.6-5"/></td>
</tr>
<tr>
<td>B.1</td>
<td><input type="checkbox" id="B.1-1"/></td>
<td><input type="checkbox" id="B.1-2"/></td>
<td><input type="checkbox" id="B.1-3"/></td>
<td><input type="checkbox" id="B.1-4"/></td>
<td><input type="checkbox" id="B.1-5"/></td>
</tr>
<tr>
<td>B.3</td>
<td><input type="checkbox" id="B.3-1"/></td>
<td><input type="checkbox" id="B.3-2"/></td>
<td><input type="checkbox" id="B.3-3"/></td>
<td><input type="checkbox" id="B.3-4"/></td>
<td><input type="checkbox" id="B.3-5"/></td>
</tr>
</table>
<input type="button" onclick="TestMethod()" value="submit" />
</div>
</form>

Detect html table cell value change

How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});

Issue regarding to set a checkbox with a particular value among all checkboxes with same id and class using javascript

I have an existing web application. Now I am facing a particular problem regarding some javascript. I have a list of checkbox with same classname, id and name. That means all checkbox will have the same class,name and id. Only the value will be different for each checkbox.
The code is as follows:
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" /></td>
</tr>
Now the problem is that through javascript after checking some condition I have to set the checkbox with a specific value.
I have tried the following line of code,but it is not working.
$("#brand_id_").attr("value",'FAG').attr("checked", true);
It was setting the first checkbox. And that checkbox has a different value.
Please help me to find out a solution for this.
Thanks in advance!!
Use class selector, and check for value attribute.
$(".brand_tag[value='FAG']").attr("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" /></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" /></td>
</tr>
Although this will work but please note that element with duplicate Ids means your HTML is invalid. Try to avoid this.
You can try this
$(".brand_tag[value=FAG]").attr("checked","checked");
First of all you need to set your check boxes with different ID's, and then you can use either class selector or ID selector or tag selector.
If you want to set the value and the checked property of all the checkboxes to 'FAG' and true respectively, use the following:
$(".brand_tag").attr("value",'FAG').attr("checked", true);
If you want to set the properties for a specific checkbox, use the ID selector after you change the ID's of your checkboxes as follows:
$("#NewID1").attr("value",'FAG').attr("checked", true);
where NewID1 is the ID of that specific checkbox that you want to modify its properties.
You can use
$("input[type=checkbox][value='FAG']").prop("checked", true);
As your code attr("value",'FAG') will change the value of checkbox
Check my examples :-)
https://jsfiddle.net/6cz22b18/4/
<table id="brand_id_table">
<tr>
<td><input type="text" id="txtInput" value="FAG"></td>
<td><button onclick="$.setCheckbox()">Check</button></td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Austin Engineering" />Austin Engineering</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" />FAG</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="Jeekay" />Jeekay</td>
</tr>
<tr>
<td><input class="brand_tag" id="brand_id_" name="brand_id[]" type="checkbox" value="FAG" />FAG</td>
</tr>
</table>
$.setCheckbox = function() {
// reset
$("#brand_id_table").find("input:checkbox").attr('checked', false);
// set checkbox
$("#brand_id_table").find("input:checkbox").each(function() {
if($(this).val() == $("#txtInput").val()) {
$(this).attr('checked', true);
}
});
}
'$("#brand_id_table").find("input:checkbox")' is items
so, you have to use each() function that is like a 'for statement'.

jQuery not working for select only one checkbox

I have built a table with four rows and eight columns, each with a checkbox. I want only one checkbox to be allowed to check per row. I am trying to use jquery to do this. Logically, it works in jsfiddle but it does not work locally for me. I did use an alert first to make sure jQuery is being loaded first.
Here is my code below. The problem is, I can still check multiple checkboxes per row when I should only be allowed to check one:
<body>
<h2>Checkbox Test</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<script type="text/javascript">
function onLoadAlert() {
alert('Sup');
}
$(document).ready(onLoadAlert);
</script>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
<table border="1">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<div>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</div>
</tr>
</tbody>
Your input elements are not siblings, because they have different parents – the td elements:
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
That's why this doesn't work:
$(this).siblings().prop('checked', false);
Instead, do this:
$(this).closest('tr').find('input').not(this).prop('checked', false);
Fiddle 1
Alternatively, you could use radio buttons having the same name:
<td><input type="radio" name="matrix"></td>
<td><input type="radio" name="matrix"></td>
<td><input type="radio" name="matrix"></td>
That way, you wouldn't need any JavaScript.
Fiddle 2
Would it not be a lot simpler to just do this
var checkBoxes = $('input[type=checkbox]');
$('table').on('click', 'input[type=checkbox]', function () {
checkBoxes.prop('checked', false);
$(this).prop('checked', true);
});
And you have a div inside a tr.

How to check which checkboxes are checked or unchecked in django template?

I'm doing a small project in Django by using Python.
In that, I am dynamically populating a table with data of pending tasks. Each row of the table contains a checkbox field. According to the priority level, number of rows can be less or more.
I Have to stop postback operation on submit button click event if none of the checkboxes are selected.
How do you identify the checkbox name or ID in JavaScript as they are generated dynamically?
html
<form method="post" class="myform" action=".">
<table>
<tbody>
<tr>
<th><label for="checkbox1">Checkbox 1</label></th>
<td><input type="checkbox" id="checkbox1" name="checkbox1" /></td>
</tr>
<tr>
<th><label for="checkbox2">Checkbox 2</label></th>
<td><input type="checkbox" id="checkbox2" name="checkbox2" /></td>
</tr>
<tr>
<th><label for="checkbox3">Checkbox 3</label></th>
<td><input type="checkbox" id="checkbox3" name="checkbox3" /></td>
</tr>
</tbody>
</table>
<input type="submit" class="myform-submit" />
</form>
javascript (assuming jquery)
$(document).ready(function(){
$(".myform-submit").bind("click", function(e) {
e.preventDefault();
var $form = $(this).closest(".myform");
if ($("input:checkbox:checked").length) {
alert("submitting");
$form.submit();
}
});
});
jsfiddle
http://jsfiddle.net/c4urself/xWbEk/

Categories