SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript calculation - form

    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?
    Code:
    <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;	
    }
    Last edited by felgall; Dec 23, 2011 at 13:25.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show me example
    I tried many option and did't work

  4. #4
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <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>
    Code javascript:
    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
    Last edited by paul_wilkins; Dec 23, 2011 at 16:34. Reason: add coding tags

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ryszard33 View Post
    I'm interested to find better solution then this above
    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

    Code:
    <html>
    	<head>
    		<title></title>
    		<script language="javascript" type="text/javascript" src="test.js"></script>
    	</head>
    <body>
        ...
        <script language="javascript" type="text/javascript" src="test.js"></script>
    </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

    Code:
    <form id="order">
    <p>
        ...
        Price: 10<input type="hidden" id="value0" value="10"/>
        Quantity:<input type="text" id="qty0" size="2" value=""/>	
        <input type="button" name="calculate0" 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" name="calculate1" 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" name="calculate2" onclick="calculateFirst();" value="Add"/>
    </form>
    Code:
    ...
    var form = document.getElementById('order');
    form.elements.calculate0.onclick = calculate; 
    form.elements.calculate1.onclick = calculateNext; 
    form.elements.calculate2.onclick = calculateFirst;
    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.

    Code:
    Your order: <span id="result0"></span><br /><br />
    Code:
    function calculate(index) {
    	var qty = document.getElementById('qty0' + index).value;
    	var value = document.getElementById('value0' + index).value;
     
    	var result =  value * qty;
     
    	document.getElementById('result' + index).innerHTML = result;
    }
    function calculateNext() {
        ...
    }
    function calculateFirst() {
        ...
    }
    ...
    form.elements.calculate0.onclick = function () {
        calculate(0);
    };
    form.elements.calculate1.onclick = function () {
        calculate(1)Next;
    };
    form.elements.calculate2.onclick = function () {
        calculate(2)First;
    };
    Then you can remove further duplication by using a separate function to assign the event function

    Code:
    function calculate(index) {
        ...
    }
    function calculateClickHandler(index) {
        return function () {
            calculate(index);
        };
    }
    form.elements.calculate0.onclick = calculateClickHandler(0);function () {
        calculate(0);
    };
    form.elements.calculate1.onclick = calculateClickHandler(1);function () {
        calculate(0);
    };
    form.elements.calculate2.onclick = calculateClickHandler(2);function () {
        calculate(0);
    };
    You can then use a loop to assign those instead:

    Code:
    var form = document.getElementById('order'),
        i;
    for (i = 0; form.elements['calculate' + i]; i += 1) {
        form.elements['calculate' + i].onclick = calculateClickHandler(i);
    }
    form.elements.calculate0.onclick = calculateClickHandler(0);
    form.elements.calculate1.onclick = calculateClickHandler(1);
    form.elements.calculate2.onclick = calculateClickHandler(2);
    And then you can even get rid of the numeric names on the add buttons, so that the buttons are all consistant

    Code:
    <input type="button" name="calculate0" value="Add"/>
    <input type="button" name="calculate1" value="Add"/>
    <input type="button" name="calculate2" value="Add"/>
    Code:
    var form = document.getElementById('order'),
        addButtons = form.elements.calculate,
        i;
    for (i = 0; i < addButtons.lengthform.elements['calculate' + i]; i += 1) {
        addButtons[i]form.elements['calculate' + i].onclick = calculateClickHandler(i);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyway I use book "Javascript Eight Edition" by Tom Negrino & Dori Smith
    Could you suggest better book?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ryszard33 View Post
    Anyway I use book "Javascript Eight Edition" by Tom Negrino & Dori Smith
    Could you suggest better book?
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •