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);
});
Related
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));
});
I have input form html is below,
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">
Here each group contains three fields(.featurecat-item, .featurecat-label, .featurecat-isactive) class where each group data-id is same.
Using the jquery function(on change/paste/keyup) I need to get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is same as the currently focused field data-id.
Following is my sample and not-complete jquery function,
$(document).ready(function(){
$(".featurecat").on("change paste keyup", function() {
//.........
// var current_id = Current focused field data-id
// Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
//.........
var item = $('.featurecat-item').val().replace(/,/g, "");
var label = $('.featurecat-label').val().replace(/,/g, "");
var isactive = ($(".featurecat-isactive").prop('checked') == true) ? 1 : 0;
var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
console.log(data);
});
});
How can I do this using in jQuery?
To get data attribute use .data('id') or .attr('data-id')
To select element with this data attribute use [data-id="...."] selector
Also to check for :checked you can use .is(':checked')
$(document).ready(function(){
$(".featurecat").on("change paste keyup", function() {
//.........
// var current_id = Current focused field data-id
// Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
//.........
var ThisInput = $(this);
var data_id = ThisInput.data('id');
var item = $('.featurecat-item[data-id="'+data_id +'"]').val();//.replace(/,/g, "");
var label = $('.featurecat-label[data-id="'+data_id +'"]').val();//.replace(/,/g, "");
var isactive = ($('.featurecat-isactive[data-id="'+data_id+'"]').is(':checked')) ? 1 : 0;
var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
console.log(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">
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'm stuck on part of my project where user should just keep filling the form and new lines should be added automatically when user focused on last input in the form. I'm not forged in JS/jQ so maybe one of you could help me... It is working but still just from the 1st line, not from the duplicated ones. Thanks is advance
<form class="form-inline" method="post" action="loadin.php">
<!-- form header -->
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
<?php
foreach($vendors_ as $v){
echo"<option value='".$v['ID']."'>".ucfirst($v['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="<?php echo date("Y-m-d") ?>">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<!-- form lines -->
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
<?php
foreach($types_ as $t){
echo"<option value='".$t['ID']."'>".ucfirst($t['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
$(".duplicate:last input").focus(function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function(){
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
As last element is being changed every time new elements are appended, listen the event on the parent body or any other fixed parent.
var count = 0;
$('body').on('focus', ".duplicate:last input", function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function() {
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline" method="post" action="loadin.php">
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
Fiddle Demo
You must define your focus event as bellow:
$('body').on('focus', ".duplicate:last input", function() {
// codes here
}