<tr>
<td><input type="text" class="rate" oninput="priceChanged(this)"> </td>
<td><input type="text" class="quantity"></td>
<td><input type="text" class="total"> </td>
</tr>
I can find the quantity textbox with jquery-
var quantityTextbox = $('.rate').closest('tr').find('.quantity');
I would like to do it now with pure javascript.
I am newcomer in the pure javascript world.
Any idea?
You can use querySelector & .closest() for this like:
var quantityTextbox = document.querySelector('.rate').closest('tr').querySelector('.quantity')
console.log(quantityTextbox.value)
<table>
<tr>
<td><input type="text" class="rate" oninput="priceChanged(this)"> </td>
<td><input type="text" class="quantity" value="10"></td>
<td><input type="text" class="total"> </td>
</tr>
</table>
If you are calling this inside priceChanged() function, then you can use:
function priceChanged(rate){
var quantityTextbox = rate.closest('tr').querySelector('.quantity')
}
as you are already passing this inside priceChanged() function.
function priceChanged(rate) {
var quantityTextbox = rate.closest('tr').querySelector('.quantity')
console.log(quantityTextbox.value)
}
<table>
<tr>
<td><input type="text" class="rate" oninput="priceChanged(this)"> </td>
<td><input type="text" class="quantity" value="10"></td>
<td><input type="text" class="total"> </td>
</tr>
</table>
Related
I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say
I want to find the total from the input field and set the total value to the particular text field.
Here is my Html:
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
Here I want to add each adult,young,children field in each row and set the value to the corresponded total column.I used for loop for this purpose. But It Shows some error while adding.
Here is my sample code.
http://jsfiddle.net/3gxnya5a/
You can use a simple loop like
$(document).ready(function () {
$('#table').on('keyup', 'input', function () {
//loop through each 4th td in each rows as they are the sum elements
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
var sum = 0;
//add up the previous 4 values
$(this).prevAll(':lt(3)').find('input').each(function () {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
$(document).ready(function() {
$('#table').on('keyup', 'input', function() {
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
var sum = 0;
$(this).prevAll(':lt(3)').find('input').each(function() {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
</table>
Already answered, but I felt worth adding an alternative.
If you add attributes to the columns you want to add, your code won't / is less likely to break when you add columns/move them around, eg:
<table id='theTable'>
<tbody>
<tr>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5" class='data-total'/></td>
then
$("#theTable>tbody>tr").each(function() {
var sum = 0;
$(".data-add", this).each(function() {
sum += (+this.value || 0); // stolen from Arun to ignore invalid values etc
});
$(".data-total", this).val(sum);
});
I have a page containing:
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[1][arg1]" value="X"></td>
<td><input type="input" name="set[1][arg2]" value="Y"></td>
<td><input type="input" name="set[1][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[2][arg1]" value="X"></td>
<td><input type="input" name="set[2][arg2]" value="Y"></td>
<td><input type="input" name="set[2][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[3][arg1]" value="X"></td>
<td><input type="input" name="set[3][arg2]" value="Y"></td>
<td><input type="input" name="set[3][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[4][arg1]" value="X"></td>
<td><input type="input" name="set[4][arg2]" value="Y"></td>
<td><input type="input" name="set[4][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[5][arg1]" value="X"></td>
<td><input type="input" name="set[5][arg2]" value="Y"></td>
<td><input type="input" name="set[5][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[6][arg1]" value="X"></td>
<td><input type="input" name="set[6][arg2]" value="Y"></td>
<td><input type="input" name="set[6][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
Two (or more) divs, containing a table each, plus n rows, each containing inputs. The inputs you already see are dynamically created from data in the db.
I would like to be able to just add a new <tr> when the link below any table is clicked. The catch being that the table which will recieve the new row is the one immediately above the link clicked.
I did think about giving each table a unique id which matches the id of the link but am unsure how in the jQuery to then recognise that a link with a random id has been clicked.
Then i thought maybe I could use the closest functionality and traverse backwards from the link to the table above it but I don't think that works. (maybe it does?)
Also, when I add the new row, it needs to be blank, which I think I could figure out, once I manage to clone the last (or any for that matter) row and append it to the end of the relevant table. E.g. new row:
<tr>
<td><input type="input" name="newSet[][arg1]" value=""></td>
<td><input type="input" name="newSet[][arg2]" value=""></td>
<td><input type="input" name="newSet[][arg3]" value=""></td>
</tr>
Hope it makes sense what I am asking.
Thanks in advance.
Jon
First, add a class addSet to your links and remove the id or make it unique. Repeated ids is not a valid markup. After doing this, I'd say this should work
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').each(function(index) {
var $this = $(this);
$this.val('');
$this.prop('name','set[][arg' + (index + 1) + ']' );
})
$table.append($clonedRow);
});
DEMO
DEMO
As pointed out in the comments, please change id="addSet" to class="addSet" to get rid of duplicate ID's. Make a clone of the last row .... there should be at least one row in the table, otherwise this part will fail. Then fix the name and value of each input element in the clone. You can either change the current value with .val() or the default/initial value with .attr() or removeAttr('value').
Here is the code you need:
$(function() {
$(document).on('click', 'a.addSet', function(e) {
e.preventDefault();
var tr = $(this).closest('div.my_div').find('tr').last().clone();
tr.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$(this).closest('div.my_div').find('table tbody').append( tr );
});
});
you can do it by adding a class to the link as id must be unique:
HTML:
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[1][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[1][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[1][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[2][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[2][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[2][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[3][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[3][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[3][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[4][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[4][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[4][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[5][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[5][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[5][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[6][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[6][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[6][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
JQUERY:
$(".addSet").click(function () {
$(this).prev("table").append('<tr><td><input type="input" name="newSet[][arg1]" value=""></td><td><input type="input" name="newSet[][arg2]" value=""></td><td><input type="input" name="newSet[][arg3]" value=""></td></tr>');
})
FIDDLE:
http://jsfiddle.net/kbxekrjc/
I am answering my own question because I used a combination of two of the other provided answers (#ClaudioRedi & #user3558931)
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$clonedRow.hide();
$table.append($clonedRow);
$clonedRow.show('slow');
});
Here is a tutorial i followed for reference: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html
Here is my javascript....
<script type="text/javascript">
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$("#btn").click(function(){
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
</script>
This is my html code to show the sum value..
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="905"> </td>
<td width="86"><input name="btn" type="submit" id="btn" value="Grand Total" /></td>
<td width="201"><input name="sum" type="text" id="sum"/></td>
</tr>
How to show this sum value in textbox after button click.
Please help...
try this with val() method I have edited the answer..
<script>
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$("#btn").click(function () {
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
here is the Fiddle
Okay, so I know this is the kind of answer that annoys people but...
Have you tried debuging javascript? It is possible to debug javascript code. For example using firebug: https://getfirebug.com/javascript . It might help.
Also, where are you assigning value of Sum to anything? Are you sure you did not want sum to be global variable (outside of any function)?
$('#idOfTextBox').val(sum.toFixed(2));
I have text boxes in HTML like:
<table id="tbl">
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
</table>
Now I want to fill the TextBoxes in first row with some value on onchange event of another textbox.
How should I do it?
The following answer by Rahul Fills all the textboxes with the same value but I want to only first 2 tds of first tr of given table with different values.
Please Help.
It would be better to use a js library like jQuery. In jQuery you can do like this.
$(function(){
$("yourtextboxselector").change(function(){
$("#tbl1 tr:first input:text").each ( function(){
$(this).val('new value');
});
});
});
<table id="tbl1">
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
</table>