The click event won't trigger - javascript

On the table I created, there is an anchor tag embedded with a cross icon and I want to assign an event to it, however when I click it nothing happen.
I have tried various way including $(".remove1"), $("#productTable tbody tr td a"),...
Then I try to debug in chrome by setting up breakpoint but it just won't go into the function.
the table
<table class="table" id="productTable">
<thead class="thead-primary">
<tr class="text-center">
<th> </th>
<th> </th>
<th>Product name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td class="product-remove"><span><i class="ion-ios-close remove1"></i></span></td>
<td class="image-prod">
<div class="img" style="background-image:url(images/beef.jpg);"></div>
</td>
<td class="product-name">
<h3>Beef Noodles Soup</h3>
</td>
<td class="price">RM12.00</td>
<td class="quantity">
<div class="input-group mb-3">
<button class="quantity-left-minus">-</button>
<input type="text" name="quantity" class="quantity form-control input-number" value="2" min="1" max="100">
<button class="quantity-right-plus">+</button>
</div>
</td>
<td class="total">RM24.00</td>
</tr>
<tr class="text-center">
<td class="product-remove"><span><i class="ion-ios-close remove1"></i></span></td>
<td class="image-prod">
<div class="img" style="background-image:url(images/dumpling.jfif);"></div>
</td>
<td class="product-name">
<h3>Dumpling</h3>
</td>
<td class="price">RM5.00</td>
<td class="quantity">
<div class="input-group mb-3">
<button class="quantity-left-minus">-</button>
<input type="text" name="quantity" class="quantity form-control input-number" value="1" min="1" max="100">
<button class="quantity-right-plus">+</button>
</div>
</td>
<td class="total">RM5.00</td>
</tr>
</tbody>
</table>
jquery
$(function() {
$(".product-remove a").on("click", function() {
console.log("test");
});
});
when i click on the a nothing written out in console, please help.

Plain JS:
const icons = document.querySelectorAll('.product-remove a');
icons.forEach(element => {
element.addEventListener("click", function(e){
e.preventDefault();
console.log("yeah");
})
});
You need to give the anchor tag some sort of clickable area though:
.product-remove a{
display: block;
padding: 8px;
background: goldenrod;
}

Related

Submit all data from DataTable table with checkboxes using jQuery

So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>
I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

How to add pagination to the rows of a table

