I want to multiply the quantity by price and 'display' in total. Total needs to be named "amount" in order to transfer the total cost to the gateway. As you can see I'm trying to create a get around to be able to use quantity.
All information here is for test purposes so isn't personal.
<script type="text/javascript">
function totalprice() {
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (qty * price);
document.getElementById("tot").value = total;
}
</script>
<form action="https://gateway.charityclear.com/hosted/" method="post">
<input type="hidden" name="merchantID" value="0000992">
<input type="hidden" name="countryCode" value="826">
<input type="hidden" name="currencyCode" value="826">
<table>
<tr>
<td>Full Name </td><td><input type="text" name="customerName" value=></td></tr>
<tr>
<td>Full Shipping Address <br>(including Country)<br>(must be same as billing address)</td><td><textarea rows="4" name="customerAddress" value=></textarea></td></tr>
<tr>
<td>Post Code </td><td><input type="text" name="customerPostCode" value=></td> </tr>
<tr>
<td>Email Address </td><td><input type="text" name="customerEmail" value=></td> </tr>
<tr>
<td>Phone Number <br>(required for delivery)</td><td><input type="text" name="customerPhone" value=></td></tr>
<input type="hidden" name="redirectURL" value="http://www.UKRobstep.com/order- successful.html">
<tr><td></td>
</tr>
<tr><td><input type="hidden" name="orderRef" value="Colour">Colour</td>
<td>
<select name="orderRef">
<option value="Select a Colour">Select a Colour
<option value=" Robin M1 in Black">Black
<option value=" Robin M1 in White "> White
<option value=" Robin M1 in Red"> Red
<option value=" Robin M1 in Yellow ">Yellow
<option value=" Robin M1 in Silver/Grey "> Silver/Grey
</select></td>
</tr>
<tr><td>
Quantity</td><td><input type="text" name="quantity" id="quantity" class="field" value="1" /></td></tr>
<tr><td>Price Per Unit</td><td><input type="text" name="price" id="price" class="field" value="£2199.99" readonly="readonly"/>
<input type="hidden" name="amount" id="tot" class="field" value=""/>
</td></tr>
</table>
<INPUT TYPE="image" SRC="http://www.weebly.com/uploads/9/8/2/8/9828047/5792561_orig.png" BORDER="0" ALT="Pay Now" >
</form>
I hope someone can help, Thanks in advance.
use parseInt();
Example
function totalprice()
{
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (parseInt(qty) * price);
-------------^^^^^^^^^--------------
document.getElementById("tot").value = total;
}
Are you just trying a way to get value after user enters quantity? I'm not sure what you mean by "get around". Here's a way of returning value after enter key is pressed.
<script>
function totalprice() {
var KeyID = event.keyCode;
if(KeyID == 13){
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (qty * price);
document.getElementById("tot").value = total;
alert(total);
}
else{
}
}
</script>
<form action="https://gateway.charityclear.com/hosted/" method="post">
<input type="hidden" name="merchantID" value="0000992">
<input type="hidden" name="countryCode" value="826">
<input type="hidden" name="currencyCode" value="826">
<table>
<tr>
<td>Full Name </td><td><input type="text" name="customerName" value=></td></tr>
<tr>
<td>Full Shipping Address <br>(including Country)<br>(must be same as billing
address)</td><td><textarea rows="4" name="customerAddress" value=></textarea></td>
</tr>
<tr>
<td>Post Code </td><td><input type="text" name="customerPostCode" value=></td>
</tr>
<tr>
<td>Email Address </td><td><input type="text" name="customerEmail" value=></td> </tr>
<tr>
<td>Phone Number <br>(required for delivery)</td><td><input type="text"
name="customerPhone" value=></td></tr>
<input type="hidden" name="redirectURL" value="http://www.UKRobstep.com/order-
successful.html">
<tr><td></td>
</tr>
<tr><td><input type="hidden" name="orderRef" value="Colour">Colour</td>
<td>
<select name="orderRef">
<option value="Select a Colour">Select a Colour
<option value=" Robin M1 in Black">Black
<option value=" Robin M1 in White "> White
<option value=" Robin M1 in Red"> Red
<option value=" Robin M1 in Yellow ">Yellow
<option value=" Robin M1 in Silver/Grey "> Silver/Grey
</select></td>
</tr>
<tr><td>
Quantity</td><td><input type="text" name="quantity" id="quantity" class="field"
value="1" onkeydown="return totalprice(this, event);" /></td></tr>
<tr><td>Price Per Unit</td><td><input type="text" name="price" id="price"
class="field" value="£2199.99" readonly="readonly"/>
<input type="hidden" name="amount" id="tot" class="field" value=""/>
</td></tr>
</table><INPUT TYPE="image"
SRC="http://www.weebly.com/uploads/9/8/2/8/9828047/5792561_orig.png" BORDER="0"
ALT="Pay Now" > </form>
Related
In the reserved area I wish to show errors that will show up if something doesn't go right with input. One prerequisite I have is that there must be some value within first name. If there is no value, within reserved should show "Name must be filled out".
As of right now I have an alert that shows up if the name is not filled out.
How can I make my errors be posted within the "Reserved" section?
JS:
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
return false;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
<script src='javascript/myscript.js' type='text/javascript'></script>
</head>
<body>
<form name="application" id="application" method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" onsubmit="return validateForm();">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png" alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix">
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
<table>
<tr>
<td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus" ></td>
</tr>
<tr>
<td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
</tr>
<tr>
<td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" placeholder="MMMYYYY" maxlength="7"></td>
</tr>
<tr>
<td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
</tr>
<tr>
<td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
</tr>
</table>
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
<table>
<tr>
<td>Home Address*</td>
<td>Apt.</td>
</tr>
<tr>
<td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
<td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
</tr>
<tr>
<td><br />City* </td>
</tr>
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40">
</tr>
<tr>
<td><br />Province*</td>
<td><br />Postal Code</td>
</tr>
<tr>
<td>
<select id="province" name="province" size="2">
<optgroup label="Province">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</td>
<td>
<input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
</td>
</tr>
</table>
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
<table>
<tr>
<td>Do you:</td>
<td>$Monthly Payment* </td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>
<td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
</tr>
<tr>
<td>Monthly Income*</td>
<td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
</tr>
<tr>
<td>Years at current location*</td>
<td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Pre-authorized Code*</td>
<td><input type="text" name="preCode" id="preCode" size="8"></td>
</tr>
</table>
</fieldset>
</aside>
</div>
<div class="clearfix">
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
<script>document.write</script>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
<p><b>I consent to have a credit check performed</b></p>
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No
<br />
<p><b>I consent to have email messages sent to me</b></p>
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on:
<script>
var d = new Date();
document.write(d.toDateString());
</script>
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
Option 1:
You can use the "required" property on your input.
Option 2:
1- Create a div with style="display:none" where ever you like in your dom and assign an ID to that div. IE:
<div id="err1" style="display:none"></div>
2- In your javascript, on error:
if (x == null || x == "")
{
var errDiv = document.getElementById("err1");
errDiv.innerHTML = "Please fill input";
errDiv.style.display = 'block';
return false;
}
If I understand you correctly, just add a <span> element to your <section class="s">. Give the span an id like 'err_log' or just 'err' and use this to output the error
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
document.getElementById('youridofthespan').innerHTML='Name must be filled out';
return false;
}else{
document.getElementById('youridofthespan').innerHTML='';
}
}
If you want to show and delete multiple errors, you can simply create on span for every error and do above to use them.
Hope this helps :)
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
Newbie in jquery, need some help with this description.
Suppose, I have 1 textbox that contain the result of Addition of another 2 textbox's.
<input type="text class="tb1">
<input type="text class="tb2">
<input type="text class="result" id="result1">
like this.
Suppose I have 5 textbox's that contain their individual 2 textbox's addition results.
Each Result textbox generate result automatically using jquery script.
So, I have 5 result textbox's with their respective addition result.
Now, I want to sum of the values in all 5 result texbox's again in another textbox when i click on checkbox automatically by using jquery or javascript script.
How can I achive this task ?
refer image for understanding of question.
http://i.stack.imgur.com/iFF46.jpg
Assuming that the number 5 of the text boxes remains the same here is a solution for your problem. ( Without validations )
$("#add").click(function() {
$("#result1").val(parseInt($("#box1").val()) + parseInt($("#box2").val()));
$("#result2").val(parseInt($("#box3").val()) + parseInt($("#box4").val()));
$("#result3").val(parseInt($("#box5").val()) + parseInt($("#box6").val()));
$("#result4").val(parseInt($("#box7").val()) + parseInt($("#box8").val()));
$("#result5").val(parseInt($("#box9").val()) + parseInt($("#box10").val()));
});
$( "#final-check" ).change(function() {
var finalResult = 0;
for (var i = 1; i <= 5; i++) {
finalResult = finalResult + parseInt($("#result" + i).val());
}
$("#final-result").val(finalResult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" id="box1">
</td>
<td>+</td>
<td>
<input type="text" id="box2">
</td>
<td>=</td>
<td>
<input type="text" id="result1">
</td>
</tr>
<tr>
<td>
<input type="text" id="box3">
</td>
<td>+</td>
<td>
<input type="text" id="box4">
</td>
<td>=</td>
<td>
<input type="text" id="result2">
</td>
</tr>
<tr>
<td>
<input type="text" id="box5">
</td>
<td>+</td>
<td>
<input type="text" id="box6">
</td>
<td>=</td>
<td>
<input type="text" id="result3">
</td>
</tr>
<tr>
<td>
<input type="text" id="box7">
</td>
<td>+</td>
<td>
<input type="text" id="box8">
</td>
<td>=</td>
<td>
<input type="text" id="result4">
</td>
</tr>
<tr>
<td>
<input type="text" id="box9">
</td>
<td>+</td>
<td>
<input type="text" id="box10">
</td>
<td>=</td>
<td>
<input type="text" id="result5">
</td>
</tr>
</table>
<button id="add">add</button>
<input type="text" id="final-result">
<input type="checkbox" id="final-check">
You can add any number of text boxes and get your results.
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" id="mainTotBox" value="0">
</div>
$(".textBox").on("change", function(){
var total = 0;
var thisInput = this;
$(this).closest("div").find("input[class='textBox']").each(function(index, inputEle){
total += window.parseInt($(inputEle).val());
$(thisInput).closest("div").find(".resultBox").val(total);
});
var mainTot = 0;
$(".resultBox").each(function(index, inputEle){
mainTot += window.parseInt($(inputEle).val());
});
$("#mainTotBox").val(mainTot);
});
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="result" id="result">
<script>
var result=0;
// Loop thru each input field that has class tb, take its numeric value
// and add it to result
function AddEmUp()
{
$("input.tb").each(
function()
{
result=result+Number( $(this).val() );
});
// Display the result in input box with id=result
$("#result").val( result);
}
// Execute AddEmUp when any one of the input fields with class tb is clicked
$("input.tb").click( AddEmUp );
</result>
Been working on the Javascript for this HTML5 piece but I can't get the Fed Taxes or the Gross total to come up correctly. I'm think it may be something to do with my radio buttons. Any help would be wonderful. I'm new to this so please try to keep answers in layman's terms.
<!HTML>
<html>
<head>
<title> Payroll Calculator </title>
<script language="javascript">
function Calc()
{
var hour, pay, status, kids, gross, tax, net;
hour = parseFloat(document.payroll.Hours.value);
pay = parseFloat(document.payroll.PayRate.value);
gross = parseFloat (hour * pay);
document.payroll.GrossPay.value = gross.toFixed(2);
kids = parseFloat(document.payroll.Dependents.value);
status = parseFloat(document.payroll.Marital.value);
tax = parseFloat (gross * status) - kids;
document.payroll.FedTaxes.value = tax.toFixed(2);
net = parseFloat (gross - tax);
document.payroll.NetPay.value = net.toFixed(2);
}
</script>
</head>
<body>
<form name="payroll">
<table bgcolor="grey" cellpadding="0">
<tr><td colspan="2" align="center"><b>Payroll Calculator<b></td></tr>
<tr><td><label for="name"> Name: </label></td>
<td><input type="text" name="name"></td></tr>
<tr><td><label for="Hours"> Hours: </label></td>
<td><input type="text" name="Hours"> 99.9 </td></tr>
<tr><td><label for="PayRate"> Pay Rate: </label></td>
<td><input type="text" name="PayRate"> 99.99 </td></tr>
<tr><td colspan="2"> Marital Status:
<input type="radio" value=".30" name="Marital" checked> Single
<input type="radio" value=".20" name="Marital"> Married </td></tr>
<tr><td> Dependents: </td><td>
<select name="Dependents">
<option value="10"> 1 </option>
<option value="20"> 2 </option>
<option value="30"> 3 </option>
<option value="40"> 4 </option>
<option value="50"> 5 </option>
</select></td></tr>
<tr><td><label for="GrossPay"> Gross Pay: </label></td>
<td><input type="text" name="GrossPay" readonly></td></tr>
<tr><td><label for="FedTaxes"> Fed Taxes: </label></td>
<td><input type="text" name="FedTaxes" readonly></td></tr>
<tr><td><label for="NetPay"> Net Pay: </label></td>
<td><input type="text" name="NetPay" readonly></td></tr>
<tr><td colspan="2" align="center"><input type="button" value="Calculate" onclick="Calc()">
<input type="reset" value="Clear"></td></tr>
</form>
</table>
</body>
</html>
for get the value of selected radio you'll need to check which one is checked and get their value.
So you can calculate status var with the following:
status = parseFloat(document.payroll.Marital[0].checked ? document.payroll.Marital[0].value : document.payroll.Marital[1].value);
You can check here: http://jsbin.com/yekadohu/1/
Regards!
I'm working on a project that is based on an Excel spreadsheet, where I need to calculate budgets, etc. There are various categories in my table, and I need to calculate the subtotal of each category. Here's a screenshot to make it more clear:
http://i.imgur.com/loyLbW7.png
My problem is, I'm not sure how to calculate the subtoal for each category. Right now, I have $('.subcat100 .budget').each(function(). The class "subcat100" is attached to the tr and changes for each category section (subcat100, subcat200, subcat300, etc.). The numerical value is based off the sub category number stored in database. How would I pull all of these classes and iterate through them?
jQuery:
$(document).ready(function() {
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
var decimal = budget.toFixed(2);
$row.find('.budget').val(decimal);
var sum = 0;
$('.subcat100 .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat100 .budgetsubtotal').val(sum);
});
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
HTML:
<table>
<tbody>
<tr class="subcat100">
<td>
<span name="txtItemCode[]"><strong>100</strong></span>
</td>
<td colspan="7">
<span name="txtSubCategoryName[]" class="100"><strong>Land Purchase Costs</strong></span>
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="101">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Purchase price">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="1">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="299.99">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="299.99">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="249.99">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="50.00">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="110">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Realtor's fees">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="120">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Due diligence">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="15">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="45.00">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="675.00">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="700.00">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="-25.00">
</td>
</tr>
<tr class="subcat100">
<td colspan="5">
<span><strong>Subtotal</strong></span>
</td>
<td>
<input type="text" name="txtSubTotalBudget[]" class="budgetsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalActual[]" class="actualsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalDifference[]" class="differencesubtotal" size="10" readonly="readonly" value="">
</td>
</tr>
</tbody>
</table>
Well, I ended up doing this:
var itemcodes = <?php echo json_encode($arrItemCodes);?>;
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
$row.find('.budget').val(budget.toFixed(2));
$.each(itemcodes, function(intIndex, objValue) {
var sum = 0;
$('.subcat' + objValue + ' .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat' + objValue + ' .budgetsubtotal').val(sum.toFixed(2));
});
});
Open to other suggestions!