How to hide and show table columns with selected check box - javascript

I have a table and in that table I give check box in <th> like <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="1" />Sr No</th>. Currently it gives me the value of selected columns. Now I want to show and hide this column.
Following are my code
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm" style=" overflow: auto;">
<thead>
<tr>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="1" />Sr No</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="2" />Bilty Id</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="3" />LR No</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="4" />Consignor Name</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="5" />Consignor GSTIN</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="6" />Consignee Name</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="7" />Consignee GSTIN</th>
</tr>
</thead>
<tbody>
<?php $counter = 1; ?>
<?php foreach($bilties as $bilty):?>
<tr>
<td><?php echo $counter;?></td>
<td><?php echo $bilty->id;?></td>
<td><?php echo $bilty->lr_no;?></td>
<td><?php echo $bilty->consignor;?></td>
<td><?php echo $bilty->consignor_gst_no;?></td>
<td><?php echo $bilty->consignee;?></td>
<td><?php echo $bilty->consignee_gst_no;?></td>
</tr>
<?php $counter++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</section>
<button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print </<button type=""></button>>
</form>
</div>
<script>
$('#print').click(function (event) {
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:checked').each(function() {
allVals.push($(this).val());
});
console.log("check Column"+ allVals);
alert(allVals);
});
</script>
</body>
</html>

You can iterate over the array to set the display property with eq():
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css('display', 'none');
});
});
Demo:
$('#print').click(function (event) {
$('td').css('visibility', 'visible');
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:checked').each(function() {
allVals.push($(this).val());
});
//console.log("check Column"+ allVals);
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css('display', 'none');
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm" style=" overflow: auto;">
<thead>
<tr>
<th><input type="checkbox" name="selectedrecord" value="1" />Sr No</th>
<th><input type="checkbox" name="selectedrecord" value="2" />Bilty Id</th>
<th><input type="checkbox" name="selectedrecord" value="3" />LR No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1xy</td>
<td>1abc</td>
<td>1mnl</td>
</tr>
<tr>
<td>2xy</td>
<td>2abc</td>
<td>2mnl</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print</button>
</form>

This is your solution if you put checkbox in table heading then how to showing and hiding that column you need to put checkbox on above table
function hideshow(){
var cells=document.getElementById('tab').getElementsByTagName('td'), i=0, c;
var chb=document.getElementById('chboxes').getElementsByTagName('input');
while(c=cells[i++]){
c.style.display=chb[c.cellIndex].checked?'':'none';
}
}
function setEvent(){
var chb=document.getElementById('chboxes').getElementsByTagName('input'), i=0, c;
while(c=chb[i++]){
if(c.type=='checkbox'){
c.onclick=function(){
hideshow()
}
}
}
}
onload=setEvent;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<form>
<div id="chboxes">
<input type='checkbox' name='coffee' value='Address'>Address
<input type='checkbox' name='coffee' value='Name'>Name
<input type='checkbox' name='coffee' value='ID'>ID
<input type='checkbox' name='coffee' value='UserName'>UserName
<input type='checkbox' name='coffee' value='Code'>Code
</div>
<table id="tab" width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Address</td>
<td>Name</td>
<td>ID</td>
<td>UserName</td>
<td>Code</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

My solution...
const MyTable = document.querySelector('#my-table tbody')
document.querySelectorAll('#my-table thead input[type=checkbox]').forEach(inChk=>
{
inChk.checked = true
inChk.addEventListener('change', HeadClick)
})
function HeadClick(e) {
let Col_ALL = MyTable.querySelectorAll(`td:nth-child(${e.target.value})`)
if ( e.target.checked ) Col_ALL.forEach(eTD=>eTD.style.visibility='visible' )
else Col_ALL.forEach(eTD=>eTD.style.visibility='hidden')
}
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .5em 1em; height: 1em; }
<table id="my-table">
<thead>
<tr>
<td><input type="checkbox" value="1"/></td>
<td><input type="checkbox" value="2"/></td>
<td><input type="checkbox" value="3"/></td>
<td><input type="checkbox" value="4"/></td>
<td><input type="checkbox" value="5"/></td>
</tr>
</thead>
<tbody>
<tr><td>0.0</td><td>0.1</td><td>0.2</td><td>0.3</td><td>0.4</td></tr>
<tr><td>1.0</td><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr>
<tr><td>2.0</td><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td></tr>
<tr><td>3.0</td><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td></tr>
</tbody>
</table>

