Hi,
I’m doing an assignment and need guidance on an order form I created.
In my screenshot below, I want to click the calculate button which will calculate the $450 price to the selected value on the dropdown list. Then place the result in the total input field at the bottom.
I’m not sure how to link it properly
HTML code:
<div id="orderform">
<script src="../../scripts/order_form.js" type="text/javascript"></script>
<form action="" method="POST" name="bcpot002" id="bcpot002">
<div>
<p>Shallow Copper Red dish form showing distinctive qualities of this traditional reduction fired glaze. Fired to 1300 degrees</p>
<p>Size: 50cm diameter </br> Glaze Type: Copper Red </p>
<label for="price">$450/each</label>
<select id="ordernumber">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<br>
<input type="button" id="calculate" value="Calculate" onClick="calculate()">
<br>
<h3>Total Cost</h3>
<div>
$<input type="text" id="totalcost" value="0" readonly size="3" />
</div>
<div>
<input type="submit" />
<input value="Reset" type="reset"/>
</div>
</form>
</div>
Javascript code:
function calculate() {
var amount = document.getElementById ("bcpot002").value;
amount = parseFloat (amount);
var price = 450.00;
var totalprice = amount * price;
return totalprice;
}