Let's say I have a table with some rows. I would like to have a page for each row.
Every time I select a row and press the Show selected button, the row is appended to the table, if I select 40 rows, 40 rows will be appended to the table, but what I want is that 40 pages are created and each page has one table with only one row.
JSFiddle Demo
Current result:
Desired result:
I am confused, how can I assign a href ="#" to a row in a table?
If I am not mistaken I have to do something like this (Bootsrap 4.0 documentation):
One way would be when you append rows inside your table show only first tr and hide others and when user click on any page number you can show that row and hide other .
Demo Code :
$(function() {
$("button#show-selected ,button#select-all").click(function() {
show_All();
});
function show_All() {
var html = "";
var html1 = "";
var buttons = "<button type='button' class='btn prev'> Prev </button>"
$("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) {
var selector = $(this).closest("tr") //get closest tr
//generate htmls
html1 += `<tr>
<td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td>
</tr>`
html += `<tr>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(4)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(5)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(6)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(7)").text().trim()}" readonly/></td>
</tr>`
buttons += `<button type="button" data-id="${index}" class="btn indexs">${index + 1 }</button>`
});
buttons += `<button type="button" class="btn next">Next</button>`
$("#secondTable1").html(html1)
$("#secondTable2").html(html)
$("#pagination").html(buttons)
$("#pagination button:eq(1)").addClass("btn-primary")
$("#secondTable1 tr , #secondTable2 tr").hide() //hide trs
$("#secondTable1 tr:eq(0) , #secondTable2 tr:eq(0)").show() //show only first one
}
});
//this code will get called when number(1,2,.) is clicked not for next/prev btn you need to write logic for next/prev button .
$("#pagination").on("click", ".indexs", function() {
$(this).addClass("btn-primary").siblings().removeClass("btn-primary") //add class
var data_id = $(this).data("id") //get index
$("#secondTable1 tr , #secondTable2 tr").hide() //hide all tr
$("#secondTable1 tr:eq(" + data_id + ") , #secondTable2 tr:eq(" + data_id + ")").show() //show tr where index matches..
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<div class="container">
<div class="row" id="searchVariantTable">
<div class="col">
<table class="table table-hover mt-5">
<thead class="variants-table-thead">
<tr>
<th class="active">
<input type="checkbox" class="select-all checkbox" name="select-all" />
</th>
<th>Gene</th>
<th>Variant</th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<!--The <tr> are populated dynamically after form submit, I just added some dummy values.
BACKEND: (Python-Django) -->
<tbody class="variants-table-tbody">
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene1</td>
<td class="warning">Variant1</td>
<td style="display: none;"> #1 value1</td>
<td style="display: none;"> #2 value1</td>
<td style="display: none;"> #3 value1</td>
<td style="display: none;"> #4 value1</td>
<td style="display: none;"> #5 value1</td>
</tr>
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene2</td>
<td class="warning">Variant2</td>
<td style="display: none;"> #1 value2</td>
<td style="display: none;"> #2 value2</td>
<td style="display: none;"> #3 value2</td>
<td style="display: none;"> #4 value2</td>
<td style="display: none;"> #5 value2</td>
</tr>
</tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button id="show-selected" class="btn btn-primary">Show selected</button>
</div>
</div>
<div class="row">
<div class="col-6">
<table class="table mt-5">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Gene</th>
<th style="text-align:center;">Variant</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable1">
<!--data will come here -->
</tbody>
</table>
</div>
<div class="col-6">
<div style="text-align: center;">
<h5>Genomic coordinate</h5>
</div>
<table class="table mt-4">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Opt #1</th>
<th style="text-align:center;">Opt #2</th>
<th style="text-align:center;">Opt #3</th>
<th style="text-align:center;">Opt #4</th>
<th style="text-align:center;">Opt #5</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable2">
<!--data will come here -->
</tbody>
</table>
</div>
</div>
</div>
<div id="pagination"></div>

How to display datetimepicker outside of scrollbar

I have a long table that needs to be displayed inside a small area so I'm using overflow-x: scroll; to make a horizontal scrollbar under the table.
Inside the table, I have a few input fields with datetimepicker.
My problem is when I click on the input field to show the datatimepicker, it makes a vertical scrollbar and displays inside these 2 scrollbars.
jQuery('#birthday1').datetimepicker({
format: "DD/MM/YYYY"
});
jQuery('#birthday2').datetimepicker({
format: "DD/MM/YYYY"
});
jQuery('#birthday3').datetimepicker({
format: "DD/MM/YYYY"
});
.overflow-x-scroll {
overflow-x: auto !important;
}
.overflow-x-visible {
overflow-x: visible !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-form-label" for="comp">Table
</label>
<div style="width: 600px; height:600px;
background-color: #cccccc;">
<div class="overflow-x-scroll">
<table width="1000px" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td>Field Text</td>
<td>Field Text</td>
<td>Field Text</td>
<td>Field Date</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td>
<div style="position:relative">
<input type="text" placeholder="Birthday" name="birthday" id="birthday1" class="form-control ">
</div>
</td>
</tr>
<tr class="head">
<td>Field Text</td>
<td>Field Text</td>
<td>Field Text</td>
<td>Field Date</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td>
<div style="position:relative">
<input type="text" placeholder="Birthday" name="birthday" id="birthday2" class="form-control ">
</div>
</td>
</tr>
</table>
</div>
<br/>
<br/>
<br/>
<div class="overflow-x-visible">
<table width="1000px" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td>Field Text</td>
<td>Field Text</td>
<td>Field Text</td>
<td>Field Date</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td>
<div style="position:relative">
<input type="text" placeholder="Birthday" name="birthday" id="birthday3" class="form-control ">
</div>
</td>
</tr>
</table>
</div>
</div>
JSfiddle: https://jsfiddle.net/tunn58/hda1uxne/3/
Is there any way to display the datetimepicker outside the horizontal scrollbar and without the vertical scrollbar like when using overflow-x: visible;? Or is there any other way to handle a long table with datetime input field?
I'm trying to change the overflow-x to hidden when the datetimepicker is showing and change it back to scroll when the datetimepicker is hiding, but some input fields are at the end of the table so I can't do that.

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>

Do SUM of Dynamic row added by innerHTML method through javascript

I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!

Categories