A Pen by Chris Rockwell.

Form-onsubmit-handler.markdown

Form onsubmit handler

Using a 3rd party platform for a mobile app we are restricted to HTML/CSS only. We need a very simple calculator that is only used to display info back to a user - no processing is done. I'm using some JavaScript directly in the onsubmit to accomplish this. Ugly, but satisfies this specific use case.

A Pen by Chris Rockwell on CodePen.

License.

index.html

<form id="cumminsCalc" onsubmit="
  var cost = parseInt(costPerGallon.value)
, annual = parseInt(annualConsumption.value)
, percent = parseInt(percentEfficiency.value)/100
, trucks = parseInt(numberTrucks.value);
if (
  isNaN(cost) || isNaN(annual) || isNaN(percent) || isNaN(trucks)
) 
{
    calculations.value = 'Please complete all fields (using numbers only)';
    return false;
}
calculations.value = 
        cost
        * annual
        * percent
        * trucks;
                                 
return false;" oninput="">

  <label for="costPerGallon" required>Cost Per Gallon</label>
  <input name="costPerGallon" id="costPerGallon" value="4.00"><br>

  <label for="annualConsumption">Annual Fuel Consumption (gallons)</label>
  <input name="annualConsumption" id="annualConsumption" value="10000" required><br>

  <label for="percentEfficiency" id="percentEfficiency">% Higher fuel efficiency</label>
  <input name="percentEfficiency" value="2" required><br>

  <label for="numberTrucks">Number of Trucks</label>
  <input name="numberTrucks" id="numberTrucks" value="1" required><br>

  <label for="calculations">Annual Estimated Cost Savings ::: </label>
  <output name="calculations"></output><br>

  <input type="submit">
</form>