JSFiddle - React, Tailwind, and code Playground

by videsignz

HTML

<form id="calculator">              <div class="f-field">                 <label for="sale-price">Sale Price</label>                 <input id="sale-price" type="text" value="" />             </div>              <div class="f-field">                 <label for="agent-commission">Highstreet agent commission</label>                 <input id="agent-commission" type="text" value=""/>             </div>              <div class="f-field">                 <label for="sale-time">Estimated sale time</label>                 <input id="sale-time" type="text" value=""/>             </div>              <div class="f-field">                 <input type="submit" value="Calculate"  />               </div>          </form>

JavaScript

$("#sale-price, #agent-commission, #sale-time").on("keyup keypress keydown blur input change", function() {
        
        // Remove All Non Numbers
        $(this).val($(this).val().replace(/[^0-9]/gi, ""));
        
    });

    $('#calculator').on('submit', function(e) {
        e.preventDefault();
    
        if ( ($('#sale-price').val() && $('#agent-commission').val() && $('#sale-time').val() ) != '' ) {
            $(this).submit();
        }
        else {
            alert('Please Fill In All Fields');
        }
    });