Simple instant price quote javascript

Question

Adam_24 0 Newbie Poster

8 Years Ago

Hi there,

I'm trying to create an instant price calculator in Javascript . Similar to https://mixam.co.uk/brochures but hopefully less complicated.
I have 4 fields;
'Paper Size'
'Pages'
'Numbering'
'Quantity'

I've managed to work out the code below following guides on other helpful websites.

Currently it shows the correct price once you select the the following fields, Paper Size, Pages, Numbering.

However the problem I have is with the Quantity, like all print jobs the price gets cheaper the more you buy.
Once the code works out the price for 1 Pad, the script will then work out the price for the different quantitys.

For example
1 Pad would be 'totalpadcost' * 1
2 Pads would be 'totalpadcost' * 2
10 Pads would be 'totalpadcost' * 1.75

<script type="text/javascript">

var prices =    {
                'dl' : '9.00'  ,
                'a6' : '10.00'  ,
                'a5' : '15.00'  ,
                'a4' : '25.00'  ,
                'a3': '35.00'  ,
                '2 Part' : '0.00'  ,
                '3 Part' : '20.00'  ,
                '4 Part' : '35.00'  ,
                'Yes' : '7.50'  ,
                'No': '00.00'  ,
                '1' : '00.00' ,  <-- Quantity Price
                '2' : '2' ,
                '3' : '1.9' ,
                '4' : '1.85' ,
                '5' : '1.8' ,
                '10' : '1.75' ,
                '15' : '1.70' ,
                '20' : '1.65' ,
                '25' : '1.60' ,
                '50' : '1.55' ,
                '75' : '1.50' ,
                '100' : '1.45'   <-- Quantity Price
        }

function addem(oSelect)
{
    var total = 0, oForm = oSelect.form;
    var i = 0, sel, sels = oForm.getElementsByTagName('select');
    while (sel = sels[i++])
        if (sel.className == 'items')
            total += parseFloat(prices[sel.options[sel.selectedIndex].value]|| 0, 10);
    document.getElementById('output').value = format(total);
}

function format(sAmount)
{
    sAmount = Math.round(sAmount * 100) / 100;
    return  '£' + ((sAmount != parseInt(sAmount)) ? sAmount : sAmount + '.00');
}

</script>
</head>
<body>
<form>
<tr>
<td class="label"><label for="pa_din-sizes">Paper Sizes</label></td>
<select class="items" name="items1" onchange="addem(this)">
<option>Paper Size</option>
<option value="dl">DL</option>
<option value="a6">A6</option>
<option value="a5">A5</option>
<option value="a4">A4</option>
<option value="a3">A3</option>
</select>
<td class="label"><label for="pa_din-sizes">Pages</label></td>
<select class="items" name="items2" onchange="addem(this)">
<option>Pages</option>
<option value="2 Part">2 Part</option>
<option value="3 Part">3 Part</option>
<option value="4 Part">4 Part</option>
</select>
<td class="label"><label for="pa_din-sizes">Numbering</label></td>
<select class="items" name="items3" onchange="addem(this)">
<option>Numbering</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<td class="label"><label for="pa_din-sizes">Quantity</label></td>
<select class="items" name="items4" onchange="addem(this)">
<option>Quantity</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="10" >10</option>
<option value="15" >15</option>
<option value="20" >20</option>
<option value="25" >25</option>
<option value="50" >50</option>
<option value="75" >75</option>
<option value="100" >100</option>
</select>
<input type="text" name="output" id="output">
</form>
</body>
<!-- END --->
<script language="javascript">
<!--
function sendText(){
var solu = document.getElementById('d1')[document.getElementById('d1').selectedIndex].value;
document.getElementById('price').value = solu

} 
// -->
</script>

Hopefully that makes sence, I am new to Java so don't do too hard on me.
Any questions please let me know.

Thanks in advance.
Adam

javascript

2 Contributors
9 Replies
456 Views
1 Day Discussion Span
Latest Post 8 Years Ago Latest Post by Adam_24

diafol

8 Years Ago

not sure I understand this:

1 Pad would be 'totalpadcost' * 1
2 Pads would be 'totalpadcost' * 2
10 Pads would be 'totalpadcost' * 1.75

Doesn't make much sense for 10? That would cost less than 2. Let's say the totalpadcost = 100

1 Pad would be 'totalpadcost' * 1 = 100 * 1 = 100 (100 each)
2 Pads would be 'totalpadcost' * 2 = 100 * 2 = 200 (100 each)
10 Pads would be 'totalpadcost' * 1.75 = 100 * 1.75 = 175 (17.50 each)

Even if you multiplied the 10 pads by 10 to get 100 * 1.75 * 10 = 1750 (175 each) it doesn't work as you are charging a premium for bulk orders. Perhaps I'm missing something.

Edited 8 Years Ago by diafol

diafol

8 Years Ago

You need a new formula:

function getCost()
{
    paperSize = getPaperSize();
    pages = getPages();
    numbering = getNumbering();
    quantity = getQuantity();
    unitPrice = getUnitPrice(quantity);
    return paperSize * pages * numbering * quantity * unitPrice;
}

cost = getCost();

