0
306
VistasHow to get input values in Jquery Array on click submit where quantity is not empty
My table is Here:
<div id="MyItems">
<table>
<thead>
<tr>Quantity</tr>
<tr>Items</tr>
<tr>Cost</tr>
<tr>Totals</tr>
</thead>
<tbody id="AllItems">
<tr class="trbody">
<td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
<td class="items">Test Item 1</td>
<td class="price">$<span class="price-given">1349</span></td>
<td class="total">$<span class="amount">0.00</span></td>
</tr>
<tr class="trbody">
<td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
<td class="items">Test Item 2</td>
<td class="price">$<span class="price-given">854</span></td>
<td class="total">$<span class="amount">0.00</span></td>
</tr>
</tbody>
</table>
</div>This is my js code which is triggered after button click. I am retrieving the values of all inputs in an array but stuck how to move forward.
jQuery('#form_event').click(function (e) {
e.preventDefault();
jQuery('.loader').css('display', 'block');
var id = jQuery('#getitemid').val();
var totalAmount = jQuery('#TotalAmount').text();
var ItemArray = [];
$('#getprices tbody tr').each(function () {
$(".quantity").each(function() {
if( $(this).val() !== 0) {
ItemArray[$(this).attr("quantity")] = $(this).val();
}
});
$(".price").each(function() {
ItemArray[$(this).attr("price")] = $(this).val();
});
});
});
The image of table is given below. Now What I want is to get value of all inputs in an array when I click to submit button. Only the quantity more than 0 should be added.
Thanks in advance.
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
first give id to your table.
<div id="MyItems">
<table id="table">
<thead>
<tr>Quantity</tr>
<tr>Items</tr>
<tr>Cost</tr>
<tr>Totals</tr>
</thead>
<tbody id="AllItems">
<tr class="trbody">
<td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
<td class="items">Test Item 1</td>
<td class="price">$<span class="price-given">1349</span></td>
<td class="total">$<span class="amount">0.00</span></td>
</tr>
<tr class="trbody">
<td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
<td class="items">Test Item 2</td>
<td class="price">$<span class="price-given">854</span></td>
<td class="total">$<span class="amount">0.00</span></td>
</tr>
</tbody>
</table> </div>
here's button function
$("#Button").click(function (){
var myTable= document.getElementById('table');
var dataArr = []
$("#myTable tbody tr").each(function (a, b) {
let qty= $(this).find('td').eq(0).find('input').val()
let item = $(this).find("td:nth-child(2)").text();
let cost = $(this).find("td:nth-child(3)").text();
let total = $(this).find("td:nth-child(4)").text();
if (qty !=0){
dataArr.push({qty: qty, item:item, cost:cost, total:total})
}
console.log(dataArr)
}
})
·
Juan Pablo Isaza
Denunciar
0
Be careful of each individual quantity.
function totalAmount() {
const quantities = document.getElementsByName('quantity');
let totalAmount = 0;
for (let i = 0; i < quantities.length; i++) {
if (quantities[i].value > 0) {
for (let j = 0; j < parseInt(quantities[i].value); j++) {
totalAmount += parseInt(quantities[i].parentElement.nextElementSibling.nextElementSibling.children[0].innerHTML);
}
}
}
console.log(totalAmount);
}
·
Juan Pablo Isaza
Denunciar
0
Use jQuery map
$("#yourSubmitButton").click(function (){
let quantity = $('.quantity').map((_,el) => el.value > 0 ? el.value : null).get();
console.log(quantity)
})<div id="MyItems">
<table>
<thead>
<tr>Quantity</tr>
<tr>Items</tr>
<tr>Cost</tr>
<tr>Totals</tr>
</thead>
<tbody id="AllItems">
<tr class="trbody">
<td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
<td class="items">Test Item 1</td>
<td class="price">$<span class="price-given">1349</span></td>
<td class="total">$<span class="amount">0.00</span></td>
</tr>
<tr class="trbody">
<td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
<td class="items">Test Item 2</td>
<td class="price">$<span class="price-given">854</span></td>
<td class="total">$<span class="amount">0.00</span></td>
</tr>
</tbody>
<button id="yourSubmitButton">Button</button>
</table>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta