Javascript calculation - form

JavaScript
1

Hi

I’ve just started learn javascript and I have problem like this one.
I want to first multiply product by quantity and later add it to overall sum.
Can anyone help?

<html>
	<head>
		<title></title>
		
		<script language="javascript" type="text/javascript" src="test.js">
		</script>
	</head>
<body>
<form>
<p>
	 Your order: <span id="result"></span><br /><br />
	 Order total: <span id="orderTotal"></span><br /><br />
	
	Price: 10<input type="hidden" id="value0" value="10"/>
	Quantity:<input type="text" id="qty" size="2" value=""/>	
	<input type="button" onclick="calculate();" value="Add"/>
	<br/>
	Price: 20<input type="hidden" id="value1" value="20"/>
	Quantity:<input type="text" id="qty"  size="2" value=""/>	
	<input type="button" onclick="calculate();" value="Add"/>	
	<br/>
	Price: 30<input type="hidden" id="value2" value="30"/>
	Quantity:<input type="text" id="qty" size="2" value=""/>	
	<input type="button" onclick="calculate();" value="Add"/>

</form>    				
    			
</body>
</html>

function calculate()
{
	var qty = document.getElementById("qty").value;
	var value = document.getElementById("value0").value;
	
	var result =  value * qty;
		
	document.getElementById("result").innerHTML = result;	
}
2

The first thing to do is to fix your HTML. You can only have one of each id within a web page.

Once you fix that then you just need to repeat the extraction of the text strings entered into the form fields and multiply them together (which automatically converts them to numbers) and then add them all together.

3

Can you show me example
I tried many option and did’t work

4 

<html>
	<head>
		<title></title>
		
		<script language="javascript" type="text/javascript" src="test.js">
		</script>
	</head>
<body>
<form>
<p>
	 Your order: <span id="result"></span><br /><br />
	 Your order: <span id="result1"></span><br /><br />
	 Your order: <span id="result2"></span><br /><br />
	 
	 Total: <span id="total"></span><br /><br />
	 
	Price: 10<input type="hidden" id="value0" value="10"/>
	Quantity:<input type="text" id="qty0" size="2" value=""/>	
	<input type="button" onclick="calculate();" value="Add"/>
	<br/>
	Price: 20<input type="hidden" id="value1" value="20"/>
	Quantity:<input type="text" id="qty1"  size="2" value=""/>	
	<input type="button" onclick="calculateNext();" value="Add"/>	
	<br/>
	Price: 30<input type="hidden" id="value2" value="30"/>
	Quantity:<input type="text" id="qty2" size="2" value=""/>	
	<input type="button" onclick="calculateFirst();" value="Add"/>

</form>    				
    			
</body>
</html>



function calculate()
{
	var qty = document.getElementById("qty0").value;
	var value = document.getElementById("value0").value;
	
	var result =  value * qty;
		
	document.getElementById("result").innerHTML = result;	
}

function calculateNext()
{
	var qty = document.getElementById("qty1").value;
	var value = document.getElementById("value1").value;
	
	var result1 =  value * qty;
		
	document.getElementById("result1").innerHTML = result1;	
}

function calculateFirst()
{
	var qty = document.getElementById("qty2").value;
	var value = document.getElementById("value2").value;
	
	var result2=  value * qty;
		
	document.getElementById("result2").innerHTML = result2;
}

I’m interested to find better solution then this above

5

It can be made better by moving the script down to the end of the body, so that the script can work with on-page elements as the page is loading, and also by removing the language attribute


<html>
	<head>
		<title></title>
		[s][color="red"]<script language="javascript" type="text/javascript" src="test.js"></script>[/color][/s]
	</head>
<body>
    ...
    [color="green"]<script [s][color="red"]language="javascript"[/color][/s] type="text/javascript" src="test.js"></script>[/color]
</body>
</html>

It can be made better by giving the form an identifier so that scripting can easily access form elements, and moving the inline event attributes out to the script


<form [color="green"]id="order"[/color]>
<p>
    ...
    Price: 10<input type="hidden" id="value0" value="10"/>
    Quantity:<input type="text" id="qty0" size="2" value=""/>	
    <input type="button" [color="green"]name="calculate0"[/color] [s][color="red"]onclick="calculate();"[/color][/s] value="Add"/>
    <br/>
    Price: 20<input type="hidden" id="value1" value="20"/>
    Quantity:<input type="text" id="qty1"  size="2" value=""/>	
    <input type="button" [color="green"]name="calculate1"[/color] [s][color="red"]onclick="calculateNext();"[/color][/s] value="Add"/>	
    <br/>
    Price: 30<input type="hidden" id="value2" value="30"/>
    Quantity:<input type="text" id="qty2" size="2" value=""/>	
    <input type="button" [color="green"]name="calculate2"[/color] [s][color="red"]onclick="calculateFirst();"[/color][/s] value="Add"/>
