I'm trying to get the price of a product in one field when the name of the product is selected in another field for a simple POS. It works well for the first time but when I add another table row for next product, I don't get the price. Pls help
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_1" class="form-control itemNo" contenteditable="true"></td>
<td><input type="text" data-type="productName" name="itemName[]" id="itemName_1" class="form-control search_canteen_prod chk_product for_Price" autocomplete="off"></td>
<td><input type="number" name="price[]" id="price_1" readonly class="form-control changesNo price for_Price New_price" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo quantity" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="text" name="total[]" readonly id="total_1" class="form-control totalLinePrice totalPrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
</tr>
</tbody>
Adding another row dynamically
var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><input type= data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt itemNo" contenteditable="true"></td>';
html += '<td><input type="text" data-type="productName" name="itemName[]" id="itemName_'+i+'" class="form-control search_canteen_prod chk_product for_Price" autocomplete="off"></td>';
html += '<td><input type="number" name="price[]" id="price_'+i+'" class="form-control changesNo price New_price for_Price" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly></td>';
html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo quantity" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice totalPrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly></td>';
html += '</tr> <script>$( ".search_canteen_prod" ).autocomplete({source: "canteen/search_for_product.php"});</script>';
$('table').append(html);
i++;
});
Getting the price based on the autocomplete select
//get product prices
$('.chk_product').on('change, keyup, blur', function() {
iid_arr = $('.chk_product').attr('id');
iid = iid_arr.split("_");
var prodd_name = $('.chk_product').val();
$.ajax({
url:"canteen/select_for_canteen_sales.php",
method: "POST",
data:{prodd_name: prodd_name},
dataType: "JSON",
success:function(data)
{
$('#price_'+iid[1]).val(data.selling_price);
} }); });
fetching the price for
if(isset($_POST["prodd_name"]))
{
$prod_nm = $_POST["prodd_name"];
$query_product = "SELECT * FROM canteen_product WHERE product_name = '". $prod_nm."' AND qty > 0 ORDER BY stock_date DESC";
$result_product = mysqli_query($cnn, $query_product);
while($rrow = mysqli_fetch_array($result_product))
{
$data["selling_price"] = $rrow["selling_prce"];
}
echo json_encode($data);
}
Firstly:
If you use table length only after you add the next table row to generate i, it will be 1 for the very next table row you add... becaue you already have one row (with the html ids being like itemNo_1 etc).
Which means that your next-added row will also have the ids ending in 1.
To fix this, you should use i + 1 in your .addmore function to the html-ids of any new table rows. so they start at eg itemNo_2 adn then go up from there.
Secondly:
you can fetch values relative to the current object (accessed using $(this)) - you don't need to fetch them by id.
eg instead of:
$('.chk_product').on('change, keyup, blur', function() {
iid_arr = $('.chk_product').attr('id');
iid = iid_arr.split("_");
var prodd_name = $('.chk_product').val();
try something like:
$('.chk_product').on('change, keyup, blur', function() {
var prodd_name = $(this).val();
for the price - you can likewise do relative tree-traversal... eg if the price is always "up one to the td, then down to the price" you can do something like:
// chk_product-> td -> down to price value
var price = $(this).parent().find(".price").val();
Note: you will need to bug-test this and I recommend looking up the docs for how it works.
Related
I have dynamically created table with <tr> <td> <inputs>, problem is, when I click first <td> input and I click on to the next td input, jquery blur event fires multiple times. Even after using event.stopImmediatePropagation() and event.preventDefault(), I couldn't able to prevent the multiple firing on blur event and also I used flag set to false to prevent the firing, but I couldn't.
Is there any other way to solve this problem?
for(var i=0;i< data.supplierdetails.length;i++){
var j = (Math.floor(Math.random() * 100000000) + 100000000).toString().substring(1);
supplierdetailshtml += '<tr data-id="'+j+'">';
var description = data.supplierdetails[i].description;
supplierdetailshtml+= '<td><input type="text" name="rawproductname[]" id="rawproductname" value ="'+description+'" class="form-control rawproductname" readonly="true"/></td>';
supplierdetailshtml+= '<td><input type="text" name="hsncode[]" id="hsncode" class="form-control hsncode"/></td>';
var quantity = data.supplierdetails[i].quantity;
supplierdetailshtml+= '<td><input type="text" name="rawproductquantity[]" id="rawproductquantity_'+j+'" value ="'+quantity+'" class="form-control rawproductquantity" readonly="true"/></td>';
var unitcode = data.supplierdetails[i].unitcode;
supplierdetailshtml+= '<td><input type="text" name="rawproductunitcode[]" id="rawproductunitcode" value ="'+unitcode+'" class="form-control rawproductunitcode" readonly="true"/></td>';
supplierdetailshtml+='<td><input type="text" name="rawproductrate[]" id="rawproductrate_'+j+'" value="0.00" class="form-control rawproductrate"/></td>';
supplierdetailshtml+='<td><input type="text" name="rawproductprice[]" id="rawproductprice_'+j+'" value="0.00" class="form-control rawproductprice"/></td>';
supplierdetailshtml+= '<td><input type="text" name="rawproductgst[]" id="rawproductgst_'+j+'" value="0.00" class="form-control rawproductgst"/></td></tr>';
}
$(document).on('blur','.rawproductrate',function(event){
debugger;
var tr_id = $(this).closest('tr').data('id');
//alert("Data ID"+tr_id);
var rawproductquantity = $("#rawproductquantity_"+tr_id).val();
//alert("Raw Product Quantity"+rawproductquantity);
var rawproductrate = $("#rawproductrate_"+tr_id).val();
//alert("Raw Product rate"+rawproductrate);
if (rawproductrate==0 || rawproductrate=="") {
alert("Raw Product Rate Cannot be Zero");
}
var rawproductprice = parseFloat(rawproductrate*rawproductquantity).toFixed(2);
if(isNaN(rawproductprice) || rawproductprice==""){
var rawproductprice_decimal = parseFloat(rawproductprice || 0).toFixed(2);
$("#rawproductprice_"+tr_id).val(rawproductprice_decimal);
}
$("#rawproductprice_"+tr_id).val(rawproductprice);
$('.rawproductrate').off('blur');
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})
First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps
I am adding rows using java script functions by taking input and showing data into input text fields.
I am using this datepicker https://github.com/T00rk/bootstrap-material-datetimepicker.
When I input time the only first value of time is copied into input fields while rest two value are copied but time value is not copied.
<div style="width:90%;margin:auto;">
<h1>Simple example of dynamically adding rows with jQuery</h1>
<form method="post">
<div id="itemRows">
Item quantity: <input type="text" name="add_qty" size="4" /> Item name: <input type="text" name="add_name" />Time:<input type="text" id="time" name="time" />
(This row will not be saved unless you click on "Add row" first)
<input onclick="addRow(this.form);" type="button" value="Add row" />
</div>
<p><input type="submit" name="ok" value="Save Changes"></p>
</form>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'">Time<input type="text" id="time" name="time[]" size="4" value="'+frm.time.value+'" > Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
frm.time.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
When you generate dynamic textbox with id and with date picker so you need to call one function for init datepicker on that text like below
$('input').bootstrapMaterialDatePicker();
function addRow(frm)
{
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'">Time<input type="text" id="time'+rowNum+'" name="time[]" size="4" value="'+frm.time.value+'" > Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
frm.time.value = '';
$('#time'+rowNum).bootstrapMaterialDatePicker();
}
In above function i add one id to time textbox and call bootstrap datepicker to init date on that textbox.
See working demo here
http://plnkr.co/edit/P0ZQsAjDJAXyJGs9kvT3?p=preview
I am creating an order page in Jquery Mobile where user fill data and quantity .
Creating Dynamic Fields
Whenever user fills the data in quantity, say use entered 1, then only one dynamic field will generate. code below
HTML
<label for="textarea2b">Quantity</label>
<input type="number" name="name2" id="quantitypickup" onkeyup="showdimension()" value="" data-clear-btn="true" placeholder="">
<div id="dimshow" class="row">
JS to show dynamic field
function showdimension() {
var q = $("#quantitypickup").val();
var r = $("#dimshow");
if (q == "0" || q == "" || q == null) {
r.hide();
r.html('');
} else {
r.show();
r.html('');
for (var i = 0; i < q; i++) {
r.append(' <div class="col-xs-6"><label>Item Name ' + (i + 1) + '</label><input type="text" name="name2" id="itemname" onkeyup="" value="" data-clear-btn="true" placeholder=""></div><div class="col-xs-6"><div class="row"><div class="col-xs-4"><label>Length</label><input type="number" id="length" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Width</label><input type="number" name="name2" id="width" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Height</label><input type="number" id="height" name="name2" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div></div> </div></div>');
}
}
}
I want to insert this into database using mysql and php how can I do so.
Below is the fiddle
https://jsfiddle.net/ankit10594/5suemmyk/
Please help
In js: update id & name field
for (var i = 0; i < q; i++) {
r.append(' <div class="col-xs-6"><label>Item Name ' + (i + 1) + '</label><input type="text" name="itemname_'+(i+1)+'" id="itemname_'+(i+1)+'" onkeyup="" value="" data-clear-btn="true" placeholder=""></div><div class="col-xs-6"><div class="row"><div class="col-xs-4"><label>Length</label><input type="number" id="length_'+(i+1)+'" name="length_'+(i+1)+'" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Width</label><input type="number" name="width_'+(i+1)+'" id="width_'+(i+1)+'" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Height</label><input type="number" id="height_'+(i+1)+'" name="height_'+(i+1)+'" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div></div> </div></div>');
}
Now put all this div & Html inside a <form method='POST' action='<your_page name.php'> tag. & create a submit button. Inside your .php page you can get the value of Quantity from $_POST["name2"].Now useing for() insert the data into database.
I searched a lot for this, but I can only find +1 -1 solutions.
But I want to set the number of inputs with a other input like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
When the user now writes 5 in the first field, the form should look like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">
How can I make this? MUST I use js?
Here's a simple javascript snippet that doesn't make use of any frameworks:
function addInputs() {
var count = parseInt(document.getElementById("count").value);
for (var i = 2; i <= count; i++) {
document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
}
}
In this example you have to add a container (div) with id 'moreinputs'. However, when calling this function more than once, it will not work properly (e.g. it can only increase the number of input but not decrease)
Yes, either you use javascript, or you send the form to the server, where a new html page with all the inputs is generated (e.g. with PHP).
Yes you must use js to do it dynamically on the spot You have a jQuery tag so I will show an example in jQuery
This is not the best example but it works and it's a starting point
JS:
$(function(){
$('#master').on('change', function() {
var count = $(this).val();
$('#otherInputs').html('')
for( var i = 0; i < count; i++) {
$('#otherInputs').append(
$('<input>', {type: 'text'})
);
}
});
});
HTML:
<input type="number" id="master" value="1">
<div id="otherInputs"></div>
Demo
In English this is saying...
When you change #master I will empty #master (html('')) loop through and append a new input depending on #master's value
Here's the FIDDLE. Hope it helps. :)
html
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
<div id="container"></div>
script
$('#count').on('keyup', function () {
var $this = $(this);
var count = $this.val();
$('#container').empty();
for (var x = 1; x <= count; x++) {
var newInput = '<input type="text" size="30" maxlength="30" id="input_' + x + '" name="input_' + x + '">';
$('#container').append(newInput);
}
});
This worked for me
function AddField() {
var count = $("#countetfield").val();
var i = 1;
var id = $("#container .testClass:last").attr('name');
var test = id.split("_");
id_name = test[1];
while (i <= count) {
id_name++;
var a = '<input type="text" class="testClass" size="30" maxlength="30" id="input_' + id_name + '" name="input_' + id_name + '"/>';
$("#container").append(a);
i++;
}
}
<input type="text" id="countetfield" value="1" />
<input type="button" value="Go" onclick="AddField();" />
<div id="container">
<input type="text" class="testClass" size="30" maxlength="30" id="input_1" name="input_1" />
</div>