HTML + JavaScript results textbox to a NaN error - javascript

So I have this little homework im struggling with. Everytime I declare a variable as parseFloat in Javascript. It just results the textbox a NaN. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Bank Statement</title>
</head>
<body>
<center>
<h1 style="font-size:43pt">Statement of Account</h1>
<p>
<form name=fr1>
Customer Name: <input type=text name=ct>
Account No. : <input type=text name=acct><br><br>
<table border=4>
<tr>
<th>Description</th>
<th>Debit</th>
<th>Credit</th>
<th>Balance</th>
</tr>
<tr>
<th>Last Balance</th>
<td> </td>
<td> </td>
<td><input type=text name=b1></td>
</tr>
<tr>
<th>Monthly Salary</th>
<td><input type=text name=d2></td>
<td><input type=text name=c2></td>
<td><input type=text name=b2></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d3></td>
<td><input type=text name=c3></td>
<td><input type=text name=b3></td>
</tr>
<tr>
<th>Refund</th>
<td><input type=text name=d4></td>
<td><input type=text name=c4></td>
<td><input type=text name=b4></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d5></td>
<td><input type=text name=c5></td>
<td><input type=text name=b5></td>
</tr>
<tr>
<th>Telephone Bill</th>
<td><input type=text name=d6></td>
<td><input type=text name=c6></td>
<td><input type=text name=b6></td>
</tr>
<tr>
<th>Total Movement</th>
<td><input type=text name=d7></td>
<td><input type=text name=c7></td>
<td> </td>
</tr>
</table><br>
<input type=button value="Show" onclick=show()>
<input type=reset value="Clear">
</form>
<script language="javascript">
function show()
{
b1=document.fr1.b1.value;
b2=document.fr1.b2.value;
b3=document.fr1.b3.value;
b4=document.fr1.b4.value;
b5=document.fr1.b5.value;
b6=document.fr1.b6.value;
d2=document.fr1.d2.value;
d3=document.fr1.d3.value;
d4=document.fr1.d4.value;
d5=document.fr1.d5.value;
d6=document.fr1.d6.value;
d7=document.fr1.d7.value;
c2=document.fr1.c2.value;
c3=document.fr1.c3.value;
c4=document.fr1.c4.value;
c5=document.fr1.c5.value;
c6=document.fr1.c6.value;
c7=document.fr1.c7.value;
b1=parseFloat(b1);
b2=parseFloat(b2);
b3=parseFloat(b3);
b4=parseFloat(b4);
b5=parseFloat(b5);
b6=parseFloat(b6);
d2=parseFloat(d2);
d3=parseFloat(d3);
d4=parseFloat(d4);
d5=parseFloat(d5);
d6=parseFloat(d6);
d7=parseFloat(d7);
c2=parseFloat(c2);
c3=parseFloat(c3);
c4=parseFloat(c4);
c5=parseFloat(c5);
c6=parseFloat(c6);
c7=parseFloat(c7);
document.fr1.b2.value=(b1-d2+c2);
document.fr1.b3.value=(b2-d3+c3);
document.fr1.b4.value=(b3-d4+c4);
document.fr1.b5.value=(b4-d5+c5);
document.fr1.b6.value=(b5-d6+c6);
document.fr1.d7.value=(d2+d3+d4+d5+d6);
document.fr1.c7.value=(c2+c3+c4+c5+c6);
}
</script>
</center>
</body>
</html>
So I dont know why it's giving me NaN. Any tips or info I missed?
EDIT: This is what im getting at NaN: http://gyazo.com/73ae7a6d0fbbf4500b7547425c367349
-- Notice that the Blance and Credit give the 2nd balance NaN

There are two errors in the code:
You're falling prey to The Horror of Implicit Globals by not declaring your local variables.
You're parsing fields with blank values and not checking the result. parseFloat("") returns NaN.
If you declare your variables and check that you're not parsing blank fields, you won't have NaN slipping into things.
If you want to treat a blank field as 0, you can use JavaScript's curiously-powerful || operator for that:
b1 = parseFloat(b1) || 0;
Separately from those errors, any time you find yourself writing long lists of variable names like b1, b2, b3, etc., look at using a loop and/or arrays.

Related

How to get reference to another object on other column on same row in a table in Javascript?

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

Detect html table cell value change

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)
});

Javascript beginner: Trouble with multiple arrays initiated by buttonMsg

