Place a calculated value from javascript into an input field

JavaScript
#1

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

image

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;
}
#2

Full code of the HTML:

image
image882×674 116 KB

#3

You can’t access the order number like that, you’ll have to read the value of the <select> element, not the value of the <form> element (which is undefined).

Once you get the correct amount from the function, you can insert it into the readonly <input> field by setting its value.

#4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#5