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>
Related
How can I make my drop down selections change my total by they're values but not be calculated unless selected?
Here is what I got. Any help will be much appreciated.
I would like the dropdown for 4PC to do no change
6PC would add 2.00 to the price and 12PC would add 4.00
I'm not sure what I'm doing wrong, can someone please point it out to me thanks.
Here is my code for the table
function multiply() {
a = Number(document.getElementById('QTY').value);
b = Number(document.getElementById('PPRICE').value);
c = Number(document.getElementById('4PC').value);
d = Number(document.getElementById('4PCM').value);
e = Number(document.getElementById('6PC').value);
f = Number(document.getElementById('6PCM').value);
g = Number(document.getElementById('12PC').value);
h = Number(document.getElementById('12PCM').value);
i = a * b + c * d + e * f + g * h;
j = Number(document.getElementById('SALESTAX').value);
k = i * j;
l = Number(document.getElementById('TAXDIV').value);
m = k / l;
n = i + m;
document.getElementById('SUBTOTAL').value = i;
document.getElementById('TAX').value = m;
document.getElementById('TOTAL').value = n;
}
<table>
<tr style="background-color:black; color:white" >
<th>Menu Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Preferance</th>
</tr>
<tr>
<td>Boneless Chicken Wings</td>
<td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" /></td>
<td><input type="text" name="PPRICE" id="PPRICE" value="5.99" disabled="disabled" readonly/></td>
</td>
<td>
<form action="/action_page.php">
<select id="BONELESS_COUNT">
<option value="0.00" name="4PC" id="4PC">4 Piece $5.99</option>
<option value="2.00" name="6PC" id="6PC">6 Piece $7.99</option>
<option value="4.00" name="12PC" id="12PC">12 Piece $9.99</option>
</select>
<select name="Preparation">
<option value="Baked">Baked</option>
<option value="Fried">Fried</option>
</select>
<select name="Flavor">
<option>Original</option>
<option>Buffalo</option>
<option>Parmesian</option>
<option>Lemon Pepper</option>
<option>BBQ</option>
</select>
</form>
</td>
</tr>
<tr>
<td></td>
<td><input type="text" name="4PCM" id="4PCM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="6PCM" id="6PCM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="12PCM" id="12PCM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="TAXDIV" id="TAXDIV" value="100" disabled="disabled" style="display:none"readonly/></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Subtotal $</strong></td>
<td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" style="display:none"><strong>Salestax</strong></td>
<td><input type="text"name="SALESTAX" id="SALESTAX" value="11" disabled="disabled" style="display:none" readonly/></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Tax $</strong></td>
<td><input type="text" name="TAX" id="TAX" /></td>
<td></td>
</tr>
<td></td>
<td></td>
<tr>
<td></td>
<td align="right"><strong>Total $</strong></td>
<td><input type="text" name="TOTAL" id="TOTAL"></td>
<td></td>
</tr>
</table>
It is not entirely clear from your question and your code what you are asking for (it is generally advised to provide a Minimal, Complete, and Verifiable example to elicit good answers on stackoverflow).
It appears that you want to know how to make your program respond to changes in a dropdown, so I will try to answer that with a simpler example than your code.
First, changes to <select> dropdowns trigger the onchange event, so you want to attach an event listener that responds to this.
Second, getting the selected value from a <select> dropdown is somewhat more involved than getting the current value from an <input> element: You need to access the .selectedIndex attribute to get the index number of the currently selected option, then access the correct index from the .options attribute of the dropdown.
The code snippet below demonstrates a simpler example of this in action. If you make changes to the 'Quantity' input or make a choice in the dropdown, this triggers the update() function, which updates the total.
function update() {
var total = document.getElementById('TOTAL'),
qty = document.getElementById('QTY'),
choice = document.getElementById('ITEM');
total.value = (choice.options[choice.selectedIndex].value * qty.value)
.toFixed(2);
}
th{text-align: left;}
<table>
<tr>
<th>Choose item</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>
<select id="ITEM" onkeyup="update()" onchange="update()">
<option value="5.99" name="4PC" id="4PC">4 Piece $5.99</option>
<option value="7.99" name="6PC" id="6PC">6 Piece $7.99</option>
<option value="9.99" name="12PC" id="12PC">12 Piece $9.99</option>
</select>
</td>
<td>
<input type="text" id="QTY" onkeyup="update()" />
</td>
<td>
<input type="text"id="TOTAL">
</td>
</tr>
</table>
When I just put in a quantity everything works as it should and rounds the .values to 2 decimal places but when I select a option in my drop down selector for lets says 6 Piece $7.99 it no longer displays the .value as 2 decimal places. Can anyone help me make my values for Tax and Total display 2 decimal places when a option is selected for a wing count?
I've already tried to add .toFixed(2) to the total and tax.value in my update() function in my script.
<table>
<tr style="background-color:black; color:white" >
<th>Menu Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Preferance</th>
</tr>
<tr>
<td>Boneless Chicken Wings</td>
<td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" /></td>
<td><input type="text" name="PPRICE" id="PPRICE" value="5.99" disabled="disabled" readonly/></td>
</td>
<td>
<form action="/action_page.php">
<select id="BONELESS_COUNT" onkeyup="update()" onchange="update()">
<option value="0.00" name="4PCBL" id="4PCBL">4 Piece $5.99</option>
<option value="2.00" name="6PCBL" id="6PCBL">6 Piece $7.99</option>
<option value="4.00" name="12PCBL" id="12PCBL">12 Piece $9.99</option>
</select>
<select name="Preparation">
<option value="Baked">Baked</option>
<option value="Fried">Fried</option>
</select>
<select name="Flavor">
<option>Original</option>
<option>Buffalo</option>
<option>Parmesian</option>
<option>Lemon Pepper</option>
<option>BBQ</option>
</select>
</form>
</td>
</tr>
<tr>
<td></td>
<td><input type="text" name="4PCBLM" id="4PCBLM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="6PCBLM" id="6PCBLM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="12PCBLM" id="12PCBLM" value="1" disabled="disabled" style="display:none"readonly/></td>
<td><input type="text" name="TAXDIV" id="TAXDIV" value="100" disabled="disabled" style="display:none"readonly/></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Subtotal $</strong></td>
<td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" style="display:none"><strong>Salestax</strong></td>
<td><input type="text"name="SALESTAX" id="SALESTAX" value="11" disabled="disabled" style="display:none" readonly/></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Tax $</strong></td>
<td><input type="text" name="TAX" id="TAX" /></td>
<td></td>
</tr>
<td></td>
<td></td>
<tr>
<td></td>
<td align="right"><strong>Total $</strong></td>
<td><input type="text" name="TOTAL" id="TOTAL"></td>
<td></td>
</tr>
function multiply() {
a = Number(document.getElementById('QTY').value);
b = Number(document.getElementById('PPRICE').value);
c = Number(document.getElementById('4PCBL').value);
d = Number(document.getElementById('4PCBLM').value);
e = Number(document.getElementById('6PCBL').value);
f = Number(document.getElementById('6PCBLM').value);
g = Number(document.getElementById('12PCBL').value);
h = Number(document.getElementById('12PCBLM').value);
i = a * b;
j = Number(document.getElementById('SALESTAX').value);
k = i * j;
l = Number(document.getElementById('TAXDIV').value);
m = k / l;
n = i + m;
document.getElementById('SUBTOTAL').value = i.toFixed(2);
document.getElementById('TAX').value = m.toFixed(2);
document.getElementById('TOTAL').value = n.toFixed(2);
}
function update() {
var pprice = document.getElementById("PPRICE")
var subtotal = document.getElementById("SUBTOTAL")
var tax = document.getElementById("TAX")
var total = document.getElementById("TOTAL")
qty = document.getElementById("QTY")
choice = document.getElementById("BONELESS_COUNT")
pprice.value = b + (choice.options[choice.selectedIndex].value * QTY.value)
subtotal.value = i + (choice.options[choice.selectedIndex].value * QTY.value)
tax.value = (subtotal.value * j) / l
total.value = (b + (choice.options[choice.selectedIndex].value * QTY.value)) * j / l + (b + (choice.options[choice.selectedIndex].value * QTY.value))
}
It looks like you forgot to also use .toFixed(2) in your update function, i.e.
tax.value = ((subtotal.value * j) / l).toFixed(2)
total.value = ((b + (choice.options[choice.selectedIndex].value * QTY.value)) * j / l + (b + (choice.options[choice.selectedIndex].value * QTY.value))).toFixed(2)
You could greatly simplify your code down to just this. Notice that giving variables proper names rather than "a, b, c.." makes things much easier to understand and will help you a lot when you're trying to figure out why things aren't working.
Also, you really want to declare variables with let (if the value may change later), or const (if the value will never change). Note that each time update() gets called, the const variables there get recreated since they are scoped inside of the function. The values they hold never get changed within the function, so they can be const.
Without using let or const you are creating global variables which will cause you a lot of problems.
// I am prepending $ to variable names to remind me that these are HTML elements
const $qty = document.getElementById("QTY");
const $choice = document.getElementById("BONELESS_COUNT");
const $subtotal = document.getElementById("SUBTOTAL");
const $pprice = document.getElementById("PPRICE");
const $tax = document.getElementById("TAX");
const $total = document.getElementById("TOTAL");
const salesTaxRate = Number(document.getElementById("SALESTAX").value) / 100;
function update() {
const qty = Number($qty.value);
const meal_price = Number($choice.options[$choice.selectedIndex].value);
const subtotal = qty * meal_price;
const tax = subtotal * salesTaxRate;
const total = subtotal + tax;
$subtotal.value = subtotal.toFixed(2);
$pprice.value = subtotal.toFixed(2);
$tax.value = tax.toFixed(2);
$total.value = total.toFixed(2);
}
<table>
<tr style="background-color:black; color:white">
<th>Menu Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Preference</th>
</tr>
<tr>
<td>Boneless Chicken Wings</td>
<td><input type="text" value="" name="QTY" id="QTY" onKeyUp="update()" /></td>
<td><input type="text" name="PPRICE" id="PPRICE" value="" disabled="disabled" readonly/></td>
</td>
<td>
<form action="/action_page.php">
<select id="BONELESS_COUNT" onkeyup="update()" onchange="update()">
<option value="5.99" name="4PCBL" id="4PCBL">4 Piece $5.99</option>
<option value="7.99" name="6PCBL" id="6PCBL">6 Piece $7.99</option>
<option value="9.99" name="12PCBL" id="12PCBL">12 Piece $9.99</option>
</select>
<select name="Preparation">
<option value="Baked">Baked</option>
<option value="Fried">Fried</option>
</select>
<select name="Flavor">
<option>Original</option>
<option>Buffalo</option>
<option>Parmesian</option>
<option>Lemon Pepper</option>
<option>BBQ</option>
</select>
</form>
</td>
</tr>
<tr>
<!-- not sure what this is for? -->
<td></td>
<td><input type="text" name="4PCBLM" id="4PCBLM" value="1" disabled="disabled" style="display:none" readonly/></td>
<td><input type="text" name="6PCBLM" id="6PCBLM" value="1" disabled="disabled" style="display:none" readonly/></td>
<td><input type="text" name="12PCBLM" id="12PCBLM" value="1" disabled="disabled" style="display:none" readonly/></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Subtotal $</strong></td>
<td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" style="display:none"><strong>Salestax</strong></td>
<!-- you could just put this directly in your code -->
<td><input type="text" name="SALESTAX" id="SALESTAX" value="11" disabled="disabled" style="display:none" readonly/></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right"><strong>Tax $</strong></td>
<td><input type="text" name="TAX" id="TAX" /></td>
<td></td>
</tr>
<td></td>
<td></td>
<tr>
<td></td>
<td align="right"><strong>Total $</strong></td>
<td><input type="text" name="TOTAL" id="TOTAL"></td>
<td></td>
</tr>
I have to disable a input in a td, based in the selection in the td select, the td target is the next one, but when I select a option it changes all the next td in the column. I´m new in this u_u
<table id="tabla">
<!-- Cabecera de la tabla -->
thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2" onchange="funcSelect()"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work
function funcSelect(){
var idSel = $("select").attr("id");
console.log(idSel);
var valSel = $("#"+idSel).val();
var id = "#"+idSel;
console.log(id);
console.log(valSel);
if(valSel === "4"){
$("td.especial").next("td").children().removeAttr("disabled");
}else{
$("td.especial").next("td").children().attr("disabled", "disabled");
}
}
Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....
HTML:
<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
Javascript/Jquery:
$(document).on('change', 'select', function(event) {
var val = $(this).val();
if (val == 4) {
$(this).parent().next('td').children().removeAttr('disabled');
}else{
$(this).parent().next('td').children().attr('disabled', 'disabled');
}
});
You should use $("#"+idSel).closest("td.especial") instead of $("td.especial") to find just the first ancestor matching td.especial selector.
Your current code is just matching everything existing in DOM matching given selector `td.especial.
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 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>