Try this out. I have updated your code this may helps you. I have shown column when it's checked and hide when unchecked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
th,
td {
white-space: nowrap;
}
div.dataTables_wrapper {
direction: rtl;
}
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
font-family: Vazir;
font-size: 10px;
}
th {
background-color: #99a;
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
}
td {
background-color: #bbc;
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
text-align: center;
}
</style>
</head>
<body>
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm"
style=" overflow: auto;">
<thead>
<tr>
<th class="col-1"><input type="checkbox" name="selectedrecord" value="1"
onchange="showHideCols()" checked/>Sr No
</th>
<th class="col-2"><input type="checkbox" name="selectedrecord" value="2"
onchange="showHideCols()" checked/>Bilty
Id</th>
<th class="col-3"><input type="checkbox" name="selectedrecord" value="3"
onchange="showHideCols()" checked/>LR No
</th>
<th class="col-4"><input type="checkbox" name="selectedrecord" value="4"
onchange="showHideCols()" checked/>Consignor Name</th>
<th class="col-5"><input type="checkbox" name="selectedrecord" value="5"
onchange="showHideCols()" checked/>Consignor GSTIN</th>
<th class="col-6"><input type="checkbox" name="selectedrecord" value="6"
onchange="showHideCols()" checked/>Consignee Name</th>
<th class="col-7"><input type="checkbox" name="selectedrecord" value="7"
onchange="showHideCols()" checked/>Consignee GSTIN</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-1">1</td>
<td class="col-2">2</td>
<td class="col-3">3</td>
<td class="col-4">4</td>
<td class="col-5">5</td>
<td class="col-6">6</td>
<td class="col-7">7</td>
</tr>
<tr>
<td class="col-1">1</td>
<td class="col-2">2</td>
<td class="col-3">3</td>
<td class="col-4">4</td>
<td class="col-5">5</td>
<td class="col-6">6</td>
<td class="col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1"
style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print </<button type=""></button>
</form>
</div>
<script>
$('#print').click(function (event) {
event.preventDefault();
});
window.onload = function () {
showHideCols();
}
function showHideCols() {
var allVals = [];
$('input[name=selectedrecord]:not(:checked)').each(function () {
$(".col-" + $(this).val()).css({
// visibility: 'hidden'
display:'none'
});
allVals.push($(this).val());
});
$('input[name=selectedrecord]:checked').each(function () {
$(".col-" + $(this).val()).css({
// visibility: 'visible'
display:'table-cell'
});
allVals.push($(this).val());
});
console.log("check Column" + allVals);
// alert(allVals);
}
</script>
</body>

Related

Trying to calculate sum only when shown based on value in td marked with id with javascript/jquery

