JSFiddle - React, Tailwind, and code Playground

by Sam Tyson

HTML

Width <span>(6/14)</span>:<br /><input type="text" name="width" value="" size="4" maxlength="4" />feet<br />
Length <span>(4/14)</span>:<br /><input type="text" name="length" value="" size="4" maxlength="4" />feet<br/>

<select id="mySelect" >
    <option value="0">Please select</option> 
    <option value="20.00">Option1</option> 
    <option value="40.00">Option2</option> 
</select>

<button style="padding:1px 5px;">Update</button>

Total: &pound;
<span  id="total" style="color:#00F;"></span>

JavaScript

var width=$('input[name=width]');
var length=$('input[name=length]');
var error=$('span#error');
var firstoption = $('select#mySelect');
var val; 
var total=$('span#total');
var error = $("#error");

$('button').click(function() {
    if(!width.val()) {
       error.html('Please include a width!');
      width.focus();
    } else if(width.val()< 6) {
        error.html('Width must be greater then 6!');
      width.focus();
    } else if(width.val()>14) {
        error.html('Width must be less then 14!');
      width.focus();
    } else if(!length.val()) {
      error.html('Please include a length!');
      length.focus();
    } else if(length.val()<4) {
      error.html('Length must be greater then 4!');
      length.focus();
    } else if(length.val()>14) {
      error.html('Length must be less then 14!');
      length.focus();
    }

    if(!firstoption.val()) {           // options error ( Which works )
        error.html('Please include an option!'); 
        firstoption.focus(); 
    } else {
        error.html('');
        val =(((width.val()*0.90)*(length.val()*0.90) + (firstoption.val() )*100)/100); // Totals all values 
        total.html(format(val));
    }
});