Develop Reference

Third box locked value JS

I am using an javascript function script in html to get the product of two input boxes into third.
HTML:-
<input type="text" class="form-control" id="inputBuyPrice" placeholder="0.0" name="price" oninput="calculate()">
<input type="text" class="form-control" id="inputBuyAmount" placeholder="0.0" name="amount" oninput="calculate()">
<input type="text" class="form-control" id="inputBuyTotal" placeholder="0.0" name="total" oninput="calculate()">
And the javascript:-
<script>
function calculate() {
var myBox1 = document.getElementById('inputBuyAmount').value;
var myBox2 = document.getElementById('inputBuyPrice').value;
var result = document.getElementById('inputBuyTotal');
var numb = myBox1 * myBox2;
numb = numb.toFixed(8);
result.value = numb;
}
</script>
Now everything is working fine. But value of total gets locked by product of amount and price. I don't want it to be readonly but input that's value can be changed by user.

In a comment you've said:
Simple thing amount*price to be shown in total, but total can be changed manually and incase again price or amount change , product should be shown in total
If that's what you want, just remove the oninput="calculate()" on inputBuyTotal. That will allow the user to change it however they want, but then changing inputBuyPrice or inputBuyAmount will replace what they changed it to with the product of those fields.
(I wish the shops I buy from let me manually change the total amount to pay... 😉)

Change
oninput="calculate()"
to
oninput="calculateAmount()"
and add function calculateAmount()

javascript help using html and calculator

Can someone help me to get the total price of the stock given prices below?? Using the onclick, once someone puts in the number of stocks they want to buy, how do I go about getting the total price of all 3 stocks choosen??
<tr>
<td><b> SHARE PRICE</b></td>
<td>$43.93</td>
<td>$43.87</td>
<td>$26.33</td>
</tr>
</table>
<hr>
<br>
<p>
<h3>Important information that you should know about these stocks: </h3>
<ul>
<li>0.1% of the trade value if the total trade value is less than $10,000</li>
<li>0.08% of the trade value if the total trade value is greater than or equal to $10,000</li>
<li>The minimum commission is $5</li>
<hr>
<br>
</ul>
<form name="calculator">
<p> Enter the number of Oracle Corporation stocks you wish to purchase!: <input type="text" id="input1"></p> <br>
<p> Enter the number of Microsoft Corporation stocks you wish to purchase!: <input type="text" id="input2"></p> <br>
<p> Enter the number of Symantec Corporation stocks you wish to purchase!: <input type="text" id="input3"></p> <br

I would suggest storing the price information as a numeric value somewhere, like in hidden input fields or data- attributes on the table cells, and create IDs on those elements that you can associate with the inputs for stock purchases. Then it's just a matter of doing some simple math. Here's an example using hidden inputs:
<table>
<tr>
<td><b> SHARE PRICE</b></td>
<td>$43.93</td>
<td>$43.87</td>
<td>$26.33</td>
</tr>
</table>
<h3>Important information that you should know about these stocks: </h3>
<ul>
<li>0.1% of the trade value if the total trade value is less than $10,000</li>
<li>0.08% of the trade value if the total trade value is greater than or equal to $10,000</li>
<li>The minimum commission is $5</li>
</ul>
<form name="calculator">
<input type="hidden" id="price1" value="43.93" />
<input type="hidden" id="price2" value="43.87" />
<input type="hidden" id="price3" value="26.33" />
<p> Enter the number of Oracle Corporation stocks you wish to purchase!: <input type="text" id="input1"></p> <br>
<p> Enter the number of Microsoft Corporation stocks you wish to purchase!: <input type="text" id="input2"></p> <br>
<p> Enter the number of Symantec Corporation stocks you wish to purchase!: <input type="text" id="input3"></p> <br>
<input type="button" value="Add!" onclick="javascript:sumUp()" />
</form>
<script type="text/javascript">
function sumUp() {
var total = (document.getElementById("price1").value * document.getElementById("input1").value) + (document.getElementById("price2").value * document.getElementById("input2").value) + (document.getElementById("price3").value * document.getElementById("input3").value)
alert("Your total is: $" + total);
}
</script>
Here's the code for putting the total into a textbox. This would go at the end of your form and replace the <script> block from the first example.
<p>Your total is: $<input type="text" id="total" /></p>
<script type="text/javascript">
function sumUp() {
var total = (document.getElementById("price1").value * document.getElementById("input1").value) + (document.getElementById("price2").value * document.getElementById("input2").value) + (document.getElementById("price3").value * document.getElementById("input3").value)
document.getElementById("total").value = total;
}
</script>

calculating the sum of the array form with javascript

I want to display the number of values ​​in array form. I have a lot of form with only one name is "price []" and have each value on the form. I want to calculate the total value of the form "price []". I'm still a beginner in javascript. and I want to calculate it by using javascript. The following coding that I have made.
<html>
<body>
<form id="hitung" name="hitung">
price 1 <input type="text" name="price[]" class="price" value="1000"/><br>
price 2 <input type="text" name="price[]" class="price" value="3000"/><br>
price 3 <input type="text" name="price[]" class="price" value="2000"/><br>
price 4 <input type="text" name="price[]" class="price" value="1000"/><br>
price 5 <input type="text" name="price[]" class="price" value="3000"/><br><br>
total <input type="text" name="total" class="total"/>
</form>
</body>
</html>
and I want to ask you again, if there is a new input from the outside, then the total will also be changed directly. how to do it. help me please. thank you