I've got several fields in a table that show and hide using checkboxes. I want to calculate the sum in a total field at the bottom of the table with only values that have been switch up to visible. Right now I'm only able to get it to show all values in the total instead of just visible ones.
These scripts combine to operate all the functions on the page.
<script type="text/javascript">
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
<script>
$(document).ready(function() {
$("input[type=checkbox]").change(function()
{
var divId = $(this).attr("id");
if ($(this).is(":checked")) {
$("." + divId).show();
}
else {
$("." + divId).hide();
}
});
});
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
Here is the basic structure of the tables without css.
<center>
<div style="width:600px;">
<input type="checkbox" name="colorCheckbox"
value="lippro"> Lippro</label>
</div>
</center>
<div class="lippro" style="float:left;width:45%;display:none;">
<p>
<strong>Lippro</strong> <br />
<input class="my-activity" type="checkbox" value="42"> example<br/>
<input class="my-activity" type="checkbox" value="43"> example<br/>
<input class="my-activity" type="checkbox" value="44"> example<br/>
<input class="my-activity" type="checkbox" value="45"> example<br/>
<input class="my-activity" type="checkbox" value="46"> example<br/>
</p>
</div>
<table>
<thead>
<tr>
<th>Pro</th>
<th></th>
<th></th>
<th>Price</th>
</tr>
</thead>
<tbody id="displaytable">
<tr class="41" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">4500</td></tr><tr class="42" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">7800</td></tr><tr class="43" style="display:none">
<td>First Area</td>
<td></td>
<td></td><td class="price">6900</td></tr><tr class="44" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">6000</td></tr><tr class="45" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">8500</td></tr><tr class="46" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">8500</td></tr>
<tfoot class="shown"><tr><td colspan="3">Total:</td>
<td id="total"></td></tr></tfoot>
</tbody>
</table>
I've tried to work with this javascript function but it counts all totals not just shown ones.
var cls = document.getElementById("displaytable").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++){
if(cls[i].className == "countable"){
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
document.getElementById('total').innerHTML += sum;
That was taken from the fiddle found here.
Looks like you're a newbie...
const displayTable = document.getElementById('display-table')
, lipProCkBxs = document.querySelectorAll('#lip-pro input[type=checkbox]')
, tableTotal = document.querySelector('#display-table tfoot tr td:last-child')
;
function showTR()
{
let total = 0
;
lipProCkBxs.forEach( CkBx=>
{
let TRlist = displayTable.querySelectorAll('.c'+CkBx.value)
if (CkBx.checked)
{
TRlist.forEach(TR=>
{
TR.style='display: table-row'
total += Number( TR.cells[3].textContent )
})
}
else
{ TRlist.forEach(TR=>TR.style='') }
})
tableTotal.textContent = total
}
// first time
lipProCkBxs.forEach( CkBx=>
{
CkBx.checked = false
CkBx.onchange = showTR
})
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
Table { border-collapse: collapse; margin-top: 1em; width:20em; }
td { border: 1px solid grey; padding: 2px 10px; }
thead { background-color: turquoise;}
tfoot { background-color: orchid;}
#display-table tbody tr { display: none; }
#display-table tbody tr td:last-child,
#display-table tfoot tr td:last-child { text-align: right;}
<div id="lip-pro">
<h3>Lippro</h3>
<label> <input class="my-activity" type="checkbox" value="41" /> v41 </label>
<label> <input class="my-activity" type="checkbox" value="42" /> v42 </label>
<label> <input class="my-activity" type="checkbox" value="43" /> v43 </label>
<label> <input class="my-activity" type="checkbox" value="44" /> v44 </label>
<label> <input class="my-activity" type="checkbox" value="45" /> v45 </label>
<label> <input class="my-activity" type="checkbox" value="46" /> v46 </label>
</div>
<table id="display-table">
<thead>
<tr>
<th>Pro</th>
<th></th>
<th></th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="c41" >
<td>example v41</td>
<td></td>
<td></td>
<td class="price">4500</td>
</tr>
<tr class="c42" >
<td>example v42</td>
<td></td>
<td></td>
<td class="price">7800</td>
</tr>
<tr class="c43" >
<td>First Area v43</td>
<td></td>
<td></td>
<td class="price">6900</td>
</tr>
<tr class="c44" >
<td>example v44</td>
<td></td>
<td></td>
<td class="price">6000</td>
</tr>
<tr class="c45" >
<td>example v45</td>
<td></td>
<td></td>
<td class="price">8500</td>
</tr>
<tr class="c46" >
<td>example v46</td>
<td></td>
<td></td>
<td class="price">8500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td colspan="3">0</td>
</tr>
</tfoot>
</table>

How to assign input value to checkbox value, then calculate checked total?

How to assign a <input type="text" value=""> to a <input type="checkbox" value="">, without hardcoding a numerical value to the checkbox? Then calculating the value total based on what is checked?
For example, I have a form that is asking for the name of an item and its cost. Then when I click submit it adds the data into a table. I want to be able to check the checkbox and have it call on the value from the cost I entered. Is it possible to do something like <input type="checkbox" value="cost"> rather than assigning <input type="checkbox" value="10">?
The form is purely for visualization only. My actual code can post data and is more detailed with modals and what not.
$(document).on("change", ".check", function() {
var checked = $('.check:checked'),
sum = checked.get().reduce(function(prev, item) {
return prev + parseFloat(item.getAttribute('value'));
}, 0);
$('.addTotal').text(sum.toFixed(2));
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>
You can do this using jQuery's .parent() method.
jQuery Documentation
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. The .parent() method is similar to the .parents() method.
Running Code
var total = 0;
$(document).on("change", ".check", function() {
var cost = parseFloat($(this).parent().parent().find(".cost").text().replace("$", ""));
if ($(this).is(":checked")) {
total += cost;
} else {
total += -cost;
}
$(".addTotal").text(total);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td class="cost">$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td class="cost">$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>

Get values of all the input in a table

I am stuck with this problem. I wanted to get all the values of all the input of the table but I am having a having a hard time getting all values. The number of rows in the table are dynamic.
<table id="receiptTable" class="table table-bordered">
<thead>
<th class="hidden">
<label>Order Item ID</label>
</th>
<th class="col-md-3">
<label>Item</label>
</th>
<th class="col-md-2">
<label>UOM</label>
</th>
<th class="col-md-2">
<label>Qty</label>
</th>
</thead>
<tbody>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="qwe123">
</td>
<td class="col-md-3">
<p>
Product 1
</p>
</td>
<td class="col-md-2" hidden>
<p>
UNIT
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="0" required>
</td>
</tr>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="abc123">
</td>
<td class="col-md-3">
<p>
Product 2
</p>
</td>
<td class="col-md-2" hidden>
<p>
PCS
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="3" required>
</td>
</tr>
</tbody>
I need to get the values of '.orderItemIDValue' and '.qtyFulfilled' and store them in a object array.
Iterate trs inside the table using map
var inputVals = $("#receiptTable tbody tr").map( (i,v) => ({
orderItemId : $(v).find(".orderItemID .orderItemIDValue").val(),
qty: $(v).find(".orderItemID .qtyFulfill").val()
})//end of inner function
).toArray(); //end of map
I'd select all the table's rows, loop them and return an object holding the className as key and its value
let values = [...document.getElementById('receiptTable').getElementsByTagName('tr')].map(row => {
let orderItemIdValue = row.getElementsByClassName('orderItemIDValue')[0].value;
let qtyFulfill = row.getElementsByClassName('qtyFulfill')[0].value;
return {
orderItemIdValue,
qtyFulfill
};
});
you could use jQuery like this:
<script>
jQuery(document).ready(function($)
{
var inputValues = [];
$('input').each(function(i, v)
{
inputValues.push($(this).val())
})
})
</script>
this loops through all the inputs and adds the value to an array called inputValues
Use qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get() It will return all the relevant fiels.
$("button").click(function() {
var orderItemIDValue = [];
var qtyFulfill = [];
orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
console.log(orderItemIDValue)
console.log(qtyFulfill)
})
Demo
$("button").click(function() {
var orderItemIDValue = [];
var qtyFulfill = [];
orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
console.log(orderItemIDValue)
console.log(qtyFulfill)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="receiptTable" class="table table-bordered">
<thead>
<th class="hidden">
<label>Order Item ID</label>
</th>
<th class="col-md-3">
<label>Item</label>
</th>
<th class="col-md-2">
<label>UOM</label>
</th>
<th class="col-md-2">
<label>Qty</label>
</th>
</thead>
<tbody>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="something">
</td>
<td class="col-md-3">
<p>
</p>
</td>
<td class="col-md-2" hidden>
<p>
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="0" required>
</td>
</tr> <tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="123">
</td>
<td class="col-md-3">
<p>
</p>
</td>
<td class="col-md-2" hidden>
<p>
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="3" required>
</td>
</tr>
</tbody>
</table>
<button>getdata</button>
You can try this Js code:
function getInputValues(){
var orderItemIDValueInputs = document.querySelectorAll('.orderItemIDValue');
var qtyFulfilledInputs = document.querySelectorAll('.qtyFulfilled');
var store = [];
orderItemIDValueInputs.forEach(function(input){
var value = input.value;
store.push(value);
});
qtyFulfilledInputs.forEach(function(input){
var value = input.value;
store.push(value);
});
return store;
}
Checkout This Demo.
$(document).ready(function(){
$('.tableExample tr').not(':first').each(function() {
var val = $(this).find(".orderItemIDValue").val();
alert(val);
});
})
.tableExample {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.tableExample thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.tableExample tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableExample">
<thead>
<tr>
<th>Name</th>
<th>Input</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
<p>Test 1</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="1">
</td>
</tr>
<tr>
<td class="col-md-3">
<p>Test 2</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="2">
</td>
</tr>
<tr>
<td class="col-md-3">
<p>Test 3</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="3">
</td>
</tr>
</tbody>
</table>

how to get value from dynamic radiobutton in datatables

i want ask somethink after i get some problem in my code.
so.. first i'm making a survey with input radiobutton in datatables down there is the code
EDIT
$(document).ready(function() {
$('#example').DataTable({
"paging": true,
"searching": false,
"bInfo": false,
"bLengthChange": false,
"pageLength": 2
});
// $('#save').click(function(){
// var radioValue = $(".circle:checked").val();
// // if(radioValue){
// // alert("Your are a - " + radioValue);
// // }
// console.log(radioValue)
// });
$('#save').click(function() {
var the_value;
//the_value = jQuery('input:radio:checked').val();
//the_value = jQuery('input[name=macro]:radio:checked').val();
the_value = getChecklistItems();
alert(the_value);
});
function getChecklistItems() {
var result =
$("tr.checklisttr > td > input:radio:checked").get();
console.log(result)
var columns = $.map(result, function(element) {
return $(element).attr("id");
});
return columns.join("|");
}
} );
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.10.12" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="datatables#1.10.12" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<style>
.circle{
color:blue;
}
</style>
<form action="" name="quiz" id="quiz_form" method="post">
<table id="example" class="table table-bordered">
<thead style="font-size:20px">
<tr>
<th rowspan="2">Nomor</th>
<th colspan="4"><center>Test</center></th>
</tr>
<tr>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<tbody style="font-size:18px">
<tr class="checklisttr" id="1">
<td align="left" width="40%"><br>
<label for="veryiii" style="align:left;">1</label>
</td>
<td align="center" width="12%">
<input type="radio" id="vii1" name="om" value="4.5" class="circle">Good
</td>
<td align="center" width="12%">
<input type="radio" id="veryiii1" name="om" value="3.0" class="circle"> Noermal
</td>
<td align="center" width="12%">
<input type="radio" id="viv1" name="om" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%">
<input type="radio" id="veryv1" name="om" value="1.0" class="circle">Verry Bad
</td>
</tr>
<tr class="checklisttr" id="2">
<td align="left" width="40%">
<label for="veryiii" style="align:left;">2</label>
</td>
<td align="center" width="12%"><br>
<input type="radio" id="vii1" name="om1" value="4.5" class="circle">Good
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryiii1" name="om1" value="3.0" class="circle">Normal
</td>
<td align="center" width="12%"><br>
<input type="radio" id="viv1" name="om1" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryv1" name="om1" value="1.0" class="circle">Very Bad
</td>
</tr>
<tr class="checklisttr" id="3">
<td align="left" width="40%">
<label for="veryiii" style="align:left;">3</label>
</td>
<td align="center" width="12%"><br>
<input type="radio" id="vii1" name="om2" value="4.5" class="circle">Good
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryiii1" name="om2" value="3.0" class="circle"> Normal
</td>
<td align="center" width="12%"><br>
<input type="radio" id="viv1" name="om2" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryv1" name="om2" value="1.0" class="circle">Very Bad
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<button type="submit" id="save" class="btn btn-warning"><i class="icon-pencil5"></i> Done</button>
</div>
</form>
</body>
</html>
if you trying to answear the questions and click done why the answear just show the last data?
i just want to get all value and why if i go to next page for answear the next question and i submit form why he not show all the value, so how to get all data after answear all the question?? thanks

Checkboxlist check uncheck not working in javascript

I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.
Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})
Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>

Categories