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!
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 :)
I have a form where you can chose if customer pay taxes or not, if we give discount, default price, price after discount, price after taxes and total price.
Here is what I have:
<table width="339" border="0" cellpadding="0">
<tr>
<td width="98">Taxes</td>
<td width="115">Discount</td>
<td width="118">Default price</td>
</tr>
<tr>
<td>
<select class="select" name="taxes">
<option value="no" selected>no taxes</option>
<option value="yes">19% taxes</option>
</select>
</td>
<td>
<select class="select" name="discount" onChange="updateInput()">
<option value="5" selected>5% discount</option>
<option value="10">10% discount</option>
<option value="20">20% discount</option>
</select>
</td>
<td>
<input type="text" class="input140" name="cost" id="cost" value="1000">
</td>
</tr>
<tr>
<td>Price after discount</td>
<td>Taxes</td>
<td>Total Price to pay</td>
</tr>
<tr>
<td>
<input type="text" name="price" value="">
</td>
<td>
<input type="text" name="taxes" value="0">
</td>
<td>
<input type="text" name="total" value="0">
</td>
</tr>
</table>
<script>
function updateInput() {
var discount = document.getElementsByName("discount")[0].value;
var cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
}
</script>
I am trying to make this form to work but if I repeat the javascript used it does not work.
Here is the demo Fiddle
https://jsfiddle.net/nte6xqdv/6/
We have the default price 1.000 working fine, if we add discount to customer it changed fine to price after discount
BUT
If I select yes to taxes 19% it does mot change anything and the total price to pay after discount plus taxes is not working neither. Any idea?
Your code is almost fine, just requires some little fixes : you were using the same name for the select "taxes" and the input "taxes" (now "ttaxes"), you assigned the value "yes" to the tax (I changed it by 19), finally, copy-pasted your own code to calculate discount (used to calculate taxes). Now you have only one thing to do : calculate the sum of both (total price). Here it is, the changes are pointed by commented arrows :
<html>
<body>
<table width="339" border="0" cellpadding="0">
<tr>
<td width="98">Taxes</td>
<td width="115">Discount</td>
<td width="118">Default price</td>
</tr>
<tr>
<td><select class="select" name="taxes" onChange="updateInput()">
<option value="no" selected>no taxes</option>
<option value="19">19% taxes</option> <!-- <====================== -->
</select></td>
<td><select class="select" name="discount" onChange="updateInput()">
<option value="5" selected>5% discount</option>
<option value="10">10% discount</option>
<option value="20">20% discount</option>
</select></td>
<td><input type="text" class="input140" name="cost" id="cost" value="1000"></td>
</tr>
<tr>
<td>Price after discount</td>
<td>Taxes</td>
<td>Total Price to pay</td>
</tr>
<tr>
<td><input type="text" name="price" value=""></td>
<td><input type="text" name="ttaxes" value="0"></td> <!-- <====================== -->
<td><input type="text" name="total" value="0"></td>
</tr>
</table>
<script type="text/javascript">
function updateInput(){
var discount = document.getElementsByName("discount")[0].value;
var cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
var taxes = document.getElementsByName("taxes")[0].value; // <======================
if ( isNaN( taxes ) ) // IF "no taxes" IS SELECTED...
document.getElementsByName("ttaxes")[0].value = 0;
else { cost = document.getElementsByName("cost")[0].value;
document.getElementsByName("ttaxes")[0].value = (cost * (taxes / 100));
}
document.getElementsByName("total")[0].value =
parseFloat( document.getElementsByName("price")[0].value ) +
parseFloat( document.getElementsByName("ttaxes")[0].value );
}
</script>
</body>
</html>
Trying to take my "Room Type" drop down and convert the values to be used in the form oninput formula. However, I'm having no luck finding anywhere that details the structure of a select box.
<form oninput="total.value = (nights.valueAsNumber * rmtp.valueAsNumber) +
((guests.valueAsNumber) * 10)">
<TABLE class="Internal Info" align="center">
<TR>
<TD><label>Full name:</label></TD>
<TD><input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required></TD>
</TR>
<TR><TD>
<label>Email address:</label></TD>
<TD> <input type="email" id="email_addr" name="email_addr" required></TD></TR>
<TR>
<TD><label>Repeat email address:</label></TD>
<TD><input type="email" id="email_addr_repeat" name="email_addr_repeat" required
oninput="check(this)"></TD>
</TR>
<TR><TD><label>Arrival date:</label></TD>
<TD> <input type="date" id="arrival_dt" name="arrival_dt" required></TD></TR>
<TR>
<TD><label>Number of nights :</label></TD>
<TD><input type="number" id="nights" name="nights" value="1" min="1" max="30" required></TD>
</TR>
<TR>
<TD><label>Room Type</label></TD>
<TD><select name="rmtp" required>
<option value="80">Standard($80/N)</option>
<option value="90">Superior($90/N)</option>
<option value="110">Deluxe($110/N)</option>
<option value="130">Family($130/N)</option>
<option value="120">Riviera Suite($120/N)</option>
<option value="199">Honeymoon Package($199/N)</option>
</select>
</TD>
</TR>
<TR><TD><label>Number of additional guests (two guests included at the base price; each additional guest adds $10.00 per night):</label></TD>
<TD><input type="number" id="guests" name="guests" value="0" min="0" max="4" required></TD></TR>
<TR>
<TD><label>Estimated total:</label></TD>
<TD> $<output id="total" name="total">80</output>.00</TD>
</TR>
<TR>
<TD><label>Promo code:</label></TD>
<TD><input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}"
title="Promo codes consist of 6 alphanumeric characters."></TD></TR></TABLE>
<br />
</form>
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Change you oninput to total.value = (parseInt(nights.value) * parseInt(rmtp.value)) + ((parseInt(guests.value)) * 10).
Not all browsers support .valueAsNumber. Check the browser support table about halfway down the page here: http://html5doctor.com/the-output-element/. The page in general gives a few good examples of oninput and the output element.
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>
<form name="cost">
<table border="1">
<tr>
<td>Cost</td>
<td><input type="text" name="cost" /></td>
</tr>
<tr>
<td>Discount</td>
<td><input type="text" name="discount" /> (<span id="discount2"></span>)%</td>
</tr>
<tr>
<td>Net Cost</td>
<td><input type="text" name="net" /></td>
</tr>
</table>
</form>
Hello guys,
I really need a help of javascript programming. The process of the form are:
Put a number of in Cost
Then put a number of discount (auto calculates span#discount2=cost*discount/100)
Net cost auto update = Cost-Discount
I tried many times but have no luck plus lack of javascript knowledge. Please help.
First, create a function to do that
function calculateDiscount()
{
var cost = document.getElementById('cost').value;
var discount = document.getElementById('discount').value;
//do the math
var net = cost-discount;
//update
document.getElementById('discount2').innerHTML = cost*(discount/100);
document.getElementById('net').value = net;
}
You'll also need to update your html, to add ID's to all elements and also call the function
<form name="cost">
<table border="1">
<tr><td>Cost</td><td><input type="text" id="cost" name="cost" onChange="calculateDiscount(); return false;" /></td></tr>
<tr><td>Discount</td><td><input onChange="calculateDiscount(); return false;" type="text" id="discount" name="discount" /> (<span id="discount2"></span>)%</td></tr>
<tr><td>Net Cost</td><td><input type="text" name="net" id="net" /></td></tr>
</table>
</form>