I'm having problems with my arrays. My first buttonMsg() displayed the prompt correctly and the input went straight to the text box.
Now I'm having trouble duplicating that same code into my second array.
When I tried nothing would work. I'm thinking it has to do with buttonMsg.
<html>
<head>
<title></title>
<script type="text/javascript">
function buttonMsg(){
varData = new Array();
varData[0] = prompt("Please enter first name.","")
varData[1] = prompt("Please enter last name.","")
varData[2] = prompt("Please enter phone number.","")
varData[3] = prompt("Please enter address.","")
document.getElementsByName('inputbox')[0].value = varData[0]
document.getElementsByName('inputbox')[1].value = varData[1]
document.getElementsByName('inputbox')[2].value = varData[2]
document.getElementsByName('inputbox')[3].value = varData[3]
}
function buttonMsg(1){
varDater = new Array(1);
varDater[0] = prompt("Please enter first name.","")
varDater[1] = prompt("Please enter last name.","")
varDater[2] = prompt("Please enter phone number.","")
varDater[3] = prompt("Please enter address.","")
document.getElementsByName('inputbox')[0].value = varDater[0]
document.getElementsByName('inputbox')[1].value = varDater[1]
document.getElementsByName('inputbox')[2].value = varDater[2]
document.getElementsByName('inputbox')[3].value = varDater[3]
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>0,0 CustomerID</td>
<td>1 FirstName</td>
<td>2 LastName</td>
<td>3 Phone</td>
<td>4 Address</td>
</tr>
<tr>
<td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg()"/></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
</tr>
<tr>
<td>2 Customer2 <input type="button" value="Input" onclick="buttonMsg(1)"/></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
</tr>
<tr>
<td>3 Customer3</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4 Customer4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Looks like the problem is that the inputs are all named "inputbox", so really there will be no output difference between the first and second functions. They will both populate the first 4 elements named "inputbox" on the page, so clicking on the second button will still populate the first section's input boxes. It might make more sense to pass in the name of the section's inputs into the function like this:
buttonMsg(inputname){
var inputs = document.getElementsByName(inputname);
inputs[0].value = prompt("Please enter first name.","");
inputs[1].value = prompt("Please enter last name.","");
inputs[2].value = prompt("Please enter phone number.","");
inputs[3].value = prompt("Please enter address.","");
}
then have the buttons pass the names of the inputs like this:
<tr>
<td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg('inputbox1')" /></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
</tr>
and change out "inputbox1" to different names for each of the items.
Changing the code from:
function buttonMsg(1){
varDater = new Array(1);
to
function buttonMsg1(){
varDater = new Array();
and then calling buttonMsg1(); later should fix the problem.
However I suggest you further research into initializing arrays and how functions work in javascript. As the () in a function are used to send arguments (variables) to later be used in that function. In this scenario they should be left blank.
This site provides a good starting point to help understand functions.
Further looking at your code shows me that you'd also want to change the:
document.getElementsByName('inputbox')[0]
in the second function to
document.getElementsByName('inputbox')[4]
etc for all the values in that second function.
However this is definately not the best method to use for scalability (if you want more than two customers) and I suggest using a function that takes different element names as an argument.
The code shouldn't even work. Chrome reports error and halts script execution.
The declaration of the second function has an invalid argument variable name.
What characters are valid for JavaScript variable names?
Also, as already stated, there are duplicate names.
If you're allowed to use jQuery, the following might be a more interesting solution:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<title>Example</title>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('input.promptInput').bind('click', function() {
varData = new Array();
varData[0] = prompt("Please enter first name.","")
varData[1] = prompt("Please enter last name.","")
varData[2] = prompt("Please enter phone number.","")
varData[3] = prompt("Please enter address.","")
$(this).parents('tr:first').find('input[type="text"]').each(function(i, input){
$(input).val(varData[i]);
});
});
});
})(jQuery);
</script>
</head>
<body>
<table border="1">
<tr>
<td>0,0 CustomerID</td>
<td>1 FirstName</td>
<td>2 LastName</td>
<td>3 Phone</td>
<td>4 Address</td>
</tr>
<tr>
<td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
<td><input type="text" name="customer_1_firstname" value=""></td>
<td><input type="text" name="customer_1_lastname" value=""></td>
<td><input type="text" name="customer_1_phone" value=""></td>
<td><input type="text" name="customer_1_address" value=""></td>
</tr>
<tr>
<td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
<td><input type="text" name="customer_2_firstname" value=""></td>
<td><input type="text" name="customer_2_lastname" value=""></td>
<td><input type="text" name="customer_2_phone" value=""></td>
<td><input type="text" name="customer_2_address" value=""></td>
</tr>
<tr>
<td>3 Customer3</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4 Customer4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Loop through dynamic javascript calculations

