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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form help needed

    I am trying to add some javascript to an order form to display a running total price. What I am trying to do is similar to selling really expensive teak boards. So expensive that they are sold by the foot AND inch! Then further down on the form, someone can select a radio button (default is no) to add varnishing, that would be based on the feet and inches already selected in two drop down lists, but with a very different price value. Then somewhere else on the form another radio button (default is no) to add a pedestal stand for a specific amount. And possibly create a provision to subtract a specific amount or percentage from the total in the event of a sale.

    It would be:
    Two drop down lists (feet in one, inches in the other) added together for the base price, if you click the radio button to add varnishing it would add a little more money based on the feet and inches already selected, but change the output value to a much smaller amount, then if you click the radio button to add a pedestal stand it would add a specific amount to the total. And maybe even a var to subtract a specific amount or percentage if on sale. I would also like the total to always be displayed in a box above the reset and submit buttons.

    Can this be done? Yeah I'm a noob, but could someone help me out with something that could get me going? Then I could try to adapt and adjust to specific needs.

    Thank you very much in advance

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Yes, this can easily be done. But if you know nothing about web programming (and that would seem to be true, since you weren't sure it could be done), you should really simply hire somebody to do this for you. Once you have the form complete, what will you do with it? Assuming you want to send it to yourself, now you need to have a form mailer, and that needs to be server-side code (e.g. PHP). So there's even more that you need.

    There is a special "Web Projects" forum on this site that would seem appropriate. Especially this one:
    http://www.codingforums.com/medium-projects-new-script-new-features-etc/
    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.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can this be done sort of meant can somebody help me with this. I'm learning but don't know enough to come up with the biggest part of it myself. I'm pretty good with html and css, but somewhat new to javascript. Paying someone else doesn't help me learn. I have a working form with all the options and is emailed to me through a form mailer, but a running total feature would be much more intuitive for the customer. I will try to modify anything to fit my needs, I just can't come up with the general script to get started with.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    In principle what is needed is:

    A text-input to display the total, initially with the value 0.00;
    JavaScript events of onclick, onchange, etc., attached to various form controls;
    These events will recalculate the total and change the value of the total-textbox;
    The figures needed to calculate the total need to be present somewhere on the page or stored in the script;
    The total might be emailed but it should be ignored: it is trivial for the customer to change the total.

    In a real system the costs to determine the total would be retrieved from a database on the server. Yet again, the total would be discarded when sent to the server and recalculated from scratch.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's pretty close. The total would display the default values of the selection defaults. So it would display a substantial value to begin with in a div block above the reset/submit buttons. There are many more options, but they don't change the price. Just a preference setting, but the form would be verified manually at my end, so a customer changing the total does no good. It is meant only as a convenience so the customer can see what the total is as they are selecting choices. (The few that change the total price.) Most of the ones that change the price are based on the base price given by the two drop down lists added together - one for feet, and one for inches. Then the same feet and inch selection values used with a different price factor to also calculate varnish and add that to the previous base value. Plus a way to add a specific amount if radio button is checked. The other one in the pair is set to no by default. And possibly another pair just like that that can subtract a specific amount or percentage if on sale. I would edit it for changing conditions as they happen.

    Did that make sense? I already have built the form from scratch and it works fine, I would just like to add a way for the customer to see the current price as they are filling out the custom order form - as a time and effort saver for both of us.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Why didn't you SAY " I already have built the form from scratch and it works fine" in the first post?

    So show us that <form>. It would be 500% easier to answer a specific question about a specific form than the kind of general question you originally posed.
    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.

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My first post was just an inquiry about the javascript part (that I don't have) in the javascript forum. It's a pretty big form with lots of formatting and css. It would take me an hour or two to cut out all of the unnecessary stuff to keep it from being to confusing and cluttered up. I can do that, but I thought I'd just ask about the very few form elements that I would like to effect with the javascript. Two drop down lists as a pair (the most important part), and two or three pairs of radio buttons. A pair so that one or the other has to be selected, and the default one being set to no or off. Nothing fancy or special about those elements. Even the form itself is formatted in a table instead of ul/li & css like the outer page, because of different size thumbnails and whatnot that was easier to layout properly using a table and cells. (No nested tables or cells around the important form elements.)

    I can post the relevant parts if it's that important.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Well, you know you *COULD* simply attach the HTML as a file in your post.

    Or, if you can put the <form> up live on a website we could see, that would work great.

    It's nice of you to offer to just post the relevant parts, but if that's a true pain, consider the above options.
    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.

  • #9
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I hope it still makes sense after being snipped into pieces.

    Code:
    <form action="/form-mailer.php" method="post" name="Order">
    <input type="hidden" name="subject" value="Custom Order">
    <input type="hidden" name="redirect" value="/thankyou.htm">
    
    <!--SNIP-->
    
    <table>
      <tr>
        <td>
    
    <!--Selected Feet and Inches are the most important-->
    
    <b><span style="font-size:12pt;color:#ff0000;">*</span>
    Length:<select size="1" name="b2_BoardLengthFeet" tabindex="29">
    	<option value="04">4</option>
    	<option value="05">5</option>
    	<option value="06" selected>6</option>
    	<option value="07">7</option>
    	<option value="08">8</option>
    	<option value="09">9</option>
    	<option value="10">10</option>
    	</select></b>feet
    <select size="1" name="b3_BoardLengthInches" tabindex="30">
    	<option value="00" selected>0</option>
    	<option value="01">1</option>
    	<option value="02">2</option>
    	<option value="03">3</option>
    	<option value="04">4</option>
    	<option value="05">5</option>
    	<option value="06">6</option>
    	<option value="07">7</option>
    	<option value="08">8</option>
    	<option value="09">9</option>
    	<option value="10">10</option>
    	<option value="11">11</option>
    	</select>inches
        </td>
      </tr>
    </table>
    
    <!--SNIP-->
    
    <table>
      <tr>
        <td>
    Varnish:&nbsp;&nbsp;&nbsp;<input type="radio" name="j1_Varnish" value="No" tabindex="65" checked>No
    <input type="radio" name="j1_Varnish" value="Yes" tabindex="66">Yes
    <font color="#808080">&nbsp;<b>(+ $7/ft)</b>
    
    <!--Hand varnished = $7 per board foot + $0.xx per extra inch-->
    
    <!--SNIP-->
    
    Finish:&nbsp;&nbsp;<input type="radio" name="k1_Finish" value="Spray" tabindex="68" checked></b>UPOL
     <b><input type="radio" name="k1_Finish" value="Polish" tabindex="69"></b>Polish
     <font color="#808080">&nbsp;<b>(+ $25.)</b></font><br />
     <font color="#808080">Polish:</font> 
    <input type="text" name="k2_FinishCustom" size="36" maxlength="128" tabindex="70" class="optional">
    
    <!--No Charge for gloss spray, but $25. if hand polished-->
    
        </td>
      </tr>
    </table>
    
    <!--SNIP-->
    
    <table>
      <tr>
        <td>
    Additional Comments: <input type="checkbox" name="p3_Comments" value="Yes" tabindex="88" onclick="toggle('Comments')"> (Check box for comment area)</span>
    <div id="Comments" style="display:none;">
    &nbsp;(Optional) <span style="font-size:8pt;font-style:normal;color:#4fa7df;">(1000 character limit)</span>
    <br />
    <textarea rows="5" name="p4_Comments" cols="64" tabindex="89" maxlength="1024" class="optional"></textarea>
    </div>
    
        </td>
      </tr>
    </table>
    
    <!--Plus certain amount for special request, minus certain amount or percentage if on sale-->
    
    <!--Centered DIV block here to display total?-->
    
    <p align="center" style="font-size:10pt;color:#4fa7df;position:relative;top:0px;left:-24px;"><i>We will email you to confirm your order &amp; the price so you can submit the deposit.</i>
    <br /><br />
    <input type="reset" value="Reset Form" name="reset" tabindex="90" onclick="return confirm('Are you sure you want to Clear the Order Form?')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Submit Order" name="submit" tabindex="91"></p>
    </form>

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Makes fine sense. Now, how much is the material cost? $7/ft for the finish. But what about the wood...or whatever it really is?

    And where is the checkbox for the stand? (Or is that now the polishing?)

    And you mean the width doesn't matter? Strange boards. Not that I think these are really boards.

    Oh...and is the price for the material on a sliding scale? $30/ft for up 2 ft, $25 for up to 4, etc.?

    Can't help you if you don't give details.
    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.

  • #11
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There was no point in leaving every variation possible to overly complicate it. Just having one example of each type, then it can be copied to another of the same type with a slight adjustment. The lengths are fixed numbers like $70 for 4 foot, $82 for 5 foot, etc. With them incrementing by the inch. Otherwise there is a $12 difference between a 4'11" and a 5'0". Same thing for the varnish but a smaller amount while re-using the same length selected. I can copy the polishing code to the pedestal selection just change the variable name or other small adjustment. Why ask for two examples of the same thing? I don't want to seem pushy or ungrateful for the help by expecting every possible combination handed to me on a silver platter. What I left in the code I posted should be enough to cover the different types of script calculations.

    The specific number value for the feet and inches are not important. Use whatever numbers you like. 2 4 6 8 10 12, or 20, 40, 60, 80, 100, 120, etc. I can change those to match the price list myself.

    What other details are you needing?
    Last edited by LarryW; 08-04-2012 at 07:41 AM.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As you seem to not know much about web programming my serious advice would be to pay a professional to do the work. Just as you would pay a professional to print your letterheads or fill in your tax returns or repair your delivery van rather than trying to do it yourself. You should use the precious resource of time to focus on your customers and generate sales for your business. The biggest cost of all to any business is the value of sales not made. You do not earn a dime by learning computer languages, however interesting you may find it. And it is silly to imagine that you can turn out work to professional standards.

    Where quality is the thing sought after, the thing of supreme quality is cheap, whatever the price one has to pay for it. - William James

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am not expecting to learn professional standards. This is only for my own small. I want to learn so that I can do other more minor things with it. And once again, paying someone else doesn't help me learn.

    All those posts and asking for more details, then still wouldn't help. No thanks on the sales pitch.

    Is there anybody that would like to take a stab at it and help me get over that first big hump?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form action="/form-mailer.php" method="post" id="Order">
    <input type="hidden" name="subject" value="Custom Order">
    <input type="hidden" name="redirect" value="/thankyou.htm">
    <table>
    <tr>
      <td>
        <b><span style="font-size:12pt;color:#ff0000;">*</span>
        Length:
        <select size="1" name="b2_BoardLengthFeet">
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6" selected>6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
       </select> feet
       &nbsp:&nbsp;
       <select size="1" name="b3_BoardLengthInches">
    	<option value="0" selected>0</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
    	<option value="11">11</option>
    	</select> inches
      </td>
    </tr>
    <tr>
        <td>
          Varnish:
          &nbsp;&nbsp;&nbsp;
          <label><input type="radio" name="j1_Varnish" value="No" checked/>No</label>
          <label><input type="radio" name="j1_Varnish" value="Yes"/>
              Yes <span style="color: blue; font-weight: bold;">(+ $7/ft)</span></label>
        </td>
    </tr>
    <tr>
        <td>
          Finish:
          &nbsp;&nbsp;
          <label><input type="radio" name="k1_Finish" value="Spray" checked/>Unpolished Gloss Spray</label
          <label><input type="radio" name="k1_Finish" value="Polish"/>
              Polish <span style="color: blue; font-weight: bold;">(+ $25)</span></label>
        </td>
    </tr>
    <tr>
        <td>
          Polish:
          <input type="text" name="k2_FinishCustom" size="36" maxlength="128" class="optional"
                 value="What am I supposed to do with this?"/>
        </td>
    </tr>
    <tr>
        <td>
           Additional Comments: <input type="checkbox" name="p3_Comments" value="Yes"/>
           <div id="Comments" style="display:none;">
              &nbsp;(Optional) 
              <span id="cmsg1" style="font-size:8pt;font-style:normal;color:#4fa7df;">
                  (1000 character limit)</span>
              <span id="cmsg2" style="color: red; font-weight: bold; display: none;">
                  1000 character limit was exceeded!</span>
              <br />
              <textarea rows="5" name="p4_Comments" cols="64" class="optional"></textarea>
           </div>
        </td>
    </tr>
    <tr>
        <th>
            Total for your order: <span id="total">$0.00</span>
        </th>
    </tr>
    </table>
    <br/>
    <br/>
    <p align="center" style="font-size:10pt;color:#4fa7df;position:relative;top:0px;left:-24px;">
    <i>We will email you to confirm your order &amp; the price so you can submit the deposit.</i>
    <br /><br />
    <input type="reset" value="Reset Form" name="Reset"/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" value="Submit Order"/>
    </form>
    
    <script type="text/javascript">
    (
      function() 
      {
          var form = document.getElementById("Order");
         
          // price chart...per foot...depends on length
          var prices = [
             [ 9, 38.90 ], // for 9 or more feet
             [ 7, 42.20 ], // for 7 or more
             [ 5, 45.80 ], // for 5 or more
             [ 0, 49.90 ]  // for less than 5
          ];
    
          form.Reset.onclick = function() {
              if ( confirm('Are you sure you want to Clear the Order Form?') )
              {
                  document.getElementById("Comments").style.display = "none";
                  return true;
              }
              return false;  
          }
          form.k1_Finish[0].onclick  = reCalculate;
          form.k1_Finish[1].onclick  = reCalculate;
          form.j1_Varnish[0].onclick = reCalculate;
          form.j1_Varnish[1].onclick = reCalculate;
          form.b2_BoardLengthFeet.onchange = reCalculate;
          form.b3_BoardLengthInches.onchange = reCalculate;
         
          form.p3_Comments.onclick = function() 
          {
              document.getElementById("Comments").style.display =
                  this.checked ? "block" : "none";
          }
    
          var Msg = document.getElementById("commentsMessage");
          var Msg1 = document.getElementById("cmsg1");
          var Msg2 = document.getElementById("cmsg2");
          function checkComments() 
          {
              if ( form.p4_Comments.value.length > 1000 )
              {
                  Msg1.style.display = "none";
                  Msg2.style.display = "inline";
                  form.p4_Comments.value = form.p4_Comments.value.substring(0,1000);
              } else if ( form.p4_Comments.value.length < 1000 ) {
                  Msg2.style.display = "none";
                  Msg1.style.display = "inline";
              }
          }    
          setInterval( checkComments, 250 ); // check comments every quarter second
    
          function reCalculate( )
          {
              var total = 0;
              // first, find the board length in feet and fractions:
              var board = Number( form.b2_BoardLengthFeet.value )
                        + Number( form.b3_BoardLengthInches.value ) / 12;
              // now find the price per foot:
              for ( var p = 0; p < prices.length; ++p )
              {
                  var price = prices[p];
                  if ( board >= price[0] )
                  {
                      // found the right price point...
                      total += board * price[1]; // length * price per foot
                      break; // out of loop
                  }
              }
              // then the varnish
              if ( form.j1_Varnish[1].checked ) /* varnish wanted */
              {
                  total += board * 7.0; // $7 per foot (fractions of feet included)
              }
              // and the polish
              if ( form.k1_Finish[1].checked ) /* hand polish wanted */
              {
                  total += 25.00;
              }
              document.getElementById("total").innerHTML = "$" + total.toFixed(2);
          }
    
          reCalculate(); // get it started...since 6 feet preselected
      }
    )();
    </script>
    </body>
    </html>
    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.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    The <font> tag is deprecated. You need to learn to use <span> with a style, instead.

    Notice that I added <label>s in a few places.

    I still don't know why you were so reluctant to give details; just meant I had to invent them. Makes me wonder what the REAL purpose of this is.
    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.


  •  

    Posting Permissions

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