How to customize jAutoCalc plugin - javascript

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

Related

javascript equivalent to jquery closest().find()

<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>

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>
You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

jQuery Find First Row From Closest Method

Using jQuery, I'm trying to find the first row of a given column in a table based on the control that has focus. The below kind of works, but it finds the last row of the given column. I want it to find the first row.
var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')
I believe this is going to the last row because of the use of the 'closest()' method which traverses through the elements starting from the bottom.
What this ultimately being used for is navigate through a table using the arrow keys. It's based on this helpful code someone was kind enough to share: https://gist.github.com/krcourville/7309218.
EDIT: Adding additional fuller jquery and html as requested.
jQuery (stripped down version):
<script>
$('table.arrow-nav').keydown(function(e){
switch(e.which){
case //... other cases for other keycodes ...
case e.ctrlKey && 38: // <ctrl> + <Up>
$next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
break;
}
if($next && $next.length){
$next.focus();
}
});
</script>
HTML:
<html>
<head></head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><input id="ctl_1_1" type="text"></td>
<td><input id="ctl_2_1" type="text"></td>
<td><input id="ctl_3_1" type="text"></td>
<td><input id="ctl_4_1" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_2" type="text"></td>
<td><input id="ctl_2_2" type="text"></td>
<td><input id="ctl_3_2" type="text"></td>
<td><input id="ctl_4_2" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_3" type="text"></td>
<td><input id="ctl_2_3" type="text"></td>
<td><input id="ctl_3_3" type="text"></td>
<td><input id="ctl_4_3" type="text"></td>
</tr>
</table>
</body>
<html>
Try like this
$('input:focus').closest('tr').parent().find("tr:nth-child(2)").find('td:nth-child(3)').find('input')
You can use the ids for referencing each row:
$(function() {
$('input').on('focus', function(event) {
var foc = $(this).attr('id');
var ctl = parseInt(foc.charAt(6), 10);
var next = $('tr')[ctl];
if (next === $('tr')[2]) {
next = $('tr')[0];
}
console.log('Focused input is ' + foc);
console.log('The next row is ' + (ctl + 1));
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Next Row</title>
</head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>
<input id="ctl_1_1" type="text">
</td>
<td>
<input id="ctl_2_1" type="text">
</td>
<td>
<input id="ctl_3_1" type="text">
</td>
<td>
<input id="ctl_4_1" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_2" type="text">
</td>
<td>
<input id="ctl_2_2" type="text">
</td>
<td>
<input id="ctl_3_2" type="text">
</td>
<td>
<input id="ctl_4_2" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_3" type="text">
</td>
<td>
<input id="ctl_2_3" type="text">
</td>
<td>
<input id="ctl_3_3" type="text">
</td>
<td>
<input id="ctl_4_3" type="text">
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>

JS trouble in computing a value from a table column and writing to another, from text input to textarea

I can't find what is wrong in my code, as it does nothing...
my js has:
function calc()
{
for(i=1;i<=4;i++)
{
document.getElementById("cost"+i).value= (document.getElementById("pret"+i).value*document.getElementById("cant"+i).value)*1.24;
document.biblioteca.total.value+=document.getElementById("cost"+i).value;
}
}
and the html is:
<form name="biblioteca">
<table width=600 border="3">
<tr>
<th width="50%">Carte</th>
<th width="15%">Pret</th>
<th width="15%">Cantitate</th>
<th>Cost(TVA inclus)</th>
</tr>
<tr>
<td>Manuscrisul gasit la Accra - Paulo Coelho</td>
<td id="pret1" value="20">20</td>
<td><input type="text" value="" id="cant1"></td>
<td><textarea name="cost1" id="cost1" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Poarta coliviei - Katie Hickman</td>
<td id="pret2" value="10">10</td>
<td><input type="text" value="" id="cant2"></td>
<td><textarea name="cost2" id="cost2" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Cincizeci de umbre ale lui Grey - E.L. James </td>
<td id="pret3" value="44">44</td>
<td><input type="text" value="" id="cant3"></td>
<td><textarea name="cost3" id="cost3" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Ciresarii. Vol.2: Castelul Fetei In Alb - Constantin Chirita</td>
<td id="pret4" value=6>6</td>
<td><input type="text" value="" id="cant4"></td>
<td><textarea name="cost4" id="cost4" rows="1" value=""></textarea></td>
</tr>
<tr>
<td colspan=2></td>
<td>Total:</td>
<td><textarea name="total" rows="1" readonly value=""></textarea></td>
</tr>
</table>
<input type="button" name="calc" value="Caluleaza" onclick="calc()">
</form>
It should take the value from the second column, multiply it by the third column, and then by 1.24, and write the result in the forth column. then, this result should be summarized in the last column, of the last row, the total. but it does nothing. i tried different ways, stopped at this one because was the first that came in mind. I also tried assigning object=document.getElementById("cost"+i) then use object.value, but it's the same thing, and it does not work. I can'n find what's wrong.
After comments, whole html looks like this:
<html>
<head>
<script type="text/javascript">
function calculate()
{
document.biblioteca.total.value = 0;
for(i=1;i<=4;i++)
{
document.getElementById("cost"+i).value= (parseInt(document.getElementById("pret"+i).innerText)*parseFloat(document.getElementById("cant"+i).value))*1.24;
document.biblioteca.total.value = parseFloat(document.biblioteca.total.value) + parseFloat(document.getElementById("cost"+i).value);
}
}
</script>
</head>
<body>
<h1>Biblioteca</h1>
<form name="biblioteca">
<table width=600 border="3">
<tr>
<th width="50%">Carte</th>
<th width="15%">Pret</th>
<th width="15%">Cantitate</th>
<th>Cost(TVA inclus)</th>
</tr>
<tr>
<td>Manuscrisul gasit la Accra - Paulo Coelho</td>
<td id="pret1">20</td>
<td><input type="text" value="" id="cant1"></td>
<td><textarea name="cost1" id="cost1" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Poarta coliviei - Katie Hickman</td>
<td id="pret2">10</td>
<td><input type="text" value="" id="cant2"></td>
<td><textarea name="cost2" id="cost2" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Cincizeci de umbre ale lui Grey - E.L. James </td>
<td id="pret3">44</td>
<td><input type="text" value="" id="cant3"></td>
<td><textarea name="cost3" id="cost3" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Ciresarii. Vol.2: Castelul Fetei In Alb - Constantin Chirita</td>
<td id="pret4">6</td>
<td><input type="text" value="" id="cant4"></td>
<td><textarea name="cost4" id="cost4" rows="1" value=""></textarea></td>
</tr>
<tr>
<td colspan=2></td>
<td>Total:</td>
<td><textarea name="total" rows="1" readonly value=""></textarea></td>
</tr>
</table>
<input type="button" value="Caluleaza" onclick="calculate()">
</form>
</body>
</html>
either I;m very tired and can't see some obvious stupid mistake, or there is something fishy....because still doesn't work.
The values stored by those <input> elements aren't numbers. They're strings. You need to convert them into floats or integers:
var total_element = document.biblioteca.total;
var cost_element = document.getElementById("cost" + i);
var pret_element = document.getElementById("pret" + i);
var cant_element = document.getElementById("cant" + i);
var pret = parseFloat(pret_element.value);
var cant = parseFloat(cant_element.value);
cost_element.value = pret * cant * 1.24;
total_element.value += cost_element.value;
To start, you are trying to do math on string values when you are grabbing the value from the input tags.
Also, your function is not running because you can not use calc() as the function name ( for some reason)
Try replacing your code with this.
JS:
function calculate()
{
document.biblioteca.total.value = 0;
for(i=1;i<=4;i++)
{
document.getElementById("cost"+i).value= (parseInt(document.getElementById("pret"+i).innerText)*parseFloat(document.getElementById("cant"+i).value))*1.24;
document.biblioteca.total.value = parseFloat(document.biblioteca.total.value) + parseFloat(document.getElementById("cost"+i).value);
}
}
HTML:
<form name="biblioteca">
<table width=600 border="3">
<tr>
<th width="50%">Carte</th>
<th width="15%">Pret</th>
<th width="15%">Cantitate</th>
<th>Cost(TVA inclus)</th>
</tr>
<tr>
<td>Manuscrisul gasit la Accra - Paulo Coelho</td>
<td id="pret1" value="20">20</td>
<td><input type="text" value="" id="cant1"></td>
<td><textarea name="cost1" id="cost1" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Poarta coliviei - Katie Hickman</td>
<td id="pret2" value="10">10</td>
<td><input type="text" value="" id="cant2"></td>
<td><textarea name="cost2" id="cost2" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Cincizeci de umbre ale lui Grey - E.L. James </td>
<td id="pret3" value="44">44</td>
<td><input type="text" value="" id="cant3"></td>
<td><textarea name="cost3" id="cost3" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Ciresarii. Vol.2: Castelul Fetei In Alb - Constantin Chirita</td>
<td id="pret4" value=6>6</td>
<td><input type="text" value="" id="cant4"></td>
<td><textarea name="cost4" id="cost4" rows="1" value=""></textarea></td>
</tr>
<tr>
<td colspan=2></td>
<td>Total:</td>
<td><textarea name="total" rows="1" readonly value=""></textarea></td>
</tr>
</table>
<input type="button" name="calc" value="Caluleaza" onclick="calculcate()">
</form>

Computing the sum of a variable number of html table columns using Javascript

I have a table with a lot of columns, and each column consists of a text field with a numeric value that can be changed. The last column of the table must hold the sum of all columns. Now here's my question: how can I make the sum change in realtime using javascript? For example if a column value is modified, the sum must be changed in order to fit the new values.
Below is my table:
<table id="sum_table">
<tr>
<td>Column 1</td>
<td><input type="text" name="val1" value="" /></td>
</tr>
<tr>
<td>Column 2</td>
<td><input type="text" name="val2" value="" /></td>
</tr>
<tr>
<td>Column 3</td>
<td><input type="text" name="val3" value="" /></td>
</tr>
[...]
<tr>
<td>Total</td>
<td><input type="text" name="total" value="" /></td>
</tr>
</table>
Thank you.
<html>
<head>
<script type="text/javascript">
function calc()
{
var sum = parseFloat(document.getElementById('val1').value + document.getElementById('val2').value + document.getElementById('val3').value + [...]);
document.getElementById('total').value = sum;
}
</script>
</head>
<body>
<table id="sum_table">
<tr>
<td>Column 1</td>
<td><input type="text" id="val1" value="" OnTextChanged="javascript:calc()"/></td>
</tr>
<tr>
<td>Column 2</td>
<td><input type="text" id="val2" value="" OnTextChanged="javascript:calc()/></td>
</tr>
<tr>
<td>Column 3</td>
<td><input type="text" id="val3" value="" OnTextChanged="javascript:calc()/></td>
</tr>
[...]
<tr>
<td>Total</td>
<td><input type="text" id="total" value="" /></td>
</tr>
</table>
</body>
</html>
That should to the trick.
Edit:
After discussion in the comments, this is the final version: http://jsfiddle.net/gXdwb/3/
$('#sum_table tr:not(.totalColumn) input:text').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
var thisNumber = $(this).attr('class').match(/(\d+)/)[1];
$table.find('tr:not(.totalColumn) .sum'+thisNumber).each(function() {
total += +$(this).val();
});
$table.find('.totalColumn td:nth-child('+thisNumber+') input').val(total);
});
<table id="sum_table" width="600" border="0">
<tr>
<td>Sum 1</td>
<td>Sum 2</td>
<td>Sum 3</td>
</tr>
<tr>
<td><input type="text" name="textfield" id="textfield" class="sum1" /></td>
<td><input type="text" name="textfield2" id="textfield2" class="sum2" /></td>
<td><input type="text" name="textfield3" id="textfield3" class="sum3"/></td>
</tr>
<tr>
<td><input type="text" name="textfield4" id="textfield4" class="sum1" /></td>
<td><input type="text" name="textfield5" id="textfield5" class="sum2" /></td>
<td><input type="text" name="textfield6" id="textfield6" class="sum3" /></td>
</tr>
<tr>
<td><input type="text" name="textfield7" id="textfield7" class="sum1" /></td>
<td><input type="text" name="textfield8" id="textfield8" class="sum2"/></td>
<td><input type="text" name="textfield9" id="textfield9" class="sum3"/></td>
</tr>
<tr>
<td>Total</td>
<td>Total</td>
<td>Total</td>
</tr>
<tr class="totalColumn">
<td><input type="text" name="textfield10" id="textfield10" /></td>
<td><input type="text" name="textfield11" id="textfield11" /></td>
<td><input type="text" name="textfield12" id="textfield12" /></td>
</tr>
<tr>
<td>bla</td>
<td>bla</td>
<td>bla</td>
</tr>
</table>
As usual, I'm not sure if this is optimal, but it seems to work:
See: http://jsfiddle.net/gXdwb/
$('#sum_table tr:not(:last-child)').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
$table.find('tr:not(:last-child) input:text').each(function() {
total += +$(this).val();
});
$table.find('input[name="total"]').val(total);
});

Categories