I have below HTML for table row, each row getting added with form-repeater, so it will append [0], [1] on each row input name attributes,
Now I have on more input with read-only billitem_total, where I need multiplication of billitem_quntity and billitem_rate
<tr data-repeater-item="" name="line_items" style="">
<td>
<a href="javascript:;" data-repeater-delete="" class="btn btn-sm font-weight-bolder btn-light-
danger"><i class="la la-trash-o"></i></a>
</td>
<td>
<input type="text" name="[0][billitem_quantity]" class="form-control"
placeholder="Quantity" value="12">
</td>
<td>
<input type="text" name="[0][billitem_rate]" class="form-control"
placeholder="Rate" value="5">
</td>
<td>
<input readonly="" type="text" name="[0][billitem_total]" id="billitem_total" class="form-
control" style="border: 0;" value="" placeholder="Item name">
</td>
</tr>
How can I do multiplication with help of Jquery for each repeating rows?
Thank you :-)
if your data is dynamic means your row will repeat then instead of giving Id's to the inputs give class to the inputs.
<input type="text" name="[0][billitem_quantity]" class="form-control billitem-quantity" placeholder="Quantity" value="12">
<input type="text" name="[0][billitem_rate]" class="form-control billitem-rate" placeholder="Rate" value="5">
<input readonly="" type="text" name="[0][billitem_total]" class="form-control billitem-total" style="border: 0;" value="" placeholder="Item name">
You can chose your event according to your requirement. But keyup will be the better option according to me in your case
$('.billitem-quantity, .billitem-rate').on('keyup', function() {
const quantity = $(this).closest('tr').find('.billitem-quantity')first().val();
const rate = $(this).closest('tr').find('.billitem-rate').first().val();
// Assign the total to the total
$(this).closest('tr').find('.billitem-total').first().val(parseFloat(quantity) * parseFloat(rate));
});
Related
A user has the capacity to add as many items as possible through html inputs. The inputs look like;
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
I would like to add the items to my database for storage.. How do i iternate through each input? part number and description belong to a single row.
function getdata() {
var partNumbers = [];
var descriptions = [];
$('[name="part_number[]"]').each(function() {
partNumbers.push(this.value);
})
$('[name="description[]"]').each(function() {
descriptions.push(this.value);
})
var data = {
partNumbers: partNumbers,
descriptions: descriptions
}
$('#output').val(JSON.stringify(data))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" type="text" value="part number 1">
<input class="form-control" name="part_number[]" type="text" value="part number 2">
<input class="form-control" name="part_number[]" type="text" value="part number 3">
<br>
<input class="form-control item" name="description[]" type="text" value="description 1">
<input class="form-control item" name="description[]" type="text" value="description 2">
<input class="form-control item" name="description[]" type="text" value="description 3">
<hr>
<button type="button" onclick="getdata()">get data</button>
<textarea id="output" rows="10" cols="100" placeholder="output"></textarea>
If your inputs are within a form, you can use .serializeArray() and then .reduce() it to create an object which stores keys and array values for multiple input types like below. You can then submit this data to your server to then store in your database:
const data = $("#myform").serializeArray().reduce((acc, o) => {
if (o.name.slice(-2) === "[]") {
acc[o.name] = acc[o.name] || [];
acc[o.name].push(o.value);
} else {
acc[o.name] = o.value;
}
return acc;
}, {});
console.log(data); // data to POST
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input class="form-control" name="part_number[]" value="pn1" type="text">
<input class="form-control" name="part_number[]" value="pn2" type="text">
<input class="form-control" name="part_number[]" value="pn3" type="text">
<input class="form-control item" name="description[]" value="desc1" type="text">
<input class="form-control item" name="description[]" value="desc2" type="text">
<input class="form-control item" name="description[]" value="desc3" type="text">
<input class="form-control item" name="single_data" value="non-array data" type="text">
</form>
From your question, I understand that you want the description and part number in a row.
Please find my answer using .each function of jQuery.
The .each() function iterates through all the specified elements and it returns the index position of each element. Here I'm iterating through the part number, so I want to take the corresponding description, that is the description at the index position of part_number. To achieve this am using another jQuery selector :eq(). It will select the element at index n within the matched set.
$(".submit").on("click", function(){
let user_input = [];
$("input[name='part_number[]']").each(function(index){
user_input.push({
part_number: $(this).val(),
description: $(`.item:eq(${index})`).val()
});
});
console.log("final result = ", user_input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<button type="submit" class="submit"> Save</button>
I would rather fix the HTML than trying to fix the data afterwards.
You have items with the values descriptionand part_number, in order to group the data i would firstly group them visually in your HTML by adding a wrapper around each part_number + description pair:
<div class="item">
<input type="text" name="part_number[]" />
<input type="text" name="decription[]" />
</div>
After that we fix the input names' and add them to a group item:
<div class="item">
<input type="text" name="item[part_number]" />
<input type="text" name="item[decription]" />
</div>
To add multiple item elements in your form you need to add an ID to each item when adding it to your form:
<div class="item">
<input type="text" name="item[0][part_number]" />
<input type="text" name="item[0][decription]" />
</div>
<div class="item">
<input type="text" name="item[1][part_number]" />
<input type="text" name="item[1][decription]" />
</div>
When adding these values to your database you can then iterate over them like so: ( I'm just guessing you will use PHP)
foreach( $_POST['item'] as $item) {
$item['part_number'];
$item['description];
}
order pageI have created one IMS. In that, on order page, I have to validate the product quantity that it should not allow entering more than the available quantity. Below is my code (qty[] is the available quantity in stock and aqty[] is quantity entered while creating the order)
<tr id="row_1">
<td>
<select class="form-control select_group product" data-row-id="row_1" id="product_1" name="product[]" style="width:100%;" onchange="getProductData(1)" required>
<option value=""></option>
<?php foreach ($products as $k => $v): ?>
<option value="<?php echo $v['id'] ?>"><?php echo $v['name'] ?></option>
<?php endforeach ?>
</select>
</td>
<td>
<input type="text" name="hsn[]" id="hsn_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="hsn_value[]" id="hsn_value_1" class="form-control" autocomplete="off">
</td>
<td><input type="text" name="rate[]" id="rate_1" class="form-control" required onkeyup="getTotal(1)"></td>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="qty_value[]" id="qty_value_1" class="form-control" autocomplete="off">
</td>
<td><input type="text" name="aqty[]" id="aqty_1" class="form-control" required onkeyup="getTotal(1)"></td>
<td>
<input type="text" name="unit[]" id="unit_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="unit_value[]" id="unit_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="amount_value[]" id="amount_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="gst[]" id="gst_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="gst_value[]" id="gst_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="gst_amount[]" id="gst_amount_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="gst_amount_value[]" id="gst_amount_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="last_amount[]" id="last_amount_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="last_amount_value[]" id="last_amount_value_1" class="form-control" autocomplete="off">
</td>
<td><button type="button" class="btn btn-default" onclick="removeRow('1')"><i class="fa fa-close"></i></button></td>
</tr>
This is how i am comparing two fields value
$('#qty_value_1,#aqty_1').on('keyup', function() {
var btn = $('button:contains("Submit")');
if (parseFloat($('#qty_value_1').val()) >= parseFloat($('#aqty_1').val())) {
btn.prop('disabled', false);
} else {
btn.prop('disabled', true);
}
})
Above validation is only working for first product if i enter second product or more this logic is not working
The following code captures the change event of the aqty input. When the value is changed it iterates through all rows and checks if any of the values are greater than the available quantity for that row. if it is then the button is disabled.
I've used the attribute equals selector to select the inputs. You can also make use of class names to simplify the selection. e.g. qty can have class qty and aqty can be aqty. You then select the inputs in jquery by ".qty" and ".aqty"
function updateSubmitStatus() {
var submitDisabled = false;
// iterate through inputs
$("[name='aqty[]']").each(function(a) {
var available = parseFloat($(this).closest("tr").find("[name='qty[]']").val()); // find available quantity for the row
var ordered = parseFloat($(this).val());
if (isNaN(ordered)) {
ordered = 0; // invalid number. reset to zero.
$(this).val(ordered)
}
if (available < ordered) {
submitDisabled = true;
return false; // submit disabled. break out of loop.
}
});
$("button:contains('Submit')").prop('disabled', submitDisabled);
}
$("[name='aqty[]']").change(updateSubmitStatus);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off" value="5">
<input type="hidden" name="qty_value[]" id="qty_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="aqty[]" id="aqty_1" class="form-control" required>
</td>
</tr>
<tr>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off" value="10">
<input type="hidden" name="qty_value[]" id="qty_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="aqty[]" id="aqty_1" class="form-control" required>
</td>
</tr>
</table>
<button>Submit</button>
I played a little with your code…
Using classes instead of ids to simplify,
Using unary + operator instead of parseFloat,
Changed code to make it work for any tr.
… and ended-up with that working snippet:
(I've removed the hidden to be able to play with the values)
// Changed ids to classes
$('.qty, .aqty').on('keyup', function() {
var btn = $('button:contains("Submit")');
// Get tr elements
var trs = $(this).closest('table').find('tbody tr');
$(trs).each(function(i, elm) {
var qty = $(elm).find('.qty');
var aqty = $(elm).find('.aqty');
btn.prop('disabled', false); // Enabled by default
if (+$(qty).val() < +$(aqty).val()) { // Using Unary +
btn.prop('disabled', true); // Disabled if qty < aqty
return; // Exit
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>qty</th>
<th>aqty</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off">
<input name="qty_value[]" class="qty form-control" autocomplete="off">
</td>
<td><input type="text" name="aqty[]" class="aqty form-control" required></td>
</tr>
<tr>
<td>
<input type="text" name="qty[]" id="qty_2" class="form-control" disabled autocomplete="off">
<input name="qty_value[]" class="qty form-control" autocomplete="off">
</td>
<td><input type="text" name="aqty[]" class="aqty form-control" required></td>
</tr>
</table>
<button disabled>Submit</button>
Feel free to comment me for anything.
Hope it helps!
From the following code I have to find the following details
Find the first td
Find the f01 name id and its value e.g apex_date_01_00,null
Find the f30 name id and its value e.g id30_14,2
And this should be repeat for the all the tds which headers="ATTR_VALUE"
Code
<html>
<body>
<table summary="Attribute Details">
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_14"><span style="white-space: nowrap;"> <input type="text" style="width:100px" id="apex_date_01_00" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"> </span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L1"> <input type="hidden" name="f10" value="D_ATTRIBUTE7"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="2" id="id30_14"> </td>
</tr>
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_17"><span style="white-space: nowrap;"> <input type="text" style="width: 100px;" id="apex_date_01_03" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"></span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L2"> <input type="hidden" name="f10" value="D_ATTRIBUTE8"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="2" id="id30_17"> </td>
</tr>
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_20"><span style="white-space: nowrap;"> <input type="text" style="width:100px" id="apex_date_01_06" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"></span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L3"> <input type="hidden" name="f10" value="D_ATTRIBUTE9"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="1" id="id30_20"> </td>
</tr>
</table>
</body>
</html>
You need to loop over each td with headers 'ATTR_VALUE'
$('td[headers="ATTR_VALUE"]').each(function(){
//find input with name=f01
var f01id = $(this).find('input[name="f01"]').attr('id');
var f01value = $(this).find('input[name="f01"]').val();
//find input with name=f30
var f30id = $(this).find('input[name="f30"]').attr('id');
var f30value = $(this).find('input[name="f30"]').val();
});
Try this code
$('td[headers="ATTR_VALUE"]').each(function(){
$('input').each(function(){
if($(this).attr('name')=="f01" || $(this).attr('name')=="f30"){
alert($(this).attr('id')+','+$(this).val());
}
})
})
Find first td element:
document.querySelector('td')
find All 'td' of table:
var arr = document.querySelectorAll('td')
$.each(arr,function(i,data){
var f01id = $(this).find('input[name="f01"]').attr('id');
var f01value = $(this).find('input[name="f01"]').val();
//find input with name=f30
var f30id = $(this).find('input[name="f30"]').attr('id');
var f30value = $(this).find('input[name="f30"]').val();
console.log(f01id)
console.log(f01value)
console.log(f30id)
console.log(f30value)
})
i need to add a ajax data in to input fields with same id.
new rows can be added by clicking add row button. all rows generated with same ids and classes. i'm trying to add ajax data in to text fields in change of first select box on each row. how do i set data only for the changed row.
Dynamic form
<tr>
<td>
<select class="form-control itemId" id="itemId" required="required" name="item_id[]">
<option value="" selected="selected">Select an item</option><option value="1">Toyota Front Buffer</option>
<option value="2">Mitsubishi Lancer Right Door</option>
</select>
</td>
<td>
<input class="form-control item_description" id="item_description" placeholder="Not Required | Optional" name="item_description[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Units" id="units" required="required" name="units[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Rate" id="rate" required="required" name="rate[]" type="text">
</td>
<td>
<input class="form-control" id="amount" placeholder="Add Hrs and Rate" name="amount[]" type="text">
</td>
</tr>
<tr>
<td>
<select class="form-control itemId" id="itemId" required="required" name="item_id[]">
<option value="" selected="selected">Select an item</option><option value="1">Toyota Front Buffer</option>
<option value="2">Mitsubishi Lancer Right Door</option>
</select>
</td>
<td>
<input class="form-control item_description" id="item_description" placeholder="Not Required | Optional" name="item_description[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Units" id="units" required="required" name="units[]" type="text">
</td>
<td>
<input class="form-control" placeholder="Add Rate" id="rate" required="required" name="rate[]" type="text">
</td>
<td>
<input class="form-control" id="amount" placeholder="Add Hrs and Rate" name="amount[]" type="text">
</td>
</tr>
Ajax code
$("#dynamic-tbl").on('change', 'select', function(e){
var item_id = e.target.value;
var self = this;
$.get('/ajax-item?item_id=' + item_id, function(data){
$.each(data, function(index, itemObj){
$(this).closest('#item_description').val(itemObj.name);
$(this).closest('#rate').val(itemObj.sale_price);
});
});
});
Try this.,
$.each(data, function(index, itemObj){
$(self) // use self not this
.closest('tr') // get the parent(closest) tr
.find('input[name="item_description[]"]')// now find the item_description by name as id must be unique
.val(itemObj.name);
$(self)
.closest('tr')
.find('input[name="rate[]"]')
.val(itemObj.sale_price);
});
I'm building an interface that will calculate a total (based on neighboring inputs) when an input is checked. When an input is checked, I'm getting the values of the other inputs in the same <td> and then building a grand total.
Example: http://jsfiddle.net/vdunm/1/
I need to build a summary of totals (grouped by name) for all checkboxes that are checked and I just can't seem to find the right path on how to do it.
So if you were to check the first 3 rows (2 foos and 1 bar) I would want the output to look something like this:
FOO: 100
BAR: 30
Here's my HTML:
<table id="test">
<tr>
<td>
<input type="checkbox" name="id" size="20" value="100" />
<input type="text" name="name" size="20" value="FOO" />
<input type="text" name="cost" size="20" value="10.00">
<input type="text" name="quantity" size="20" value="1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="id" size="20" value="200" />
<input type="text" name="name" size="20" value="BAR" />
<input type="text" name="cost" size="20" value="10.00">
<input type="text" name="quantity" size="20" value="3">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="id" size="20" value="300" />
<input type="text" name="name" size="20" value="FOO" />
<input type="text" name="cost" size="20" value="10.00">
<input type="text" name="quantity" size="20" value="9">
</td>
</tr>
</table>
jQuery:
// when the id checkbox is clicked
$('table').delegate('input[name=id]', 'click', function(){
// set the total at 0
var totalCost = 0;
// loop through each checked line
$('input[name=id]:checked').each(function(){
// get the input values for this checked row
var thisRow = $(this).parent(),
person = thisRow.find('input[name=name]').val(),
qty = thisRow.find('input[name=quantity]').val(),
cost = thisRow.find('input[name=cost]').val();
// get total
var lineCost = cost * qty;
// add to the grand total
totalCost+=parseFloat(lineCost);
});
// output the total cost
$('#output').empty().append(totalCost);
});
Should I be building an array or an object? I basically just need to get all names that have been checked, and show a grand total for each. I just need a point in the right direction.
How about something like this?
http://jsfiddle.net/vdunm/2/
It basically just builds an object with the individually grouped totals.
You should be building an object, as long as there's no real sorting required.
Right after your totals you can have these lines:
totalCost += parseFloat(lineCost);
if(totals[person] == null) {
totals[person] = 0;
}
totals[person] += totalCost;
You would also need to define:
var totals = {};
That would go above your loop.