www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: Generating a Price Quote

  1. #1
    Join Date
    Apr 2009
    Posts
    12

    Exclamation Generating a Price Quote

    Hello everyone,

    I've been trying to code a price quote form in Javascript but can't get it to work with the parameters I require.

    Basically, I want a form that will accept a user's length and width dimensions for a glass sample (in inches), multiply them together, then multiply that total by the base cost of the glass. For example: 24" x 36" = 864" x $.10 per inch = $86.40 total. I would also like a quantity input field so that the user can quickly determine what 1, 10, 25, or even 100 pieces of glass (any quantity up to a 1000) would cost at whatever dimensions they enter. The total would appear once all fields have been entered and a "Calculate" button was clicked.

    I hope this is sufficient information for the relevant code to be generated.

    Thanks a lot!

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    please, provide the HTML and JavaScript code you already have. we could start from scratch but i think would be better to know what the form look like.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Apr 2009
    Posts
    12
    I really don't have any HTML or workable Javascript to provide. Just looking for a simple form I can implement on my product pages (in PHP, if that's relevant) to enable a user to quickly enter the dimensions of glass they want and a quantity which will give them an estimated cost for purchase.

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    a sample:
    Code:
    <html><head><title>Glass - Quote</title>
    <script type="text/javascript">
    onload = function(){
    document.getElementById("calc").onclick = function(){
    var form = this.form;
    form.unit.value = (form.sizeWide.value * form.sizeLength.value * .1).toFixed(2);
    form.total.value = "$ " + (form.unit.value * form.quantity.value).toFixed(2);
    }
    }
    </script></head>
    <body>
    <form><div style="width:300px;text-align:right;">
    <p>Length (inches): <input name='sizeLength' /></p>
    <p>Width (inches): <input name='sizeWide' /></p>
    <p>Quantity: <input name="quantity" /></p>
    <p>One unit cost: <input name="unit" readonly="readonly" /></p>
    <p>Total: <input name="total" readonly="readonly" /></p>
    <p><input type="button" value="Calculate quote" id="calc" /></p>
    </form></div>
    </body></html>
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  5. #5
    Join Date
    Apr 2009
    Posts
    12
    Works well so far, thank you for the prompt response and help.

    Just a few more things I'd like to have available for my customers: I'd like to include the option for the user to select from 2 different kinds of glass (standard/annealed or tempered glass, with cost associated with the glass selected)...perhaps in a dropdown menu? Also, I'd like to have the option of inserting minimum dimensions (with verification) and perhaps a "Clear" button next to the "Calculate" button in case the user makes a mistake entering a number or wishes to get another quote inputting new dimensions and/or quantities.

    Make sense?

  6. #6
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    option of inserting minimum dimensions (with verification)
    please, explain the quoted line, specifically when you mention with verification. what are the value associated to the type of glass? i think the clear button is unnecessary, user can type new value and then click calculate button. however, if needed, can be implemented.

    and finally, I thought you knew at least some coding. i think you should try something for yourself.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  7. #7
    Join Date
    Apr 2009
    Posts
    12
    Quote Originally Posted by ZeroKilled View Post
    please, explain the quoted line, specifically when you mention with verification. what are the value associated to the type of glass? i think the clear button is unnecessary, user can type new value and then click calculate button. however, if needed, can be implemented.

    and finally, I thought you knew at least some coding. i think you should try something for yourself.
    By "with verification" I mean setting a pair of dimensions as the lowest measurements by default, e.g., 36" x 36" minimum, and verifying (via JS) that the dimensions entered by the user do not fall below those default measurements.

    I can reasonably pass on the "Clear" button since those fields can be re-entered easily. I was only thinking it would be more a matter of convenience than functionality.

    JS coding isn't my strong suit; hence my asking for help. I've made several attempts at generating the code but as I said, haven't been successful at getting it to work the way I want. If it's too much of an imposition, I'll understand and request help elsewhere.

    Thank you again for your time and assistance.

  8. #8
    Join Date
    Apr 2009
    Posts
    12
    The values you asked about re: types of glass can be "x" or "y" as I haven't an exact cost yet. I can add those later when I have confirmed that. Thanks.

  9. #9
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    the minimum size is hardcoded, i doubt you want the client to specify the size!
    Code:
    <html><head><title>Glass - Quote</title>
    <style type="text/css">
    input, select{
    width:120px;
    }
    </style>
    <script type="text/javascript">
    function calcQuote(form){
    if(form.sizeWide.value < 36 || form.sizeLength.value < 36 || form.quantity.value > 1000){alert("Size is lower than 36 or the quantity is greater than 1000."); return;}
    form.unit.value = (form.sizeWide.value * form.sizeLength.value * form.glass.value).toFixed(2);
    form.total.value = "$ " + (form.unit.value * form.quantity.value).toFixed(2);
    }
    </script></head>
    <body>
    <form><div style="width:300px;text-align:right;">
    <p>Glass type: <select name="glass">
    <option value="">Choose a type</option>
    <option value=".1">Standard</option>
    <option value=".3">Tempered</option>
    </select></p>
    <p>Length (inches): <input name='sizeLength' value="36" /></p>
    <p>Width (inches): <input name='sizeWide' value="36" /></p>
    <p>Quantity: <input name="quantity" value="1" /></p>
    <p>One unit cost: <input name="unit" readonly="readonly" /></p>
    <p>Total: <input name="total" readonly="readonly" /></p>
    <p><input type="button" value="Calculate" onclick="calcQuote(this.form);" /> <input type="reset" value="Clear" /></p>
    </form></div>
    </body></html>
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  10. #10
    Join Date
    Apr 2009
    Posts
    12
    Works great. Thanks again for your assistance!

  11. #11
    Join Date
    Apr 2009
    Posts
    12
    I need to make a quick revision to the script. I need to set a minimum size charge of 3 sq. ft. for both glass types in the form, but require a minimum dimension of 9"x9" only for the tempered glass type, not the standard glass type. I assume I can expand the current script to include those additional parameters without calling an additional function, correct?

  12. #12
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    your request don't make sense to me. first, how user would type a 9x9 size if in the first place a 36x36 is the minimum size? and second, because the pointed fact, the minimum sq. ft. is 9. well, unless you have changed the script but you have neither showed us your current version.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  13. #13
    Join Date
    Apr 2009
    Posts
    12
    Apologies for the confusion. Hopefully this will clarify....

    The 9"x9" dimension will be the minimum selectable size for the tempered glass type, but there will be no minimum size required for the standard glass type. However, there will be a minimum size charge of 3 sq. ft. (432 sq. in.), regardless of dimensions input by the customer when selecting either glass type.

    Below is the code I've adapted from your submission earlier in this thread:

    <script type="text/javascript">
    function calcQuote(form){
    if(form.sizeHeight.value < 9 || form.sizeWidth.value < 9 || form.quantity.value > 1000){alert("No dimensions smaller than 9in. x 9in. or quantity greater than 1000 can be specified. Please re-enter your dimensions and/or quantity desired."); return;}
    form.unit.value = (form.sizeHeight.value * form.sizeWidth.value * form.glass.value).toFixed(2);
    form.total.value = (form.unit.value * form.quantity.value).toFixed(2);
    }
    </script>

    <form>
    <table width="75&#37;" border="0" cellspacing="0" cellpadding="4" class="prices">
    <tr>
    <td align="right">Glass:</td>
    <td>&nbsp;</td>
    <td colspan="4"><select name="glass">
    <option value="" selected="selected">Choose a type</option>
    <option value=".10">Standard/Annealed Glass</option>
    <option value=".15">Tempered Glass</option>
    </select></td>
    </tr>
    <tr>
    <td align="right" nowrap="nowrap">Width (in.):</td>
    <td>&nbsp;</td>
    <td><input name='sizeWidth' value="9" size="4" maxlength="4" /></td>
    <td>&nbsp;</td>
    <td align="right" nowrap="nowrap">Height (in.):</td>
    <td><input name='sizeHeight' value="9" size="4" maxlength="4" /></td>
    </tr>
    <tr>
    <td align="right">Quantity:</td>
    <td>&nbsp;</td>
    <td><input name="quantity" value="1" size="4" maxlength="4" /></td>
    <td>&nbsp;</td>
    <td align="right">Unit Cost:</td>
    <td nowrap="nowrap">$<input name="unit" size="10" maxlength="10" readonly="readonly" /></td>
    </tr>
    <tr>
    <td align="right">Total:</td>
    <td>&nbsp;</td>
    <td colspan="4">$<input name="total" size="13" maxlength="13" readonly="readonly" />
    &nbsp;<span style="font-size:80%">Price is for unpolished edges only.</span>&nbsp;</td>
    </tr>
    <tr>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan="4"><input type="button" value="Calculate" onclick="calcQuote(this.form);" />&nbsp;&nbsp;&nbsp;<input type="reset" value="Clear" /></td>
    </tr>
    </table>
    </form>

  14. #14
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    i'm confused on some details. the charge is a fixed value or a rate? in what instance the charge is applied, when the size is less than 432 sq in? in general, how you will do the math? the charge is multiplied or added? in other word, how is the formula?
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  15. #15
    Join Date
    Apr 2009
    Posts
    12
    The tempered glass will have a minimum size requirement of 9"x9". The standard glass won't. However, both glass types will have a minimum size charge of 3 sq. ft./432 sq. in., regardless of the size entered by the customer.

    For instance, if a user wanted a price for 1 12"x12" (1 sq. ft.) sheet of tempered glass, the formula would be: 1 (Qty) x 12" (Width) x 12" (Height) = 144 sq. in. (1 sq. ft.) x 3 sq. ft. (min. size charge) @ $20/sq. ft. OR $0.14/sq. in. = $60 Total Estimated Price.

    Does that make sense?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles