object HTMLInputElement JavaScript error - javascript

So basically, I'm doing a webpage to calculate my school marks but I can't get it to print the result at the input value... Instead, it prints [object HTMLInputElement]
Here's my JavaScript code:
<script type="text/javascript"> </script>
<script>
window.onload = function () {
var quran = document.getElementById('quran').value;
var islamic = document.getElementById('islamic').value;
var arabic = document.getElementById('arabic').value;
var english = document.getElementById('english').value;
var games = document.getElementById('games').value;
var pc = document.getElementById('pc').value;
var maths = document.getElementById('maths').value;
var chem = document.getElementById('chem').value;
var phys = document.getElementById('phys').value;
var bio = document.getElementById('bio').value;
var social = document.getElementById('social').value;
var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);
}
function resultFunc() {
document.getElementById('result').value = result;
}
</script>
And here's the table with the inputs:
<table class="rwd-table">
<tr>
<th>المادة الدراسية</th>
<th>الدرجة العظمى</th>
<th>درجة الطالب</th>
</tr>
<tr>
<td data-th="Movie Title">القرآن الكريم</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="quran" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">التربية الإسلامية</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="islamic" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">اللغة العربية</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="arabic" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">اللغة الإنجليزية</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="english" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">البدنية</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="games" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الحاسوب</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="pc" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الرياضيات</td>
<td data-th="Genre">80</td>
<td data-th="Year"> <input value="" id="maths" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الكيمياء</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="chem" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الفيزياء</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="phys" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الأحياء</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="bio" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الإجتماعيات</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="social" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<th>المجموع</th>
<th>500</th>
<th> <input style="width: 70px; background-color: gray;" id="result" value="" readonly /> </th>
</tr>
<tr>
<th style="font-size: 20px;">النسبة</th>
<th></th>
<th> <input style="width: 70px; background-color: gray;" value="" readonly /> </th>
</tr>
<tr>
<th></th>
<th> <input onClick="resultFunc()" type="submit" id="submit" value="اضغط هنا لحساب النسبة المئوية" /> </th>
<th></th>
</tr>
</table>
Sorry for the Arabic words, just look at the code :)
I've even tried to print the result in a cell instead of an input tag, but it gave me a similar error instead of printing the result...


The issue appears to be due to the calculation occurring during the window.onload event. In order to calculate the values you should be able to move the code from the onload event to the resultFunc function and it will allow you to calculate the total when you click the button.
function resultFunc() {
var quran = document.getElementById('quran').value;
var islamic = document.getElementById('islamic').value;
var arabic = document.getElementById('arabic').value;
var english = document.getElementById('english').value;
var games = document.getElementById('games').value;
var pc = document.getElementById('pc').value;
var maths = document.getElementById('maths').value;
var chem = document.getElementById('chem').value;
var phys = document.getElementById('phys').value;
var bio = document.getElementById('bio').value;
var social = document.getElementById('social').value;
var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);
document.getElementById('result').value = result;
}
Also note the reason why you get [object HTMLInputElement] is due to the scoping of the variable result. Since you declare var result in resultFunc the value is immediately lost. [object HTMLInputElement] is rendered, because window.result is also a shortcut to the element in the HTML document with the id of result.

Related

Using javascript to calculate the total cost of an order based on quantity of products in html form

Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>

I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.

Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>

calculate the hours in javascript

I need to calculate in javascript the hours between jam_keluar and jam_masuk so that lama_parkir will be like:
lama_parkir = jam_keluar - jam_masuk // 4 hours
function hitunglamaparkir(){
var k = document.getElementById('jam_keluar').value;
var m = document.getElementById('jam_masuk').value;
var tentukan = (k - m);
document.forms.formID.lama_parkir.value = tentukan;
}
<form id="formID" name="form2" method="post" action="proses.php">
<tr>
<td id="noborder">Jam Masuk</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_masuk" type="text" id="jam_masuk" size="5" maxlength="15" value="10:30:00"/>
</td>
</tr>
<tr>
<td id="noborder">Jam Keluar</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_keluar" type="text" id="jam_keluar" size="5" onkeyup="hitunglamaparkir(this.value,getElementById('jam_keluar').value);" value="14:30:00"/></td>
</tr>
<tr>
<td id="noborder">Lama Parkir</td>
<td id="noborder">:</td>
<td id="noborder"><input name="lama_parkir" type="text" id="lama_parkir" size="5" maxlength="15" readonly="readonly"/></td>
</form>