Here's an example: http://jsfiddle.net/c4UyA/1/
var sum = 0;
$("form > input[name='price[]']").each(function() {
$this = $(this);
sum += parseInt($this.attr("value"));
});
$("form > input[name='total']").attr("value", sum);

Subtract an integer from a calculated total

I've built a script to add quantities/units and generate a total that displays sales tax.
How can I get this calculator to recognise #discount and subtract it from the total before the GST (10% sales tax) is calculated and added?
Also, is it possible to generate the total when the page loads? Instead of a user having to press the 'Generate total' button?
HTML
<ul>
<li> Item 1 (<input type="text" name="others" size="4" value="5" readonly="readonly" class="readonly_field"/> units)</li>
<li> Item 2 (<input type="text" name="others" size="4" value="1" readonly="readonly" class="readonly_field"/> units)</li>
<li> Item 3 (<input type="text" name="others" size="4" value="3" readonly="readonly" class="readonly_field"/> units)</li>
</ul>
<input type="button" value="Generate Total" onclick="total()" /><br><br>
Discount <input type="text" id="discount" name="discount" value="500"/><br><br>
Total Units: <input type="text" id="units_total" name="units_total" readonly="readonly" /><br>
Sub Total: <input type="text" id="sub_total" name="sub_total" readonly="readonly" /><br>
Includes GST: <input type="text" id="gst_total" name="gst_total" readonly="readonly" /><br>
Total: <input type="text" id="g_total" name="g_total" readonly="readonly" />
JS
function total(){
var total_value = 0;
var all_others = document.getElementsByTagName("input");
for(var i=0; i<all_others.length; i++){
if(all_others[i].type!="text" || all_others[i].name!="others"){
continue;
}
total_value += parseFloat(all_others[i].value);
}
document.getElementById("units_total").value = (total_value).toFixed(1);
document.getElementById("sub_total").value = ((total_value) *100).toFixed(2);
document.getElementById("g_total").value = (((total_value * 10/100) + total_value) * 100).toFixed(2);
document.getElementById("gst_total").value = ((total_value * 10/100) * 100).toFixed(2);
}

Firstly, to get your function to execute on window load, wrap it in a load event:
window.onload = function() {
total();
}
Secondly, to get it to figure in discount, you just need to modify your variable a few times, but then when adding them together, make sure you parse them with .parseFloat():
if (document.getElementById('discount').value != '') {
var discount = document.getElementById('discount').value;
}
else {
var discount = 0;
}
var sub_total = (((total_value) * 100).toFixed(2) - discount).toFixed(2);
var gst = ((total_value * 10 / 100) * 100).toFixed(2);
document.getElementById("sub_total").value = sub_total;
document.getElementById("gst_total").value = gst;
document.getElementById("g_total").value = (parseFloat(sub_total) + parseFloat(gst)).toFixed(2);
DEMO

First of all, I suggest you to perform validation and computations both server side and client side. The first ensures security while the second improves the responsiveness of the UI.
Said that, you'd better introduce several support variables and perform computation on them. You should get the value from the elements you are interested into using getElementById and store it in variables.
Then you should perform computation on that variables and finally place the results in the elements you want to use to display them to the user.
To perform the operation when the page loads have a look at this.

Form population from checkbox selection

This is a somewhat simplified version of the problem to make it easier to explain and a shorter question.
I have X checkboxes:
<input type="checkbox" class="checker" value="1" />
<input type="checkbox" class="checker" value="2" />
<input type="checkbox" class="checker" value="3" />
...
I have 2 columns, cert and cost, of Y number of input fields (X > Y) then a total at the bottom:
<input type="text" class="cert" /><input type="text" class="cost">
<input type="text" class="cert" /><input type="text" class="cost">
<input type="text" class="cert" /><input type="text" class="cost">
...
<input type="text" id="total" />
The user can select any combination of checkboxes (up to limit Y). When a checkbox is selected, it's value is entered into the first empty cert input. Depending on the cert value, the corresponding cost is then put into the adjacent cost input (e.g. cert 1 = cost 50, cert 2 = cost 100, etc).
If a checkbox is unticked, the corresponding cert is cleared, as is the cost.
The total at the bottom keeps a running total on a change to any thing.
A few additional notes:
The checkboxes are spaced throughout the form, not in one continual sequence.
Similarly the cert and cost inputs are not actually side by side in the html (although do appear to be on the screen), there is other code between them.
Any help / input is greatly appreciated as I'm mostly just producing a mess!

Here is something to start you out with. I'm not sure if your cert 1 cert 2 is going inside the textbox or there are labels or something. Same with your cost. But that's the way I did it in the example. This is assuming you have the same amount of checkboxes as the set of inputs(cert & cost);
$('input.checker').change(function(){
// store the current index so we can pick which text input to change
var $i = $(this).index('input.checker');
// put val in corresponding cert text input
$('input.cert').eq($i).val(this.checked ? 'cert ' + ($i+1) : '');
// put val in corresponding .cost text input
$('input.cost').eq($i).val(this.checked ? 'cost ' + (50 * ($i+1)) : '');
var total = 0;
// loop through the cost inputs and add up total
$('input.cost').each(function(i,v){
total += (+$(v).val().replace('cost ',''));
});
// insert total
$('#total').val(total);
});​
EXAMPLE FIDDLE