JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<div class="box">
  <h1>UNDER CONSTRUCTION</h1>
  <p style="text-align:center;"> Here you can use our simple pricing form to work out the cost of your print.</p>
  <br>
  <form>
    <div class="form-row">
      <div class="col-lg-3">
        <input id="size-width" type="text" class="form-control" placeholder="Width">
      </div>
      <div class="col-lg-1">
        <p style='text-align:center;'>X</p>
      </div>
      <div class="col-lg-3">
        <input id="size-height" type="text" class="form-control" placeholder="Height">
      </div>
      <div class="form-group col-lg-3">
        <select id="paper-type" class="form-control">
          <option selected>Paper....</option>
          <option id="paper1" data-multiplier="0.06">Fine art Smooth</option>
          <option id="paper2" data-multiplier="0.042">230 Mat</option>
        </select>
      </div>
      <button id="gen-price" type="submit" class="btn btn-primary">Generate Price</button>
    </div>
    <div class="form-row">
      <fieldset disabled>
        <div class="form-group">
          <label for="disabledTextInput">Price</label>
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Generated Price">
        </div>
      </fieldset>
    </div>
  </form>
</div>

JavaScript

jQuery($ => {
  $('form').on('submit', e => {
    e.preventDefault();
    
    let width = $('#size-width').val() || 0;
    let height = $('#size-height').val() || 0;
    let multiplier = $('#paper-type option:selected').data('multiplier') || 0;
    let price = Math.max(3, width * height * multiplier).toFixed(2);
    $('#disabledTextInput').val(price);
  });
});