SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist sputza's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question adding up 3 input boxes and displaying value

    Hi everyone. I have this PHP code generating some input boxes.
    PHP Code:
                        <p>
                          <
    label># of 8' x 10' Booths:
                          
    <input type='text' name='numBooths8x10' id='numBooths8x10' size='3' maxlength='3' tabindex='13' value='0' />
                          </
    label>
                        </
    p>
                        <
    p>
                          <
    label># of 10' x 10' Booths:
                          
    <input type='text' name='numBooths10x10' id='numBooths10x10' size='3' maxlength='3' tabindex='13' value='0' />
                          </
    label>
                        </
    p>
                        <
    p>
                          <
    label># of Delegates:
                          
    <input type='text' name='numDelegates' id='numDelegates' size='3' maxlength='3' tabindex='14' value='0' />
                          </
    label>
                        </
    p>
                        <
    p>
                        <
    label>Total Price: $
                        <
    input type='text' name='price' id='price' value='0' disabled='true'> (GST Included)
                        </
    label>
                        </
    p
    The last input box is the box I would like the total of the other 3 boxes values. I tried many ways without any success so I figured maybe someone here would like to show me the way.
    I'm going to try again to write the Javascript to do this and will post any results I get.
    Thanks in advance for any help.
    Steven Watkins
    Chief Web Ninja
    Code Monkey Interactive
    lowgravity.ca

  2. #2
    SitePoint Evangelist sputza's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So here is what I got so far:
    Code:
    <script language="JavaScript">
    
    function calcTotal()
    {
    a = document.regForm.numBooths8x10.value;
    b = document.regForm.numBooths10x10.value;
    c = document.regForm.numDelegates.value;
    d = ((a * 795) + (b * 995) + (c * 695));
    document.regForm.price.value = d.toFixed(2);
    
    }
    
    </script>
    PHP Code:
    <p>
    <
    label># of 8' x 10' Booths:
    <input type='text' name='numBooths8x10' id='numBooths8x10' size='3' maxlength='3' tabindex='13' value='0' onChange='calcTotal();' />
    </
    label>
    </
    p>
    <
    p>
    <
    label># of 10' x 10' Booths:
    <input type='text' name='numBooths10x10' id='numBooths10x10' size='3' maxlength='3' tabindex='13' value='0' onChange='calcTotal();' />
    </
    label>
    </
    p>
    <
    p>
    <
    label># of Delegates:
    <input type='text' name='numDelegates' id='numDelegates' size='3' maxlength='3' tabindex='14' value='0' onChange='calcTotal();' />
    </
    label>
    </
    p>
    <
    p>
    <
    label>Total Price: $
    <
    input type='text' name='price' id='price' value='0' disabled='true'> (GST Included)
    </
    label>
    </
    p
    Its working how. The when I tried last time was I did not target the input boxes with a document.

    Thanks to those who read this post.
    Steven Watkins
    Chief Web Ninja
    Code Monkey Interactive
    lowgravity.ca

  3. #3
    SitePoint Enthusiast stakes's Avatar
    Join Date
    Sep 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, if you want to boxes to update dynamicly (if user changes values) try the following code:

    Code js:
        window.onload = function() {
     
            var input = document.yourForm;
            summary();
     
            input.onkeyup = function () {
                summary();
            }
     
            function summary () {
     
                var valueOne = parseInt(input.elements['numBooths8x10'].value);
                var valueTwo = parseInt(input.elements['numBooths10x10'].value);
                var valueThree = parseInt(input.elements['numDelegates'].value);
                var totalSum = valueOne + valueTwo + valueThree;
                input.elements['price'].value = totalSum;        
            }
     
        };
    Last edited by stakes; Sep 14, 2008 at 17:28. Reason: added onkeyup instaed of onchange...
    webcloud.se - Articles on web development

  4. #4
    SitePoint Evangelist sputza's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your input. The values are already dynamically setting onChange so I don't see a need to change it. Thanks again for your help.
    Steven Watkins
    Chief Web Ninja
    Code Monkey Interactive
    lowgravity.ca


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
  •