4 Replies Latest reply: Apr 12, 2012 10:37 PM by miah_biosc RSS

    Submit form, thankyou page, calculating total HELP!

    miah_biosc

      Hi after searching every forum, discussion and answers to similar questions in the whole universe of the internet I am still stuck!! I have tried just about everything so if someone can help and educate me on this matter I will be beyond happy you will have made my day!!!

       

      I have several questions I'll try make them as straight forward as I can....

       

      I have created a form which has several fields, one of which requires a calculation (litres of product * cost per litre) to produce total payable. which I want to appear near bottom before credit card details. Sounds simple? APARENTLY NOT!!! 

       

      I want my submit button to submit all fields to email and then produce a thank you page (which I have created)

       

      I also want to know more about securing this page (ie security certificates?) so that people can enter credit card details.

       

      Sounds simple but my uneducated web design brain cannot work it out!!!!!!!!!!! Please help!

       

      My form codes:

       

      <p><strong>Bioprime Order Form</strong> 
        <p align="Left">
        <form method=post action="/cgi-bin/example.cgi">
        Name <br>
        <input type="text" size="100" maxlength="150">
        <p>
        Address <br>
        <input type="text" size="100" maxlength="150"><br />
        <font face="Arial" size="1">Please Note: Invoice will be sent to this address</font>
        <p>
        Contact Numbers <br> Home  <input type="text" size="30" maxlength="12">
        <br>Work   <input type="text" size="30" maxlength="12">
        <br>Mobile <input type="text" size="30" maxlength="12"><br>
        <p>
        Amount required<br><input type="text" size="30" maxlength="8" id= "amount" > Litres  <br><br>
        Date required<br><input type="text" size="30" maxlength="12"><br>
        <font face="Arial" size="1">Please be advised there is a minimum product availability time of X days </font> <br>
        <br>Date of pickup<br><input type="text" size="30" maxlength="12"><br>
        <br>
        Total amount Payable: $<br>
        <br>Credit Card Details<br>
          Name on Card <input type="text" size="30" maxlength="12"> <br>
          Card Number   <input type="text" size="30" maxlength="12">
          Expiry Date <input type="text" size="10" maxlength="12">
          CCV <input type="text" size="10" maxlength="12"><br>
        <p>
        <br><input type="Submit" value="Submit"   />


        </form>

        • 1. Re: Submit form, thankyou page, calculating total HELP!
          Ben Pleysier MVP

          I have several questions I'll try make them as straight forward as I can....

          Not a good idea. One question per post is more than sufficient thank you.

          I have created a form which has several fields, one of which requires a calculation (litres of product * cost per litre) to produce total payable. which I want to appear near bottom before credit card details. Sounds simple? APARENTLY NOT!!! 

          APPARENTLY YES!!! Have a look at the following

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>Untitled Document</title>

          <style>

          #orderform label {width: 160px; float: left; display: block;}

          </style>

          </head>

           

          <body>

          <h2>Bioprime Order Form</h2>

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

            <p>

              <label for="amount">Amount required:</label>

              <input type="text" size="7" name="amount" id="amount" value="0" onChange="calculate_product_totalcost()"> Litres

            </p>

            <p>

                <label for="product_cost_display">Total amount Payable:</label>

              <input type="text" name="product_cost_display" id="product_totalcost_display" size="7" value="0" onFocus="this.blur()"><br>

              </p>

            <p>

                <input name="calculate" type="button" value="Calculate">

            </p>

          </form>

          <script>

          function calculate_product_totalcost() {

              var xForm = document.forms["orderform"];

              var litres = xForm.amount.value;

              var itemcost = 23.50; /* cost of the product */

              var totalcost = litres * itemcost;

              xForm.product_totalcost_display.value = "$ "+totalcost.toFixed(2);

          }

          </script>

          </body>

          </html>

           

           

          I want my submit button to submit all fields to e-mail and then produce a thank you page (which I have created)

           

          I do not know what you have got here cgi-bin/example.cgi. A better approach is to use server side code like PHP to process the form. That way you can stay with the same page which will include the thank you message. Have a look at how this guy did it http://www.linecraft.com/spry_data_utils/videos/sending_spry_email.php

          I also want to know more about securing this page (ie security certificates?) so that people can enter credit card details.

          Please take my advice and do not mess with credit card details, just give the likes of PayPal the privilege.

           

          Gramps

          • 2. Re: Submit form, thankyou page, calculating total HELP!
            miah_biosc Community Member

            sorry about the multi questions.

             

            I have entered the total value codes as advised above. however when I view in a browser and enter an amount it does not change the total value?!?!? Must have done something wrong

             

                <!-- InstanceEndEditable -->

            </div>

            <div id="content">
              <p> </p>
              <!-- InstanceBeginEditable name="ContentEditRegion" -->
              <p><strong>Bioprime Order Form</strong> 
              <p align="Left">
              <form method=post action="/cgi-bin/example.cgi">
              Name <br>
              <input type="text" size="100" maxlength="150">
              <p>
              Address <br>
              <input type="text" size="100" maxlength="150"><br />
              <font face="Arial" size="1">Please Note: Invoice will be sent to this address</font>
              <p>
              Contact Numbers <br> Home  <input type="text" size="30" maxlength="12">
              <br>Work   <input type="text" size="30" maxlength="12">
              <br>Mobile <input type="text" size="30" maxlength="12"><br>
              <p>
                <label for="amount">Amount required:</label> <br>

                 <input type="text" size="30" name="amount" id="amount2" value="0" onchange="calculate_product_totalcost()" />
                Litres <br />
              <br>Date required<br><input type="text" size="30" maxlength="12"><br>
              <font face="Arial" size="1">Please be advised there is a minimum product availability time of X days </font> <br>
              <br>Date of pickup<br><input type="text" size="30" maxlength="12"><br>
              <br>
                  <label for="product_cost_display">Total amount Payable <br>$</label>

                <input type="text" name="product_cost_display" id="product_totalcost_display" size="30" value="0" onFocus="this.blur()"><br>
              <br>Credit Card Details<br>
                Name on Card <input type="text" size="30" maxlength="12"> <br>
                Card Number   <input type="text" size="30" maxlength="12">
                Expiry Date <input type="text" size="10" maxlength="12">
                CCV <input type="text" size="10" maxlength="12"><br>
              <p>
              <br><input type="Submit" value="Submit"   />

             

             


            </form>

            <script>

            function calculate_product_totalcost() {

                var xForm = document.forms["orderform"];

                var litres = xForm.amount.value;

                var itemcost = 23.50; /* cost of the product */

                var totalcost = litres * itemcost;

                xForm.product_totalcost_display.value = "$ "+totalcost.toFixed(2);

            }

            </script>

            </body>

             

              </form>

             

            Thank you so much for helping

            • 3. Re: Submit form, thankyou page, calculating total HELP!
              Ben Pleysier MVP

              Add the highlighted

              <form method=post action="/cgi-bin/example.cgi" name="orderform" id="orderform">

              Gramps

              • 4. Re: Submit form, thankyou page, calculating total HELP!
                miah_biosc Community Member

                Thank you so much

                 

                And I will take your advise with PayPal (I was thinking that way anyways)