</form>    				



...
[color="green"]var form = document.getElementById('order');
form.elements.calculate0.onclick = calculate; 
form.elements.calculate1.onclick = calculateNext; 
form.elements.calculate2.onclick = calculateFirst;[/color]

You can improve further on things by removing the duplication from the calculate functions, by passing in to the function the index number of the field that you want to work with.


Your order: <span id="result[color="green"]0[/color]"></span><br /><br />



function calculate([color="green"]index[/color]) {
	var qty = document.getElementById('qty[s][color="red"]0[/color][/s]' [color="green"]+ index[/color]).value;
	var value = document.getElementById('value[s][color="red"]0[/color][/s]' [color="green"]+ index[/color]).value;
 
	var result =  value * qty;
 
	document.getElementById('result' [color="green"]+ index[/color]).innerHTML = result;
}
[s][color="red"]function calculateNext() {
    ...
}
function calculateFirst() {
    ...
}[/color][/s]
...
form.elements.calculate0.onclick = [color="green"]function () {[/color]
    calculate[color="green"](0)[/color];
[color="green"]};[/color]
form.elements.calculate1.onclick = [color="green"]function () {[/color]
    calculate[color="green"](1)[/color][s][color="red"]Next[/color][/s];
[color="green"]};[/color]
form.elements.calculate2.onclick = [color="green"]function () {[/color]
    calculate[color="green"](2)[/color][s][color="red"]First[/color][/s];
[color="green"]};[/color]

Then you can remove further duplication by using a separate function to assign the event function


function calculate(index) {
    ...
}
[color="green"]function calculateClickHandler(index) {
    return function () {
        calculate(index);
    };
}[/color]
form.elements.calculate0.onclick = [color="green"]calculateClickHandler(0);[/color][s][color="red"]function () {
    calculate(0);
};[/color][/s]
form.elements.calculate1.onclick = [color="green"]calculateClickHandler(1);[/color][s][color="red"]function () {
    calculate(0);
};[/color][/s]
form.elements.calculate2.onclick = [color="green"]calculateClickHandler(2);[/color][s][color="red"]function () {
    calculate(0);
};[/color][/s]

You can then use a loop to assign those instead:


var form = document.getElementById('order')[color="green"],
    i[/color];
[color="green"]for (i = 0; form.elements['calculate' + i]; i += 1) {
    form.elements['calculate' + i].onclick = calculateClickHandler(i);
}[/color]
[s][color="red"]form.elements.calculate0.onclick = calculateClickHandler(0);
form.elements.calculate1.onclick = calculateClickHandler(1);
form.elements.calculate2.onclick = calculateClickHandler(2);[/color][/s]

And then you can even get rid of the numeric names on the add buttons, so that the buttons are all consistant


<input type="button" name="calculate[s][color="red"]0[/color][/s]" value="Add"/>
<input type="button" name="calculate[s][color="red"]1[/color][/s]" value="Add"/>
<input type="button" name="calculate[s][color="red"]2[/color][/s]" value="Add"/>



var form = document.getElementById('order'),
    [color="green"]addButtons = form.elements.calculate,[/color]
    i;
for (i = 0; [color="green"]i < addButtons.length[/color][s][color="red"]form.elements['calculate' + i][/color][/s]; i += 1) {
    [color="green"]addButtons[i][/color][s][color="red"]form.elements['calculate' + i][/color][/s].onclick = calculateClickHandler(i);
}
6

Thank you so much for very clear explanation. I’m really appreciated.
I’m going to play with this code now and learn something more but after Christmas.
I’m sure I’ll be back with new question.

Have a Happy Christmas

7

Anyway I use book “Javascript Eight Edition” by Tom Negrino & Dori Smith
Could you suggest better book?

8

There a wide range of books. Take a look at the JavaScript Books Help thread for a discussion about many of them.

Some worth mentioning are:
JavaScript: The Good Parts
Head First JavaScript
Eloquent JavaScript
JavaScript: The Definitive Guide