JSFiddle - React, Tailwind, and code Playground

by Cameron Bernhardt

HTML

<form id="orderform" name="orderform">
    <!--Order form-->
    <div id="items">Types of items
        <input type="radio" id="items" name="items" value="1">Hard-copy Prints
        <input type="radio" id="items" name="items" value="2">Posters
        <input type="radio" id="items" name="items" value="3">Coffee Mugs
        <input type="radio" id="items" name="items" value="4">T-shirts</div>
    <div id="qualityofimage">Quality of Images
        <select name="quality" id="quality">
            <option value="1" selected>Good</option>
            <option value="2">Very Good</option>
            <option value="3">Excellent</option>
        </select>
    </div>
    <div>Glossy finish
        <input type="checkbox" name="gf" id="gf">
    </div>
    <div>Quantity
        <input type="text" id="qty" name="qty" size="5">
    </div>
    <div>
        <input type="button" id="calculate" value="Calculate" onclick="display()">
    </div>
    <div>Total
        <input type="text" id="cost" name="cost" readonly="readonly">
    </div>
</form>

JavaScript

var array = [
    [8.99, 9.99, 10.99],
    [9.99, 10.99, 11.99],
    [10.99, 11.99, 12.99],
    [11.99, 12.99, 13.99]
];

function display() {
    var row = $('select option:selected').val();
    var column = document.querySelector('input[name="items"]:checked').value;
    var gf = document.getElementById("gf");
    var qty = document.getElementById("qty").value;
    var total = 0;
    if (gf.checked) {
        total = (array[row][column] + 1) * qty;
    } else {
        total = (array[row][column]) * qty;
    }
    document.getElementById("cost").value = total;
}