Bytes Multiple Unit Calculator

byte_multiples.html

<!--
Requires Bootstrap and jQuery.
-->

<script type="text/javascript">
$(function() {
    $('.calc-input').change(function() {
        $('#calc-output').val(parseInt($('#calc-quantity').val()) * parseInt($('#calc-prefix').val()));
    }).trigger('change');
});
</script>

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Bytes Multiple Unit Calculator</h3>
            </div>
            <div class="panel-body">

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <input class="form-control calc-input" id="calc-quantity" value="20">
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <select class="form-control calc-input" id="calc-prefix">
                                <option value="1">&times; 1024&#8304; B</option>
                                <option value="1024">&times; 1024&sup1; kiB</option>
                                <option value="1048576">&times; 1024&sup2; MiB</option>
                                <option value="1073741824">&times; 1024&sup3; GiB</option>
                                <option value="1099511627776">&times; 1024&#8308; TiB</option>
                                <option value="1125899906842624">&times; 1024&#8309; PiB</option>
                                <option value="1000">&times; 1000&sup1; kB</option>
                                <option value="1000000">&times; 1000&sup2; MB</option>
                                <option value="1000000000">&times; 1000&sup3; GB</option>
                                <option value="1000000000000">&times; 1000&#8308; TB</option>
                                <option value="1000000000000000">&times; 1000&#8309; PB</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="bytes-out">Result:</label>
                    <div class="input-group">
                        <input class="form-control" id="calc-output" readonly>
                        <span class="input-group-addon">bytes (B)</span>
                    </div>
                </div>

                <p class="text-muted"><small>As defined by the 
                    International Electrotechnical Commission and the 
                    International System of Quantities.</small></p>
            </div>
        </div>
    </div>
</div>