Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    OSK
    OSK is offline
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Calculations based on user input

    Dear expert (Ok, i am new to this and should maybe not address this as a letter )

    I hope someone can help me ... this is what i want to achieve (I am using frontpage)

    I want to create a table (this i can do!) that require a user input (number of guests).

    It then has SEVERAL options:

    - Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later)

    - Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation.

    a number of the above options, and a grand total on the bottom.

    I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works

    Can someone PLEASE help me, or point me in the right direction?

    (I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn)

    Below is a link to the example ..

    http://www.ouma-se-kombuis.co.za/test.html

    Thank you!

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by OSK View Post
    I am using frontpage
    Don't.

    There are lots of free code editors out there, and they're all less likely to break your code for you than Frontpage.

    http://www.aptana.com/
    http://www.htmlkit.com/
    http://notepad-plus-plus.org/

    Regarding your question: I can't tell you how to build something. Only you know how you want it to work.

    Break it down into steps: you say you can manage the table part: fine. Do that. Build the table. Then what? You need some form elements in the table, to collect user input. Stuck on that? Cool: post what HTML you've got, and ask about putting HTML forms on a page. (If that's what you're stuck on, you might want to ask that in the HTML forum, not in here). Once you've got your input boxes appearing, you need to start retrieving data from them: we can help with that in here, but we need to see the HTML that we're dealing with.

    Make sense?

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi OSK,

    I have written something similiar in the past, take a look of the code below. It doesn't do exactly what you want to do because like you say it is better for you to learn it and do it for yourself that way you will understand it better. The code below extracts everything you will need to make it work. you will just have to had a function to calculate the selected option and the sub total. Hope this helps...


    <script type="text/javascript">
    function selectReasons()
    {
    var index = document.getElementById("Name").selectedIndex;

    var selectionValue = document.getElementById("Name").value;

    var selectionText = document.getElementById("Name").options[index].text;

    /* *****this is only used as a bread crumb to display the output ******
    document.getElementById("Name").innerHTML = selectionValue + "<br />" +
    selectionText;
    */
    if(selection=='something')
    {
    then add selected option and sub total
    return total;

    }


    }
    </script>

    </head>

    <body>

    <select id="Name" onChange="selection(this.value);">
    <option value="0">Please select</option>
    <option value="1">Illness</option>
    <option value="2">Complaint</option>
    <option value="3">Class Closed</option>
    <option value="4">Move from Area</option>
    <option value="5">Other</option>
    </select>
    </body>
    </html>
    Last edited by function code(); 07-14-2010 at 02:35 PM.

  • #4
    OSK
    OSK is offline
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cool, thanks for both replies, and the script. I will go through it this evening and start learning.

    But expect a couple of questions :P

  • #5
    OSK
    OSK is offline
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Despite the chance to look really stupid, here is what i did. Instead of complicating things from the start, i tried to create a input (number of guests), and if the number is below a certain value, the rate is x, else the rate is y.

    It then needs to calculate a cost (guests * rate) and display it ..

    it seems simple, but yet, i am missing something ... here is the code

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    </head>

    <body>

    <SCRIPT language=Javascript>
    if(guests < 30) { meat_pp = 999.00 ; } else
    meat_pp = 200

    meat_cost = guests * meat_pp
    </SCRIPT>

    <form method=post name=calc action=#>
    <INPUT onchange=calc_price(this.form) maxLength=4 size=2 name=guests>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><INPUT value=R0.00 readOnly size=8 name=meat_cost></p>
    </form>
    </body>
    </html>

    (perhaps signing up for javascript 101 will be better)

  • #6
    OSK
    OSK is offline
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So i think i am learning!
    Thanks for the replies, I broke it down to the basics, and started one step at a time, and it seems to be working. Ok, granted it is taking a lot of time, but i am learning, and that seems to be the most important

    Due to not wanting to flood the page with script, here is the link to how far it is right now ..

    http://www.ouma-se-kombuis.co.za/budgetcalc.html

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Well, clearly your calculations work, but I think you are making it really really hard to later make changes, adjust prices, etc.

    I think it would be better if you would instead think in terms of *TABLES*.
    Data tables, that is.

    Maybe something like this:
    Code:
    var breaksAt = [ 50, 70, 90, 110, 130, 150, 200, 250, 300, 350, 500, 9999999 ];
    function ItemCost( 
        iname,
        iid,
        imin,
        n50, n70,n90,n110,n130,n150,n200,n250,n300,n350,n500,nmore )
    {
        this.itemName = iname;
        this.itemId = iid;
        this.minCost = imin;
        this.costsPer = [n50,n70,n90,n110,n130,n150,n200,n250,n300,n350,n500,nmore];
    }
    
    var Items = [
        new ItemCost( "Lamb on the spit", "lamb", 2100.00,
                      69.80,63.80,62.98,62.38,61.77,61.15,61.10,58.61,57.16,55.75,55.03,55.03 ),
        new ItemCost( "Traditional braaivleis", .... etc ... ),
        ...
        ];
    And then you can drive *ALL* the calculations off that table.

    Example:
    Code:
    v_guests = ... get number of guests ...
    // find which breakpoint applies to this number of guests:
    var breakpoint = -1;
    for ( var n = 0; n < breaksAt.length; ++n )
    {
        if ( v_guests >= breaksAt[n] )
        {
            breakpoint = n;
            break; // out of loop
        }
    }
    // then get cost for each item:
    var total = 0;
    for ( var inum = 0; inum < Items.length; ++inum )
    {
        var Item = Items[inum];
        var id = Item.itemId;
        var cost = 0;
        if ( form.elements["cb_" + id ].checked )
        {
            cost = Item.costsPer[breakpoint] * v_guests; 
            if ( cost < Item.minCost ) cost = Item.minCost;
        }
        form.elements["cost_" +id].value = Money( cost );
    }
    ...
    Presto! *ALL* the items done at once!

    I've changed your <form> to look something like this:
    Code:
    <input name="cb_lamb" type="checkbox" onclick="recalculate()" />
    Lamb on the spit
    <input name="cost_lamb" readonly />
    ...
    And the Money() function could be as simple as this:
    Code:
    function Money( amt )
    {
        var m = amt.toFixed(2);
        if ( m.length > 6 ) m = m.substring(0,m.length - 6) + "," + m.substring(m.length - 6);
        return "$ " + m;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    OSK (07-18-2010)

  • #8
    OSK
    OSK is offline
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!

    Thats the problem, i only started last week with coding so i know there is still a LOT to learn.

    Thanks again for the post, i will look at it and figure out how it works

  • #9
    OSK
    OSK is offline
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So i managed to get the first version of this done ..

    http://www.ouma-se-kombuis.co.za/budgetcalc.html

    The next problem i am sitting with is ... it creates a ballpark figure, how do i get it to with the click of a button, email me all the contents of the form in order to work out a valid quotation ?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by OSK View Post
    The next problem i am sitting with is ... it creates a ballpark figure, how do i get it to with the click of a button, email me all the contents of the form in order to work out a valid quotation ?
    You don't. The trouble with using this method (mailto) to send form results is its unpredictability. The method it is highly dependent on the browser in use and the email client in use (some people have only Yahoo or Hotmail). In particular, your visitor must have Outlook or Outlook Express as the default client for this to work correctly. Even if your visitor is using Internet Explorer, but the default mail client is different (e.g. Eudora), your mailto form will not work. With all of the browser troubles, you're likely to lose about half of your users' messages. Most of the email clients that can successfully send a mail will prompt the user by a security dialog prior to sending - this can scare many users from continuing. Also, what about people with Javascript disabled?

    In fact few browsers these days accept mailto: as a form action. You need a really old browser for it to work as more modern browsers simply open the email program (if any) and ignore the form. If you are going to use a form then use a server-side formmail script as the action - there are several good free ones out there.


  •  

    Posting Permissions

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