30 Replies Latest reply on Oct 3, 2012 2:14 PM by hans-g.

    Online Order Forms

    respiro35 Level 1

      I've built an order form in Dreamweaver. I need it to calculate total of the values selected by the user in the list/menu sections and then display this information to the user.

        • 1. Re: Online Order Forms
          mhollis55 Level 4

          OK. Sounds fine.

           

          Is this a question?

           

          First, tell us where your page is on the Internet and we'll help. Second, tell us what kind of server-side code is supported by your host. Is it php? Is it ASP? Is it ColdFusion?

           

          Then we can answer any questions you might have.

          1 person found this helpful
          • 2. Re: Online Order Forms
            respiro35 Level 1

            Hi. Sorry this is my first time on a forum and am a beginner on dreamweaver.

             

            Yes it is a question.

             

            I'm yet to publish the site, instead have just been working on the order form in dreamweaver. I will attatch a screen shot if that helps. Do you want to see the code too?

             

            thanks Screen shot 2012-10-02 at 14.53.08.png

            • 3. Re: Online Order Forms
              respiro35 Level 1

              just to explain what i require.

               

              The user will select from the dropdown (choose item) where each option has a value. What i need is to be able to calculate the total of all the values and display in the 'total' column.

               

              thanks

              • 4. Re: Online Order Forms
                Ken Binney Adobe Community Professional & MVP

                respiro35 wrote:

                Yes it is a question.

                And may we find out the question?

                 

                To reply, we need to see your code PREFERABLY ONLINE

                Please upload your test files and post a link.

                • 5. Re: Online Order Forms
                  respiro35 Level 1

                  'how can i get my form to automatically calculate the total of the values selected?'

                   

                  What do you mean by 'PREFERABLY ONLINE' shall i capy and paste it?

                   

                  Neither do I understand what you mean by 'upload my test files'..... to what?

                   

                  Please could you explain, Thanks

                  • 6. Re: Online Order Forms
                    Ken Binney Adobe Community Professional & MVP

                    Sure thing -

                     

                    When you upload all the files in question to your online host, we can easily navigate through all your files and dependent code to tell you what's up.

                     

                    Forms like this are normally submitted to a forms processsing script on your server.

                    Is this form being submitted to a payment gateway, or is this for display purposes only?

                    • 7. Re: Online Order Forms
                      respiro35 Level 1

                      thanks for your patience.

                       

                      i've uploaded it http://steppedinsilver.com/order.html

                       

                      this form is for users wishing to pay by cheque. The form must be filled in and then submitted to an email address. If that makes sense?

                      • 8. Re: Online Order Forms
                        Ken Binney Adobe Community Professional & MVP

                        Yes that makes sense, thanks.

                         

                        The form will require some scripting to do the calculations.

                        Sorry to say that is not my strong suit

                        • 9. Re: Online Order Forms
                          Jon Fritz II Adobe Community Professional & MVP

                          If no important personal info is being sent (no credit card numbers), you could use a formmail script like the one available at http://www.tectite.com.

                           

                          You could use some javascript to calculate form fields and print the result in another text box, something like: http://www.mcfedries.com/javascript/ordertotals.asp or here: http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml

                          • 10. Re: Online Order Forms
                            Nancy OShea Adobe Community Professional & MVP

                            HTML alone will not do what you need.

                             

                            Ask your web host which programming languages your server supports.

                             

                            Form processing, validation and calculations should be performed with server-side code because it's more reliable than client-side code. 

                             

                            But before you look at scripts, you need to clean up some errors in your form.

                            http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsteppedinsilver.com%2Forder.html

                             

                            • IDs are unique and can be used only one time per page.
                            • Names/IDs cannot contain spaces and should match each other.

                                      Example:

                                      <form id="form1" name="form1">

                                      <input name="promotional_code " type="text" id="promotional_code" value="enter code" />

                             

                             

                             

                            Nancy O.

                            1 person found this helpful
                            • 11. Re: Online Order Forms
                              Rob Hecker2 Adobe Community Professional & MVP

                              Jon pointed you in the right direction with javascript. Javascript is required to perform live calculations on a form. Other languages, like PHP, can only perform calculations once the form is submitted. Although HTML is used to build the form elements, HTML cannot process the form data.

                              • 12. Re: Online Order Forms
                                mhollis55 Level 4

                                What does getScore(this) do?

                                 

                                That is where your script would be.

                                 

                                Here's a great primer, assuming you want to use php.

                                 

                                http://www.peachpit.com/articles/article.aspx?p=1315026

                                 

                                Now a word of warning. If you are selling stuff on the Internet where you might charge a credit card, you absolutely need a security certificate for yoru web server. They cost in the range of $120 to $90 annually.

                                 

                                If all you are doing is having people mail you a check, that is different. And, if you don't want to host a shopping cart, I can recommend PayPal as well as a whole host of other shopping carts.

                                • 13. Re: Online Order Forms
                                  respiro35 Level 1

                                  thanks

                                   

                                  I have tried to make the changes... does it look better now? http://steppedinsilver.com/order.html

                                  • 14. Re: Online Order Forms
                                    Nancy OShea Adobe Community Professional & MVP

                                    Much better.   Just a couple of things left.

                                     

                                    On line 32, your form ID and Name are mismatched: 

                                    "theorderform" and "orderform". 

                                     

                                    I don't know why you have this in your form:

                                    onclick="getScore(this)">

                                     

                                    Finally on line 104, you have an opening <label> tag that belongs before the <td> tag on line 103.

                                     

                                     

                                    Nancy O.

                                    • 15. Re: Online Order Forms
                                      respiro35 Level 1

                                      thanks so much, i've made those corrections.

                                       

                                      is there really no way i can get it to do those calculations. it seems like a really simple task?

                                      • 16. Re: Online Order Forms
                                        Ken Binney Adobe Community Professional & MVP

                                        Answered above - Javascript

                                        • 17. Re: Online Order Forms
                                          hans-g. Adobe Community Professional & MVP

                                          Hello respiro,

                                           

                                          this "thing" is not a very simple matter, really. Here's a link to a discussion, where you can get valuable informations:

                                           

                                          http://forums.adobe.com/message/4644948#4644948.

                                           

                                          "osgood_" gave with his very useful and understandable instructions a big support, like a cookbook.

                                           

                                          Hans-Günter

                                           

                                          P.S.

                                          I for my part understood the trick too - after a while -.

                                          • 18. Re: Online Order Forms
                                            respiro35 Level 1

                                            I've tried to follow the tutorial below, without sucess.

                                            http://www.javascript-coder.com/javascript-form/javascript-calculator- script.phtml

                                             

                                            I have no idea where i am going wrong, any ideas? http://steppedinsilver.com/order.html

                                             

                                            thanks

                                            • 19. Re: Online Order Forms
                                              hans-g. Adobe Community Professional & MVP

                                              Hello respiro(?),

                                               

                                              this javascript tutorial (http://www.javascript-coder.com/javascript...) I tried too, in my DW it works fine.  Essential part of the script are the two files "formcalculations.js" and "cakeform.css". Could it be that you don't have stored these files in your directory?

                                               

                                               

                                              <script type="text/javascript" src="js/formcalculations.js"></script>

                                                  <link href="styles/cakeform.css" rel="stylesheet" type="text/css" />

                                               

                                              Hans-Günter

                                              • 20. Re: Online Order Forms
                                                respiro35 Level 1

                                                sorry, i dont understand. What is my directory?

                                                • 21. Re: Online Order Forms
                                                  hans-g. Adobe Community Professional & MVP

                                                  Hello respiro (your name?),

                                                   

                                                  I for my part, I prefer to arrange my directories with subdirectories logical organized according to my themes. So it's always easy to keep track. And - among other things - it's also very handy if you have to hold up your images in several sizes.

                                                   

                                                  In MY case this directory is called "htdocs". So far - to a better understanding and to become a little bit more precisely  - I have to show you MY structure tree (merely a suggestion) as a submenu of htdocs. Therefore I used a file manager:

                                                  _VerzhtdocsAusf.jpg

                                                   

                                                  On the other hand, you could send us a link to your website in question, where we could let our creativity run riot all together. (Naturally no offense!)


                                                  Hans-Günter

                                                  • 22. Re: Online Order Forms
                                                    mhollis55 Level 4

                                                    Hans, I think you're going to confuse the poor soul.

                                                     

                                                    /htdocs/ is the standard "root" or starting directory for a Windows/Apache web server. But if you're on a standard Linux/Apache model, you'll find your staring directory to be /public_html/ and on a Windows IIS server, it can be literally anything that you define in Windows.

                                                     

                                                    For organization, everyone is going to roll his or her own, based on their own common sense.

                                                     

                                                    respiro, the directory that Hans was referring to is a Javascript directory called /js/ in the root of your website. Assuming you know where on your server to put your web pages, you should have a /js/ directory under the root -- as Hans demonstrated in his image.

                                                     

                                                    Here's what I see in your code, respiro:

                                                     

                                                    No call to any external JavaScript file and no JavaScript in your web page. Remember, above, I suggested that you put stuff in a certain order. You want your CSS calls first in your <head> area and you want your JavaScript after that before you end with </head>.

                                                     

                                                    If you are trying to do the calculations using JavaScript or jQuery, you have to point your page to where your calculation engine is. I suggested the use of php, which is how I usually do these things so that I can set up an online store but, if all you are trying to do is a simple calc so that the user can copy the result in an email to you, JavaScript will serve.

                                                     

                                                    If you are using jQuery for anything, the call to jQuery needs to go before any other external JavaScript file that calls it.

                                                     

                                                    So, if you have a script called "formcalculations.js," and you have it in a /js/ subdirectory (or folder) for organization's sake (which is what Hans and I are recommending), you need to have a call to it in your <head> area thusly:

                                                     

                                                    <script type="text/javascript" src="js/formcalculations.js"></script>

                                                     

                                                    Then, you need to call that calculation routine in your form. Currently, you're calling nothing:

                                                     

                                                    <form id="orderform" name="orderform" method="post" action="">

                                                     

                                                    See what you have after action= ? It's an empty set of quotes.

                                                     

                                                    You need to solve the math in the form once submitted. So, you can choose to load a new page with the solution like this:

                                                     

                                                    <form id="orderform" name="orderform" method="post" action="answer.html" onsubmit="function getTotal()">

                                                     

                                                    Or you can use the page you have like this:

                                                     

                                                    When you load the body, tell the JavaScript file to hide the total:

                                                     

                                                    <body onload='hideTotal()'>

                                                     

                                                    Then at the top of your form:

                                                     

                                                    <form action="" id="cakeform" onsubmit="return false;">

                                                     

                                                    Then for the "submit" button, do all of the heavy lifting there:

                                                     

                                                    <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />

                                                     

                                                    Remember, none of this will work unless you load the external JavaScript file in your <head> area.

                                                     

                                                    Frankly, I'm so used to doing this kind of a thing in php that I'm second-guessing myself here—but I did follow the tutorial that you linked to, respiro and I do understand the logic.

                                                     

                                                    -Mark

                                                    • 23. Re: Online Order Forms
                                                      hans-g. Adobe Community Professional & MVP

                                                      Hello Mark,

                                                       

                                                      I'm afraid we two, we both are "going to confuse", sorry that I'll smile about it. We always are learning and learning, everyone in his level.

                                                       

                                                      ... and what the concerns "an individual behaviour", that's what I meant with my "My" in capital letters.

                                                       

                                                      Hans-Günter

                                                      • 24. Re: Online Order Forms
                                                        hans-g. Adobe Community Professional & MVP

                                                        Hello respiro,

                                                         

                                                        do you know how to use the source code (right click, select all, copy and insert in DW) from the demo of your "http://www.javascript-coder.com/javascript-form/javascript-calculator- script.phtml?

                                                         

                                                        Here the demo link:

                                                         

                                                        http://www.javascript-coder.com/files/calculation/cakeform.html

                                                         

                                                        It would be the best way, to copy it into your DW (I did it). And don't worry, in this case it is allowed and even welcomed!

                                                         

                                                        Hans-Günter

                                                        • 25. Re: Online Order Forms
                                                          respiro35 Level 1

                                                          Thanks Hans and Mark,

                                                           

                                                          Are you suggesting that i copy and paste the code into my DW and then adapt to the form i require?

                                                           

                                                          Alex

                                                          • 26. Re: Online Order Forms
                                                            hans-g. Adobe Community Professional & MVP

                                                            Hello Alex,

                                                             

                                                            please have a look here, where I made a simple website by using the above named demo:

                                                             

                                                            http://hansgd.de/AdobTest/db/cakeform.html. Please try it by inserting some entries. AND don't fear to copy this source code to see how it works. And here I'll show you MY file structure I used:

                                                             

                                                            drjavCakeFZ.jpg

                                                             

                                                            Screenshot shows FTP Filezilla.

                                                             

                                                            Good luck!

                                                            Hans-Günter

                                                            • 27. Re: Online Order Forms
                                                              respiro35 Level 1

                                                              Thanks Hans,

                                                               

                                                              I've done as you suggested by copying and pasting the code into my DW. I have replaced all the 'cake' entries with the ones i require. This is what i am left with http://www.steppedinsilver.com/orderform.html

                                                               

                                                              I have some questions;

                                                               

                                                              Can i now put the form into a table, if so how?

                                                              I still dont have a function that automatically calculates the total cost of the items selected. i.e. I want a total row

                                                              How do i set up where the order form information is submitted to?

                                                              If i want to alter the appearnace of the form i.e. color, font etc... how should i do this?

                                                               

                                                              Alex

                                                              • 28. Re: Online Order Forms
                                                                mhollis55 Level 4

                                                                OK, Hans, this is exactly what I expected. Respiro wants the result of the order sent to him (or someone able to expect to do fulfillment). And that's php, not JavaScript.

                                                                 

                                                                So, calculation ought to be done in php. The result should be an order that is emailed to Respiro, or someone who does fulfillment, and we're looking at the need for server-side code and not client-side.

                                                                 

                                                                Frankly, he ought to have this hired done.

                                                                • 29. Re: Online Order Forms
                                                                  hans-g. Adobe Community Professional & MVP

                                                                  Hi Alex,

                                                                   

                                                                  now at this point you should go back and take a closer look at my answer in position 17. In osgood_'s solution it is possible to form a sum of a plurality of positions. Furthermore it is possible (ie suppliers/company) to send an email with clients specific order.

                                                                   

                                                                  What concerns to put the form into tables: on principle yes, BUT ...?

                                                                   

                                                                  Hans-Günter

                                                                  • 30. Re: Online Order Forms
                                                                    hans-g. Adobe Community Professional & MVP

                                                                    Hi Alex,

                                                                     

                                                                    I remember this possibility too: http://www.mcfedries.com/javascript/ordertotals.asp.

                                                                     

                                                                    Hans-Günter