I have table like this:
<tr id="t0" >
<td id="0"></td>
<td ><input name="0" style="width:20px;" type="text" />-
<input name="1" style="width:20px;" type="text" />
<button onclick="write(0)" >+</button></td>
</tr>
<tr id="t1" >
<td id="1"></td>
<td ><input name="1" style="width:20px;" type="text" />-
<input name="2" style="width:20px;" type="text" />
<button onclick="write(1)" >+</button></td>
</tr>
I need to get all values from input elements inside specific tr element.
I tried following but nothing:
var t = $('table#tbl tr#'+id).find('input').val();
alert(t);
or
var t = $('tr'+id+':has(input)').val();
alert(t);
but nothing... Can someone point me to the correct answer?
You can your .map to get all values since .val() gives you the value of the first input only. Each of your rows has an id; since IDs are unique, that's all you need to select a particular row.
var t = $('#t0').find('input').map(function() {
return this.value;
}).get();
alert(t);
var t = $('#t0').find('input').map(function() {
return this.value;
}).get();
alert( t );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="t0" >
<td id="0"></td>
<td ><input name="0" style="width:20px;" type="text" value="test 1" />-
<input name="1" style="width:20px;" type="text" value="test 2" />
<button onclick="write(0)" >+</button></td>
</tr>
<tr id="t1" >
<td id="1"></td>
<td ><input name="1" style="width:20px;" type="text" />-
<input name="2" style="width:20px;" type="text" />
<button onclick="write(1)" >+</button></td>
</tr>
</table>
Reference:
.map() | jQuery API Documentation
Related
I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.
I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});
I am new to javascript and am making a basic HTML timesheet form. I am simply trying to add the various hour types (Regular, overtime, sick, etc.) together and put that calculated value into a "Total hours" text box. Here is my function that I attempted (I am only using the 1 text box for now but would like advice on how to incorporate the others):
<script>
function findTotal(hours, tot) {
var hours = document.getElementsbyID('hours1').value;
var tot = 0;
for (var i = 0; i < hours.length; i++) {
if (parseInt(hours[i].value))
tot += parseInt(hours[i].value);
}
document.getElementById('total').value = tot;
}
</script>
Here is the corresponding HTML form section:
<b>HOURS</b>
<table width="25%" border="1" cellpadding="0" cellspacing="0" style="background-color: #ffffff;">
<tr valign="Top">
<td style="border-width : 0px;">
<br /><b>Regular</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal(hours)" id="hours1" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Overtime</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours2" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Sick</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours3" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Holiday</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours4" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Vacation</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours5" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Leave</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours6" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Jury Duty</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours7" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>TOTAL HOURS</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" size="5" id="total">
</td>
</tr>
</table>
Thank you in advance for your help!
-Matt
If you do the same things many times, think about how you could do it generically with CSS (selector) or JavaScript (loop).
Cleaned up HTML:
<b>HOURS</b>
<table id="myTable" width="25%">
<tr valign="top">
<td>Regular</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Overtime</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Sick</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Holiday</td>
<td>
<input type="text" id="hours4" size="5" />
</td>
</tr>
<tr valign="top">
<td>Vacation
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Leave</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Jury Duty</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>TOTAL HOURS</td>
<td>
<input type="text" size="5" id="total" />
</td>
</tr>
</table>
It is good pratice to separate JavaScript and HTML.
If you work with HTML and JavaScript, it's good to understand how you could access, e.g here the table, without class (getElementsByClassName) and without id (getElementById).
Go through the table rows in the table. Therefore there are rows and cells:
var table = document.getElementById("myTable");
var rows = table.rows;
var rowsLength = rows.length // the number of all rows in the table
Example first row first cell:
var firstRowFirstCell = rows[0].cells[0];
Here, we go through the rows without the last row (total) rowsLength - 1. The input is in the second cell. Therefore we need document.getElementsByTagName
var input = rows[i].cells[1].getElementsByTagName("input");
to add addEventListener:
input[0].addEventListener("blur", function() { ... });
for every input except total (the last one). Assign
function totalHours(containerID) {
var table = document.getElementById(containerID);
var rows = table.rows;
var rowsLength = rows.length;
var total = 0;
for(var i = 0; i < (rowsLength - 1); i += 1) { // not the TOTAL input!
var input = rows[i].cells[1].getElementsByTagName("input");
if(input[0].value !== "") { // no empty inputs
total += parseInt(input[0].value);
}
}
return total;
}
to them.
Full example
my table looks something like that:
<table class="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode max" value="1" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode min" value="2" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode width" value="3" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max edit-mode" value="4" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min edit-mode" value="5" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode width" value="6" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode max" value="7" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode min" value="8" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="edit-mode width" value="9" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
When the user clicks on the row I want to save / fetch the values of the input values from the clicked row.
I did that with:
$("button").click(function () {
var min = jQuery("input#min").val();
var max = jQuery("input#max").val();
var width = jQuery("input#width").val();
console.log(currentClass);
console.log(min);
console.log(max);
console.log(width);
});
With this code I only get the values of the first row. I should revice the values from the clicked row. For example if the user clicks on the third row the values should be 7,8,9.
Also I'm wondering why I get with $(this).parents('tr') the button context instead of the tr context in jquery.
Does someone have a good workaround for this? Code also here http://jsfiddle.net/zW5KC/1/
Okay, so firstly your IDs should be unique, so I've changed them to classes.
Secondly, when you try var min = jQuery("input#min").val(); its finding an input with the id of min, however its just finding the first one on the page, it doesn't know which one you want.
So I've updated the code to use this which in this case references the actual button element you've clicked. From there we find the closest parent which is a tr and then from there find a child who has the correct class. Code;
<table class="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
<th class="tg-031e"></th>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max" class="edit-mode" value="1" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min" class="edit-mode" value="2" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="width" class="edit-mode" value="3" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max" class="edit-mode" value="4" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min" class="edit-mode" value="5" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="width" class="edit-mode" value="6" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<tr>
<td class="tg-031e"><span class="display-mode" />
<input class="max" class="edit-mode" value="7" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="min" class="edit-mode" value="8" />
</td>
<td class="tg-031e"><span class="display-mode" />
<input class="width" class="edit-mode" value="9" />
</td>
<td class="tg-031e">
<button name="Klickmich" type="button" value="Überraschung">Foo</Button>
</td>
</tr>
<script type="text/javascript">
$("button").click(function () {
var $row = $(this).closest('tr');
var min = $row.find('.min').val();
var max = $row.find('.max').val();
var width = $row.find('.width').val();
console.log(currentClass);
console.log(min);
console.log(max);
console.log(width);
});
</script>
Use closest() to find parent tr and then use find() to get the specific element inside that tr like this:
$("button").click(function () {
var min = jQuery(this).closest("tr").find("#min").val();
var max = jQuery(this).closest("tr").find("#max").val();
var width = jQuery(this).closest("tr").find("#width").val();
console.log(min);
console.log(max);
console.log(width);
});
ok, I'll try this again, my bad.
I am trying to build a very simple php invoice system just for inputting data, writing it to a database, and ultimately sending the Info to a file for printing. The problem I am haviung, besides being pretty new to javascript is getting a grand total from multiple lines of items and totals. I will post the page I have started to work with
<script type="text/javascript">
function add()
{
var a = parseInt(document.frm.A.value);
var b = parseInt(document.frm.B.value);
var result = parseInt(document.frm.Result.value);
var result=a*b;
document.frm.Result.value=result;
}
</script>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
}
body {
background-color: #000;
}
</style>
HTML:
<form name="frm">
<p> </p>
<table width="66%" border="1">
<tr bgcolor="#B80000">
<td width="60%"><div align="center">Item Description</div></td>
<td width="11%"><div align="center">Price Per</div></td>
<td width="15%"><div align="center">Quantity</div></td>
<td width="14%"><div align="center">SubTotal</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item" type="Text" id="item" size="100" >
</div></td>
<td><div align="center">
<input name="A" type="Text" id="A" onChange="add()" size="5" >
</div></td>
<td><div align="center">
<input name="B" type="Text" id="B" onChange="add()" size="5" >
</div></td>
<td><div align="center">
<input name="Result" type="Text" id="Result" size="8" >
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center">
TOTAL:
<input name="Total" type="Text" id="Total" size="8">
</div></td>
</tr>
</table>
</form>
So I am trying to figure out how to take the total from the SubTotal column and have it summed in the TOTAL field. If I have multiple rows, i need to have all the subtotals added together. Been working on it for days and cant figure it out.
If I have multiple rows setup this way:
<form name="frm">
<p> </p>
<table width="66%" border="1">
<tr bgcolor="#B80000">
<td width="60%"><div align="center">Item Description</div></td>
<td width="11%"><div align="center">Price Per</div></td>
<td width="15%"><div align="center">Quantity</div></td>
<td width="14%"><div align="center">SubTotal</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item" type="Text" id="item" size="100" >
</div></td>
<td><div align="center">
<input name="A" type="Text" id="A" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B" type="Text" id="B" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result" type="Text" id="Result" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item2" type="Text" id="item2" size="100" >
</div></td>
<td><div align="center">
<input name="A2" type="Text" id="A2" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B2" type="Text" id="B2" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result2" type="Text" id="Result2" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item3" type="Text" id="item3" size="100" >
</div></td>
<td><div align="center">
<input name="A3" type="Text" id="A3" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B3" type="Text" id="B3" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result3" type="Text" id="Result3" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center">
TOTAL:
<input name="Total" type="Text" id="Total" size="8" onChange="Adder()" >
</div></td>
</tr>
</table>
</form>
will the javascript work when I add the other elements to it? or am i going in the wrong direction
From the perspective of your current code, the following would work:
function add() {
var a = parseInt(document.frm.A.value);
var b = parseInt(document.frm.B.value);
var result = parseInt(document.frm.Result.value); // <-- This line is unnecessary
var result = a * b;
document.frm.Result.value = result;
document.frm.Total.value = result; // I added this line
}
EDITED: I came up with a slightly cumbersome method of scaling the above with multiple rows as follows.
Give specific ID's to each of your rows and their result pairs like so:
<input name="A" type="Text" id="A1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="B" type="Text" id="B1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="Result" type="Text" id="Result1" size="8" />
(the next row would then have the number 2 added where you have 1 above)
You could then use the following js:
function add(row) {
var a = parseInt(document.getElementById('A'+row).value);
var b = parseInt(document.getElementById('B'+row).value);
if (a > 0 && b > 0) {
document.getElementById('Result'+row).value = a * b;
document.getElementById('Total').value = parseInt(document.getElementById('Result1').value) + parseInt(document.getElementById('Result2').value);
}
}
I'm sure this could be done in a better way, but I believe it's a good one to start with...
Here you can play with a demo.
Try:
function add(){
var table = document.getElementsByTagName('table')[0];
var tr = table.getElementsByTagName('tr'), sum = 0;
for(var i=1,l=tr.length; i<l; i++){
var inputs = tr[i].getElementsByTagName('input'), sub = 1;
for(var n=1; n<3; n++){
sub *= inputs[n].value;
}
sum += inputs[3].value = sub;
}
totalNode.innerHTML = sum;
}
Swap out totalNode with the div you want your total in. I would actually not use inputs for your subtotals as well, but that would require I rewrite this function. I also don't recommend putting JavaScript into your HTML like that, usually. You'll learn.