...
PDA

Inserting variables into document.form.name.value

mike20599
01-03-2012, 08:25 PM
So I've got an order form that uses javascript to immediately calculate the price as soon as you enter the quantity that you want to order:


<form method="post" action="submitted.html" name="form">
<table id="order-table">
<tr>
<td>Widgets</td>
<td><input type="text" name="quantityWidgets" onchange="calculate()"></input></td>
<td> x </td>
<td>$650</td>
<td>=</td>
<td><input type="text" name="totalWidgets" disabled="disabled"></input></td>
</tr>
</table>
</form>


And here's the Javascript


function calculate(){
total = document.form.quantityWidgets.value * 650;
document.form.totalWidgets.value = total;
}


But that's just for 1 row and I have several rows of products. I could just use a different calculate() function for each row, but I'm trying to pass arguments into calculate() AND make it display the result in the proper place, but my syntax must be wrong.


...
<td><input type="text" name="quantityWidgets" onchange="calculate(quantityWidgets, 650, totalWidgets)"></input></td>
...
function calculate(quantity, price, total){
total = document.form.quantity.value * price;
document.form.total.value = total;
}


Can anyone help me please?
xelawho
01-03-2012, 08:54 PM
I hate laying stuff out in tables, so this looks a little wonky, but I think the js is right at least:


<html>
<head>
<title></title>

<script type="text/javascript">
function calculate(quantity, price, total){
total.value = quantity*price;
}
</script>
</head>
<body>
<form method="post" action="submitted.html" name="form">
<table id="order-table">
<tr>
<td>Widgets</td>
<td><input type="text" name="quantityWidgets" onchange="calculate(this.value, 650,form.totalWidgets)"></input></td>
<td> x </td>
<td>$650</td>
<td>=</td>
<td><input type="text" name="totalWidgets" disabled="disabled"></input></td>
<td>Grommets</td>
<td><input type="text" name="quantityGrommets" onchange="calculate(this.value, 400,form.totalGrommets)"></input></td>
<td> x </td>
<td>$400</td>
<td>=</td>
<td><input type="text" name="totalGrommets" disabled="disabled"></input></td>
</tr>
</table>
</form>
</body>
</html>


I would suggest changing your "onchange" to "onkeyup" so that the user doesn't have to do anything, but that's up to you...
Old Pedant
01-03-2012, 09:02 PM
Are all your fields paired? That is, you have "quantityZambonis" and "totalZambonis" to go along with the Widgets?

Or are all your quantity and total fields named the same?

If they are all named differently, it's not hard:


<form method="post" action="submitted.html" name="form">
<table id="order-table">
<tr>
<td>Widgets</td>
<td>
<input type="text" name="quantityWidgets" onchange="calculate(this)" />
<input type="hidden" name="priceWidgets" value="650.0" />
</td>
<td> x </td>
<td>$650</td>
<td>=</td>
<td><input type="text" name="totalWidgets" disabled="disabled"/></td>
</tr>
<tr>
<td>Zambonis</td>
<td>
<input type="text" name="quantityZambonis" onchange="calculate(this)" />
<input type="hidden" name="priceZambonis" value="85295.0" />
</td>
<td> x </td>
<td>$85,295</td>
<td>=</td>
<td><input type="text" name="totalZambonis" disabled="disabled"/></td>
</tr>
</table>
</form>

Then:

function calculate(what)
{
var form = what.form;
var product = what.name.replace("quantity","");
var total = form[ "price" + product ].value * what.value;
form[ "total" + product ].value = total.toFixed(2);
}
mike20599
01-03-2012, 09:08 PM
Thanks, that worked perfectly!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum