I have list of materials and rate for each material. When user enters quantity for a material, onchange event triggers and calculates material cost as rate*quantity. This I am able to do. I want the sum of all material cost also. I can do that by adding another javascript function in onchange as onchange="mymultiply(100, 'rate_1','quantity_1');mysummation('cost_1','cost_2',...,'sum_cost')". But how to cascade it?
I want a javascript function to trigger when readonly value (cost_1/cost_2 etc) is changed by onchange in quantity_1/quantity_2 etc. onchange works on user input only. Is there a workaround.
So the sample form looks like this.
<table>
<tr><th>material</th><th>rate</th><th>quantity</th><th>cost</th></tr>
<tr>
<td>Material 1</td>
<td><input type='text' id='rate_1' readonly='true' value='100' /></td>
<td><input type='text' id='quantity_1' onchange="mymultiply('rate_1','quantity_1','cost_1');" /></td>
<td><input type='text' id='cost_1' readonly='true' onchange="mysummation('cost_1','cost_2','cost_3','sum_cost');" /></td>
</tr>
<tr> Row 2 data</tr>
<tr> Row 3 data</tr>
</table>
<input type='text' id='sum_cost' readonly='true' />
Javascript looks something like this...
function mymultiply(rate, quantity, cost){
document.getElementById(cost).value=document.getElementById(quantity).value*document.getElementById(rate).value;
}
function mysummation(cost_1, cost_2, cost_3, sum){
document.getElementById(sum).value=document.getElementById(cost_1).value+document.getElementById(cost_2).value+document.getElementById(cost_3).value;
}
Can you try it
Script
<script>
function mymultiply(quantity){
var rate1=document.getElementById('rate_1').value;
document.getElementById('cost_1').value= parseInt(quantity)*parseInt(rate1);
document.getElementById('cost_2').value= parseInt(quantity)*200;
document.getElementById('cost_3').value= parseInt(quantity)*300;
document.getElementById('sum_cost').value= parseInt(document.getElementById('cost_1').value)+parseInt(document.getElementById('cost_2').value)+parseInt(document.getElementById('cost_3').value);
}
</script>
HTML
<table>
<tr><th>material</th><th>rate</th><th>quantity</th><th>cost1</th><th>cost2</th><th>cost3</th></tr>
<tr>
<td>Material 1</td>
<td><input type='text' id='rate_1' readonly='true' value='100' /></td>
<td><input type='text' id='quantity_1' onKeyUp="mymultiply(this.value);" /></td>
<td><input type='text' id='cost_1' readonly='true' /></td>
<td><input type='text' id='cost_2' readonly='true' /></td>
<td><input type='text' id='cost_3' readonly='true' /></td>
</tr>
<tr> Row 2 data</tr>
<tr> Row 3 data</tr>
</table>
Totla Value<input type='text' id='sum_cost' readonly='true' />
I think you want to trigger one function from another function Try this
$(selector).trigger("change");
or
while u calling its
function mymultiply(rate, quantity, cost){
mysummation('100', '200', '300', '600');//call another function also
}
Related
I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .
You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>
Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method
How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});
I have a dynamic table that contains price, quantity and subtotal on each row. I am trying to write a javascript method that automatically multiples the price and quantity values on each keyup and outputs them as the subtotal.
$('input.value').keyup( function() {
var row = $(this).closest('tr');
var val1 = row.find(':nth-child(1)').value;
var val2 = row.find(':nth-child(2)').value;
console.log(val1);
console.log(val2);
output = row.find(':nth-child(3)');
output.value = val1 * val2;
});
This is as far as I've gotten so far, the console log just shows "undefined" as the values for val1, and val2. Why is this? Am I misunderstanding how .find() works?
I have tried searching on both stack exchange and google, and I can't seem to find a good example of using nth-child based on the currently selected row.
Here is a simplified version of the table row. Each table row has an id based on it's row number.
<tr id = "row_#">
<td>
<?php echo $this->Form->text("Items.{$key}.quantity", array('value' => $item['quantity'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.price", array('value' => $item['price'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.total", array('value' => number_format( $item['price']*$item['quantity'], 2), 'class' => 'subtotal')); ?>
</td>
</tr>
I am using jquery, and cakephp 2.7
In your code, row.find(':nth-child(1)') selects a <td> element -- the first child of the <tr>. But it seems that you want to select <input> elements in each row to get their values.
In my example, below, I've given each input a class that identifies it as a "quantity", "price", or "total" field. I find the closest row to the current <input>. Then I find the value for each input within that row, calculate the total, and set the value of the "total" <input> to that number.
I'm using jQuery's selector context, which is internally equivalent to find().
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = jQuery('input.total', $row),
quantity = jQuery('input.quantity', $row).val(),
price = jQuery('input.price', $row).val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
</table>
You can use nth-child selectors rather than classes, if you prefer. But remember that "nth" children are the <td> elements, not the <input> elements. You'll need to select the <input> within each "nth" <td> child. Something like:
$row.find('td:nth-child(1) input').val()
See the example below:
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = $row.find('td:nth-child(3) input'),
quantity = $row.find('td:nth-child(1) input').val(),
price = $row.find('td:nth-child(2) input').val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
</table>
jQuery has no value property....use val() and assuming selectors are valid it should work
var val1 = row.find(':nth-child(1)').val();
EDIT:
$(document).ready(function(){
$("#add").click(function(){
var currentValue = parseInt($("#hide").val())+1;
$("#Recipe_table").append("<tr><td><input type='text' name='name[]'/></td><td><input type='text' name='quantity[]'/></td><td><input type='text' name='measure[]'/></td></tr>");
$("#hide").val(currentValue);});
$("#remove").click(function(){
var currentValue = parseInt($("#hide").val())-1;
if ($("table tr").length != 1) {
$('#Recipe_table tr:last').remove();}});
});
Add and Deletion works.
My question is, I dont want to delete all rows or ill end up deleting my headers aswell until there was no table in the first place.
Secondly, The value doesnt decrement when i remove, i simply copied above since it works and adds the value of the hidden field.
Plus, Is there a better way of setting the value, The above approach just increments without hesitation like for example.
Plus how i prevent it from not reverting back to its original value when i submit and back one page.
I don't think the solution you got for counting the number of <td> is a good solution,
use
numberOfTds = $("#table").children('tr').children('td').length;
You have to close your elements
<table id='table'>
<th colspan='3'> Table</th>
<tr>
<td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
You haven't closed your cell or table tags. Here's the corrected html. I had to assume where you wanted your final input tag...
<html>
<body>
<table id='table'>
<th colspan='3'> Table</th>
<tr>
<td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
<input type='hidden' id='put int on how many rows added'/>
</body>
</html>
You look like a beginner to HTML, CSS and JS(JQuery) so a few rules. Structure your code like so:
<table id='table'>
<th colspan='3'>Table</th>
<tr>
<td><input type='text' name='name1'/></td>
<td><input type='text' name='name2'/></td>
<td><input type='text' name='name3'/></td>
</tr>
</table>
<input type='hidden' name="name4" value="The Text you Want to Store"/>
..but you still need to learn HTML before you can effectively use JS. With JQuery to can get the values of the table elements using:
$('[name="name1"]').val();
and set the value using:
$('[name="name1"]').val("NewValue");
Look at the website w3schools.com for HTML and JS help and jquery.com for learning jquery
Close your </td> tags
<table id='table'>
<th colspan='3'> Table</th>
<tr><td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
Edit: this will also work
<table id='table'>
<th colspan='3'> Table</th>
<tr><td/><input type='text' name='name1[]'/>
<td/><input type='text' name='name2[]'/>
<td/><input type='text' name='name3[]'/>
</tr>
This is an example how the rows can be added dynamically
HTML
<table id='table'>
<th colspan='3'> Table</th>
<tr><td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
<input type="button" id="btn" value="add"/>
Script
$(document).ready(function(){
$("#btn").click(function(){
$("#table").append(" <tr><td><input type='text' name='name1[]'/></td><td><input type='text' name='name2[]'/></td> <td><input type='text' name='name3[]'/></td></tr>");
});
});
Demo
Edit
<input type='hidden' id='hide'/>
var currentValue= parseInt($("#hide").val())+1;;
$("#hide").val(currentValue);
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>