JSFiddle - React, Tailwind, and code Playground

mocking up jQuery for pricesheet

by Phil Glau

HTML

<!-- Price Calculator -->
<h3>Pricing Details</h3>
<p class="large">
  <strong id="calc_main_info_1">Type-1 audio: $1.55 per minute</strong>
</p>
<table class="table table-striped table-bordered table-condensed pricing-details">
  <tr>
    <th colspan="2" data-label="Minutes of Audio/Tape">Minutes of Audio per Tape</th>
    <th colspan="2" data-label="Price">Price</th>
  </tr>
  <tr>
    <td colspan="2" data-label="Minutes of Audio/Tape">
    <input type="text" name="length" size="8" maxlength="3" class="minute_entry" id="mins_type_1" />Minutes</td>
    <input type='hidden' name="calc_type" val="123" class="calc_hid_type"/>
    <td colspan="2" data-label="Price">
      <strong id="calc_price_1">$5.00</strong>
    </td>
  </tr>
  <tr>
    <th data-label="Timecode">Timecode</th>
    <th data-label="Service">Service</th>
    <th data-label="Verbatim Style">Verbatim Style</th>
    <th data-label="Audio Format">Audio Format</th>
  </tr>
  <tr>
    <td data-label="Timecode">
      <select name="tc" id="calc_tc_1">
        <option value="No" SELECTED="">No</option>
        <option value="Yes">Yes + $0.45/minute</option>
      </select>
    </td>
    <td data-label="Service">
      <select name="service" id="calc_service_1">
        <option value="Normal" SELECTED="">Normal</option>
        <option value="Express">Rush + 80%</option>
      </select>
    </td>
    <td data-label="Verbatim Style">
      <select name="verbatim_choice" id="calc_verbatim_1">
        <option value="Clean">Clean</option>
        <option value="True">True + $0.20/minute</option>
      </select>
    </td>
    <td data-label="Audio Format">
      <select name="media" id="calc_media_1">
        <option value="upload" SELECTED="">Uploaded Audio</option>
        <option value="physical">Physical Media</option>
      </select>
    </td>
  </tr>
  <tr>
    <td colspan="6" class="smalltext">
    <large>
      <strong>Minimum per transcript: $5.00 for uploaded files/ $20.00 for physical media.</strong>
 ...

JavaScript

// data received from AJAX call
var title = "Type-1 - Uploaded Files"
var type_id = '1';
// could potentially pass back the keys as the "#id" which
// would allow us to send seperate updates for each price type.
var price_obj = {"p5_id_1":7.75, "p10_id_1":15.50,"p15_id_1":23.25,"p20_id_1":31,
"p30_id_1":46.50,"p40_id_1":62,"p50_id_1":77.50,"p60_id_1":93,"p75_id_1":116.25,
"p90_id_1":139.50,"p105_id_1":162.75,"p120_id_1":186};
// or just pass in array and keep the keys local?
var price_data = [7.75, 15.50, 23.25, 31, 46.50, 62, 77.50, 93, 116.25, 139.50, 162.75, 186.00];
var media_type = 'digital file uploaded';

////// This would reside local on the page /////
// fill in Price sheet.
$("#calc_tc_1").change(function() {
	alert($(this).val());
});
$("#calc_service_1").change(function(){
	alert($(this).val());
});
$("#calc_verbatim_1").change(function(){
	alert($(this).val());
});
$("#calc_media_1").change(function(){
	var media_type = $(this).val();
  if (media_type == 'physical') {
  	$("#calc_price_1").text('$20.00');
  } else {
  	$("#calc_price_1").text('$5.00');
  }
});
$("#price_sheet_caption_"+type_id).text(title);
$("#price_sheet_media_type_"+type_id).text(media_type);
// update the price_sheet_ids based on the keys of the returned 
// AJAX object. This is better since we can update each individual 
// sheet independently
for(var k in price_obj) {
	$("#"+k).text("$" + price_obj[k].toFixed(2))
};

(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 400; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
 ...