I have a table of selected products and I would like to use javascript to dynamically calculate certain values for the user without refreshing.
The user sees a number of fields: quantity input box (var t0), unit amount (var amt0), total amount (var ta0), unit weight (var weight0) and total weight (var tw0).
The following code works as I would like. The quantity input by the user is multiplied by the unit amount and set to total amount. The same is done for weight. The zeros refer to the FIRST appearance of a product. The issue is that we don't know how many products the user will select.
We can determine the number of products using arguments.length. My question is, how can I construct a loop to replace the 0 with perhaps the iteration variable i. We need to create the below script to correspond to the number of products selected.
//QTY FIELD
var qtyVal0 = t0.value;
//AMT FIELD
var amtVal0 = amt0.innerHTML;
ta0.value = qtyVal0 * amtVal0;
//WEIGHT FIELD
var weightVal0 = weight0.innerHTML;
tw0.value = qtyVal0 * weightVal0;
I tried using a 'for loop' and var ('qtyVal' + i) as well as var qtyVal + i. Plus every combination in between.
I also tried just duplicating the above working script a dozen times, but it unfortunately doesn't work when the number of duplications is different than the number of products.
Javascript is not my forte by any means, so any help (or a more efficient way to calculate) would be greatly appreciated. Thank you!
PS For all of my love and respect, I will also need to tackle the issue of adding all quantities, amounts, and weights in each of the three vertical columns. I'm not sure if this would affect the way that the calculations are designed. Once again, thank you!
UPDATE
Here is the HTML code for the form displayed to the user. I generate it in another php script and insert it into the page once the user selects from a list of products. It displays 3 products currently, but as mentioned, this can change to any number. Hopefully this is clearer. Do let me know. Cheers.
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td><!--PRODUCTS SELECTED WILL BE DISPLAYED HERE -->
<div id="txtHint">
<table id="products" width="1050" cellpadding="5" border="1">
<tbody>
<tr>
<th>QTY</th>
<th>Product</th>
<th>Unit Cost</th>
<th>Unit Measure</th>
<th>Amount</th>
<th>Total Amount</th>
<th>Weight</th>
<th>Total Weight</th>
<th>LBS / KGS</th>
<th>Rec D</th>
<th>Rec Q</th>
<th>Status</th>
</tr>
<tr>
<td><input name="t0" id="t0" type="text" onkeyup="return autocalc(this,t1,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Catalogue</td>
<td>$150</td>
<td>Each</td>
<td><span id="amt0">10</span></td>
<td><input name="ta0" id="ta0" type="text" readonly="readonly" value="10" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight0">101</span></td>
<td><input name="tw0" id="tw0" type="text" readonly="readonly" value="101" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t1" id="t1" type="text" onkeyup="return autocalc(this,t0,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product2</td>
<td>$18</td>
<td>Each</td>
<td><span id="amt1">15</span></td>
<td><input name="ta1" id="ta1" type="text" readonly="readonly" value="15" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight1">50</span></td>
<td><input name="tw1" id="tw1" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t2" id="t2" type="text" onkeyup="return autocalc(this,t0,t1)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product3</td>
<td>$236</td>
<td>Each</td>
<td><span id="amt2">1</span></td>
<td><input name="ta2" id="ta2" type="text" readonly="readonly" value="1" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight2">50</span></td>
<td><input name="tw2" id="tw2" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="total" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input name="totalAmount" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td><input name="totalWeight" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div></td>
</tr>
<tr>
<td><input type="submit" id="submitbtn" name="submit" value="Save Changes">
<input type="hidden" name="action" value="create_po"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
If you're dead-set on calculating this from the HTML/DOM itself, you'll need to iterate over the appropriate table rows (consider using jQuery, you'll be glad), pull out the data in question from (what, table cells?), convert it to numbers, and do the math as normal.
There are a number of ways to do this, but it depends a lot on the HTML you're pulling the data from.

How to iterate textbox array in JS

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>

Categories