Link to home
Start Free TrialLog in
Avatar of filtrationproducts
filtrationproductsFlag for United States of America

asked on

Website Interactive tool that will do calculations

I would like to add a very simple form to a website. The form will include, for example, two fields, one where you pick from a drop down list. This will be a type of vehicle (representing a value). The next will be a field where you enter a number (of hours). Then I would like it to take those two fields and display a calculation.

The site is hosted on WordPress. Is there a tool/plugin out there to accomplish this? Or would this need to be created manually?

Thanks in advance!
Dan
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

The code you need is shown below.
If you have the form already then you can enque the script below to add to the page.
Code assumes jQuery will be loaded
<form>
  <label for="vehicle">Vehicle</label><select id="vehicle" name="vehicle" class="calc">
	 <option value="">-- Select one --</option>
	 <option value="10">V1</option>
	 <option value="20">V2</option>
  </select><br/>
  <label for="hours">Hours</label> <input type="text" id="hours" name="hours" class="calc" /><br/>
  <label>Result</label> <input type="text" readonly name="result" id="result" />
</form>
<script>
$(function() {
  $('.calc').change(function() {
  var vehicle = $('#vehicle').val() || 1;
  
    $('#result').val(vehicle * $('#hours').val());
  });
});
</script>

Open in new window

Working sample here
ASKER CERTIFIED SOLUTION
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of filtrationproducts

ASKER

I used calculated fields form. Easily customization and was setup in a matter of minutes.