Probably my approach.

diafol

8 Years Ago

BTW it's Javascript not Java. Java is a different language. I will get back to you later.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Adam_24 0 Newbie Poster · Answer 1 · 2016-03-15T11:10:53+00:00

Diafol,

I think I did a poor job of describing what I need.
Basically want I need is there to be a small discount for more bulk orders.
So if they order 10, the price per pad will be cheaper than if they ordered 2.

I wasn't sure how to put this into code.

Thanks for your time.
Adam

Adam_24 0 Newbie Poster · Answer 2 · 2016-03-15T11:22:15+00:00

This is what I have so far.
http://www.ncrprintinguk.co.uk/Order%20Now.html#work

Excuse the product designer, it's not quite finished.
As you can see the Quantity selection doesn't work.
All the code at the moment can do is work out the price for 1 pad.

Adam

Adam_24 0 Newbie Poster · Answer 3 · 2016-03-15T13:54:52+00:00

Diafol

Thanks for your help
I will attempt to amend my code.

Thanks again
Adam

Adam_24 0 Newbie Poster · Answer 4 · 2016-03-15T14:11:05+00:00

Diafol,

Sorry to be a pain, I'm new Java.
How would I incorporate this into my code?

I imagine I need to create different Variations, so;

Var paperSize =
Var Pages =

ect?

And then replace

function addem(oSelect)
{
    var total = 0, oForm = oSelect.form;
    var i = 0, sel, sels = oForm.getElementsByTagName('select');
    while (sel = sels[i++])
        if (sel.className == 'items')
            total += parseFloat(prices[sel.options[sel.selectedIndex].value]|| 0, 10);
    document.getElementById('output').value = format(total);
}
function format(sAmount)
{
    sAmount = Math.round(sAmount * 100) / 100;
    return  '£' + ((sAmount != parseInt(sAmount)) ? sAmount : sAmount + '.00');
}

with the code you have provided?

Thanks again for your patience.
Adam

diafol · Answer 5 · 2016-03-15T23:23:19+00:00

THis works for me - but not sure what's going on with your discount data, so I set it to a multiplier of 2 (no discount), reducing to 1.45 (100).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  </head>
<body>

    <form>
        <label>Paper Sizes</label>
        <select class="items" id="psize">
            <option disabled selected value="0">Paper Size</option>
            <option value="dl">DL</option>
            <option value="a6">A6</option>
            <option value="a5">A5</option>
            <option value="a4">A4</option>
            <option value="a3">A3</option>
        </select>
        <label>Pages</label>
        <select class="items" id="pages">
            <option disabled selected value="0">Pages</option>
            <option value="2Part">2 Part</option>
            <option value="3Part">3 Part</option>
            <option value="4Part">4 Part</option>
        </select>
        <label>Numbering</label>
        <select class="items" id="numbering">
            <option disabled selected value="0">Numbering</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
        <label>Quantity</label>
        <select class="items" id="quantity">
            <option disabled selected value="0">Quantity</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="10" >10</option>
            <option value="15" >15</option>
            <option value="20" >20</option>
            <option value="25" >25</option>
            <option value="50" >50</option>
            <option value="75" >75</option>
            <option value="100" >100</option>
        </select>

        <input id="output">

    </form>
</body>


<script>

//Structure your data

    var myData = {
        "psize": {
            "dl": 9,
            "a6": 10,
            "a5": 15,
            "a4": 25,
            "a3": 35
        },
        "pages":  {
            "2Part": 0,
            "3Part": 20,
            "4Part": 35
        },
        "numbering": {
            "yes": 7.5,
            "no": 0
        },
        "quantity": {
            "1": 2,
            "2": 2,
            "3": 1.9,
            "4": 1.85,
            "5": 1.8,
            "10": 1.75,
            "15": 1.7,
            "20": 1.65,
            "25": 1.6,
            "50": 1.55,
            "75": 1.5,
            "100": 1.45
        }
    };

    var targetOutput = document.getElementById('output');
    var selects = [["psize",false],["pages",false],["numbering",false],["quantity",true]];
    var dd = document.getElementsByClassName("items");
    for (var i = 0; i < dd.length; i++)
        dd[i].addEventListener('change', getCost);


    function getCost()
    {
        var ans = 0;
        for(var i = 0; i < selects.length; i++) {
            v = getData(selects[i][0], selects[i][1]);
            if(v == null) return;
            ans = (selects[i][1]) ? ans * v : ans + v;
        }
        targetOutput.value = ans.toFixed(2);
    }

    function getData(ref, retProd)
    {
        var dataKey = document.getElementById(ref)[document.getElementById(ref).selectedIndex].value;
        return (retProd && dataKey != "0") ? parseInt(dataKey) * myData[ref][dataKey] : myData[ref][dataKey];
    }

</script>
</body>
</html>

It ain't great I know but worked for me. There is a far simpler 'static' approach, where you explicitly get very variable and place them into a fixed formula.

Adam_24 0 Newbie Poster · Answer 6 · 2016-03-16T11:20:28+00:00

Diafol,

Brilliant, I appreciate you helping me out.
Hopefully I should be able to tinker with the code myself.

Thanks again
Adam