This snippet determines the difference between jam_keluar and jam_keluar as such:
jam_keluar - jam_masuk = lama_parkir.
So we can determine this:
Your function is working properly
There is no need to call subtotal
There is no need for lama_parkir to be editable (make it readonly)
function hitunglamaparkir(){
var k = document.getElementById('jam_keluar').value;
var m = document.getElementById('jam_masuk').value;
var tentukan = (k - m);
document.forms.formID.lama_parkir.value = tentukan;
}
<form id="formID" name="form2" method="post" action="proses.php">
<tr>
<td id="noborder">Jam Masuk</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_masuk" type="text" id="jam_masuk" size="5" maxlength="15" />
</td>
</tr>
<tr>
<td id="noborder">Jam Keluar</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_keluar" type="text" id="jam_keluar" size="5" onkeyup="hitunglamaparkir(this.value,getElementById('jam_keluar').value);"/></td>
</tr>
<tr>
<td id="noborder">Lama Parkir</td>
<td id="noborder">:</td>
<td id="noborder"><input name="lama_parkir" type="text" id="lama_parkir" size="5" maxlength="15" readonly="readonly"/></td>
</form>

Unable to dynamically calculate an input value onchange

I have been trying to get this calculator to work in my WordPress blog but haven't been successful at it.
I did get simple Hello world pop-up to work but not this. I want to calculate the "BPodds". Can you guys tell me what's wrong with this?
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').innerHTML = BPodds;
}
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong>
</td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>

You should use value instead of innerHtml:
document.getElementById('BPodds').value = BPodds;
Here is the fiddle: http://jsfiddle.net/o5ze12mf/

The problem is not with Wordpress,
You are trying to put the result in INPUT with innerHTML but to change the value of INPUT you need to use .value
You code will be like this :
<script type="text/javascript">
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').value = BPodds;
}
</script>
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong></td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
I just changed
document.getElementById('BPodds').innerHTML = BPodds;
to
document.getElementById('BPodds').value = BPodds;

checkbox logic not working correctly

I have the following form, with several checkboxes. Each set of checkboxes works fine, but when you change an input in the other set of checkboxes, it no longer filters based on the first set (and vice versa).
I need the logic from each set to crossover, and not sure how to achieve that?
$(document).ready(function() {
$("#type :checkbox").click(function() {
$("td").parent().hide();
$("#type :checkbox:checked").each(function() {
$("." + $(this).val()).parent().show();
});
});
$("#fee :checkbox").click(function() {
$("td").parent().hide();
$("#fee :checkbox:checked").each(function() {
$("." + $(this).val()).parent().show();
});
});
});
var repayment = function() {
};
window.onload = function() {
document.repaymentcalc.homevalue.onchange = repayment;
document.repaymentcalc.loanamount.onchange = repayment;
document.repaymentcalc.numberpayments.onchange = function() {
$('#years').html(this.value + ' years');
};
makeSomething();
};
function makeSomething() {
$('tbody tr').each(function(idx, row) {
var $row = $(row);
var initialRateCell = $row.find('td')[2];
var repaymentCell = $row.find('td').last()
var rate = parseFloat($(initialRateCell).html());
var repaymentVal = computeRepayment(rate);
$(repaymentCell).html(repaymentVal.repayment);
});
}
$("#myForm :input").change(function() {
makeSomething();
});
function computeRepayment(rate) {
var x = parseInt(document.repaymentcalc.loanamount.value, 10);
var y = parseInt(rate * 100, 10) / 120000;
var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
var h = parseInt(document.repaymentcalc.homevalue.value, 10);
var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);
var loantovalue = x / h * 100;
var year = z / 12;
return {
repayment: repayment.toFixed(2),
loantovalue: loantovalue,
year: year
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="type">
<p id="Mortgage Type">Mortgage Type</p>
<input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed
<br>
<input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed
<br>
<input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed
<br>
<input type="checkbox" name="type" value="t9" id="t9" />Tracker
<br>
<input type="checkbox" name="type" value="t1" id="t1" checked/>All
<br>
</section>
<section id="fee">
<p id="Fee">Fee</p>
<input type="checkbox" name="fee" value="f2" id="f2" />Fee
<br>
<input type="checkbox" name="fee" value="f3" id="f3" />No Fee
<br>
<input type="checkbox" name="fee" value="f1" id="f1" checked/>All
<br>
</section>
<form name="repaymentcalc" id="myForm" action="">
</br>
<p>
Home Value £
<input type="number" id="homevalue" value="250000" style="width: 75px">
</p>
<p>
Loan Amount £
<input type="number" id="loanamount" value="200000" style="width: 75px">
</p>
Term
<input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">
<div id="years" style="display:inline-block;">25 years</div>
<p>
<div id="ltv">Loan to Value: 80.0%</div>
</div>
</form>
<br>
<div id="mortgagediv">
<table id="mortgagetable">
<thead>
<tr class="productheader">
<th class="lender">Lender</th>
<th class="type">Type</th>
<th class="inititalrate">Initial Rate (%)</th>
<th class="svr">SVR (%)</th>
<th class="apr">Overall APR (%)</th>
<th class="fee">Fee (£)</th>
<th class="ltv">LTV (%)</th>
<th class="repayment">Monthly Repayment (£)</th>
</tr>
</thead>
<tbody>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t2">2yr Fixed</td>
<td class="tg-031e">1.64</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">70</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t3">3yr Fixed</td>
<td class="tg-031e">1.69</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">75</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t5">5yr Fixed</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t9">Tracker</td>
<td class="tg-031e">1.64</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">70</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t2">2yr Fixed</td>
<td class="tg-031e">1.69</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">75</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t3">3yr Fixed</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t5">5yr Fixed</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t9">Tracker</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
</tbody>
</table>
</div>

I combined the logic of the two sets into a single callback. It is neither elegant nor efficient, but works.
$(document).ready(function() {
$(":checkbox").click(function() {
$("td").parent().hide();
var selections = [];
$(":checkbox:checked").each(function() {
selections.push("."+$(this).val());
});
$(".product").each(function() {
showRow = true;
for(i=0; i<selections.length; i++){
if (!$(this).children(selections[i]).length){
showRow = false;
}
}
if (showRow) $(this).show();
});
});
});
Here is a demo of it.

You have the event handler on the myform area only
$("#myForm :input").change(function() {
makeSomething();
});
But sections fee and type are outside the form and their change events are never cauth. So, you will need to either move the sections type and fee inside the form myform so they are selected within $("#myForm :input") or add another event handler for the checkboxes.
$("#fee :checkbox").change(function() {
makeSomething();
});
$("#type :checkbox").change(function() {
makeSomething();
});
Check out this fiddle
https://jsfiddle.net/bocanegra_carlos/obcux0d8/

Basically, I think your function should go back to the drawing board when it comes to how you are reading the checkboxes. It can be massively simplified, or at least made more understandable by doing this:
// Store all active classes in this variable
var allActive = [];
// Run this function anytime something changes
function activateClasses(){
// Create a string that jquery can use to search for all the children
var activeClassesString = '.' + allActive.join(', .');
// Instead of looking through _all_ the td elements,
// only look through the parent and search in them.
$('tbody tr').each(function(){
var data = $(this);
// instead of hiding all before, just hide when it finds
// no children with the classes you want
if(allActive.length && !data.find(activeClassesString).length)
data.hide();
// otherwise, show
else
data.show();
});
}
// When your checkbox changes, add the value of it either to the
// array of classes you want to sort, or remove it from the array
$('input[type="checkbox"]').change(function(){
var value = $(this).val();
var index = allActive.indexOf(value);
var checked = $(this).is(':checked');
if(!checked && index > -1)
allActive = allActive.slice(index, 1);
else if(checked && index === -1)
allActive.push(value);
activateClasses();
});
$(document).ready(function() {
var allActive = [];
function activateClasses(){
var activeClassesString = '.' + allActive.join(', .');
$('tbody tr').each(function(){
var data = $(this);
if(allActive.length && !data.find(activeClassesString).length) data.hide();
else data.show();
});
}
$('input[type="checkbox"]').change(function(){
var value = $(this).val();
var index = allActive.indexOf(value);
var checked = $(this).is(':checked');
if(!checked && index > -1)
allActive = allActive.slice(index, 1);
else if(checked && index === -1)
allActive.push(value);
activateClasses();
});
});
var repayment = function() {
};
window.onload = function() {
document.repaymentcalc.homevalue.onchange = repayment;
document.repaymentcalc.loanamount.onchange = repayment;
document.repaymentcalc.numberpayments.onchange = function() {
$('#years').html(this.value + ' years');
};
makeSomething();
};
function makeSomething() {
$('tbody tr').each(function(idx, row) {
var $row = $(row);
var initialRateCell = $row.find('td')[2];
var repaymentCell = $row.find('td').last()
var rate = parseFloat($(initialRateCell).html());
var repaymentVal = computeRepayment(rate);
$(repaymentCell).html(repaymentVal.repayment);
});
}
$("#myForm :input").change(function() {
makeSomething();
});
function computeRepayment(rate) {
var x = parseInt(document.repaymentcalc.loanamount.value, 10);
var y = parseInt(rate * 100, 10) / 120000;
var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
var h = parseInt(document.repaymentcalc.homevalue.value, 10);
var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);
var loantovalue = x / h * 100;
var year = z / 12;
return {
repayment: repayment.toFixed(2),
loantovalue: loantovalue,
year: year
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="type">
<p id="Mortgage Type">Mortgage Type</p>
<input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed
<br>
<input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed
<br>
<input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed
<br>
<input type="checkbox" name="type" value="t9" id="t9" />Tracker
<br>
<input type="checkbox" name="type" value="t1" id="t1" checked/>All
<br>
</section>
<section id="fee">
<p id="Fee">Fee</p>
<input type="checkbox" name="fee" value="f2" id="f2" />Fee
<br>
<input type="checkbox" name="fee" value="f3" id="f3" />No Fee
<br>
<input type="checkbox" name="fee" value="f1" id="f1" checked/>All
<br>
</section>
<form name="repaymentcalc" id="myForm" action="">
</br>
<p>
Home Value £
<input type="number" id="homevalue" value="250000" style="width: 75px">
</p>
<p>
Loan Amount £
<input type="number" id="loanamount" value="200000" style="width: 75px">
</p>
Term
<input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">
<div id="years" style="display:inline-block;">25 years</div>
<p>
<div id="ltv">Loan to Value: 80.0%</div>
</div>
</form>
<br>
<div id="mortgagediv">
<table id="mortgagetable">
<thead>
<tr class="productheader">
<th class="lender">Lender</th>
<th class="type">Type</th>
<th class="inititalrate">Initial Rate (%)</th>
<th class="svr">SVR (%)</th>
<th class="apr">Overall APR (%)</th>
<th class="fee">Fee (£)</th>
<th class="ltv">LTV (%)</th>
<th class="repayment">Monthly Repayment (£)</th>
</tr>
</thead>
<tbody>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t2">2yr Fixed</td>
<td class="tg-031e">1.64</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">70</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t3">3yr Fixed</td>
<td class="tg-031e">1.69</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">75</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t5">5yr Fixed</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t9">Tracker</td>
<td class="tg-031e">1.64</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f3"></td>
<td class="tg-031e">70</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t2">2yr Fixed</td>
<td class="tg-031e">1.69</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">75</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t3">3yr Fixed</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t5">5yr Fixed</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
<tr class="product">
<td class="tg-031e">Nationwide</td>
<td class="t1 t9">Tracker</td>
<td class="tg-031e">1.79</td>
<td class="tg-031e">3.99</td>
<td class="tg-031e">3.40</td>
<td class="f1 f2">999</td>
<td class="tg-031e">80</td>
<td class="tg-031e"></td>
</tr>
</tbody>
</table>
</div>
Make better use of variables as well, as your code is very heavy. For example, instead of letting jQuery compile a list of all the tds in your document every time, assign it to a global variable. If td should be added dynamically, only update this global variable when new ones are added. That means the jQuery object already exists and there is no time involved in recompiling it, speeding up your code. At the moment that makes little difference, but once your list becomes long enough you will feel some slowdown. I'm also very sure that classes are maybe not your best option here. Maybe data- attributes are better suited, so your tr looks like this:
<tr data-lender="nationwide" data-type="2-years-fixed" data-rate="1.64" data-svr="1.5" /* ... and so on ...*/ ></tr>
The reason you'd want to do that is because this is much more legible than your arbitrary classes - you will get lost in the arbitrary classes you used as they are in no way obvious. Which is more obvious: 'show me a lender with tg-031e f1 f2' or 'Show me a lender with 2-years-fixed type'? (I know its not correct, they aren't saying the same thing, but that's only because I am already getting lost in the technical terms.) Think of the developer that might come after you, and the headache you will be creating. Don't be afraid to use a couple more characters if it makes things more obvious to read, as it will save you a boatload of time in the long run.

Radio Button Value Calculation. The forth choice will not sum

Fellas,
I have a javscript that calculates values defined in radio buttons. For a reason I can not figure out why the script skips a group. Its seems that the skipped group (by skipped I mean the selected value does not get added) correlates with the amount of radio buttons being used in each group.
I have been pulling my hair out on this one..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function setRadios()
{
function sumRadios(){
var total = 0, i = 0, oForm = this.form, e, len, j, c;
while(e=oForm.elements[i++]){
//This is probably the issue - Maybe it would be easier to manually define the names verses detecting them incrementally.
if(e.name.match(/^m4j-\d/)){
c=document.getElementsByName(e.name);
for(j=0;j<c.length;j++){
c[j].checked?total+=Number(c[j].value):null;
i++;
}
}
}
// Defines the field that totals the selections
oForm.elements['m4j-65'].value = total.toFixed(0);
}
// Must define form name "m4jFrom"
var i = 0, input, inputs = document.getElementById('m4jForm').getElementsByTagName('input');
while (input = inputs.item(i++))
// This executes the sum onclick
if (input.name.match(/^m4j-\d/))
input.onclick = sumRadios;
}
onload = setRadios;
</script>
<style type="text/css"></style>
</head>
<body>
<form id="m4jForm" name="m4jForm" method="post" enctype="multipart/form-data" action="">
<table border="0" align="left" cellpadding="11" cellspacing="11" class="m4j_form_table">
<tbody>
<tr id="m4je-57" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-57-0" name="m4j-57" value="1" >
</input> 1 </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-57-1" name="m4j-57" value="2" >
</input>
2 </td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-61" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-61-0" name="m4j-62" value="1" >
</input>
1 </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-61-1" name="m4j-62" value="2" >
</input>
2 </td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-62" >
<td colspan="2" align="left" valign="top"><table border="3" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-62-0" name="m4j-63" value="1" >
</input>
1 No Calculation </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-62-1" name="m4j-63" value="2" >
</input>
2 if you remove this table the non calculation will move to the radios below</td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-63" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><div class="m4jSelectItem m4jSelectItemVertical">
<input class="m4jRadio" type="radio" id="m4j-63-0" name="m4j-64" value="1" >
</input>
1 </div></td>
</tr>
<tr>
<td align="left" valign="top"><div class="m4jSelectItem m4jSelectItemVertical">
<input class="m4jRadio" type="radio" id="m4j-63-1" name="m4j-64" value="2" >
</input>
2 </div></td>
</tr>
</tbody>
</table>
</div>
</div></td>
</tr>
<tr id="m4je-65" >
<td width="300" align="left" valign="top" >Total</td>
<td width="0px;" align="left" valign="top" >
<input class="m4jInputField" style="width: 100%;" id="m4j-65" name="m4j-65" type="text" size="18" maxlength="60" value= "" alt="" ></input><br>
<input type="submit" name="submit" value="send" class ="m4j_submit" >
</input>
<input id="m4jResetButton" class ="m4j_reset" type="reset" name="reset" value="reset">
</input>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

I found the solution. I owe the board the info. I hope someone gets use out of it. :)
<script type="text/javascript">
function setRadios()
{
var inputs = document.getElementById('m4jForm').getElementsByClassName('m4jRadio');
function sumRadios(){
var total = 0,
oForm = this.form;
for(var x = 0; x < inputs.length; x++){
if (inputs[x].checked) total += parseInt(inputs[x].value);
}
// Defines the field that totals the selections
oForm.elements['m4j-65'].value = total.toFixed(0);
}
for(var y = 0; y < inputs.length; y++){
inputs[y].onclick = sumRadios;
}
}
onload = setRadios;
</script>

Categories

Resources