如何在Javascript / HTML计算表单上实现“提交”按钮？

Question

I want to add a "Submit" button in order to execute the formula after submit is pressed, but I can't seem to connect the submit button to the code to make the total emissions update only when the button is pressed.

When you input a vehicle type and miles driven and press somewhere else on the page, the total emissions updates. I'm trying to implement a 'submit' or 'calculate' button so that the total emissions only updates when the button is clicked.

I'd also like to wrap the Javascript in a function rather than window.onload, but I'm not sure how to implement that either.

  window.onload = function () { var carType = document.getElementById('VehicleType'); var total = document.getElementById('totalEmissions'); var miles = document.getElementById('milesDriven'); carType.onchange = function(){ if(miles.value){ total.value = parseFloat(carType.value) * parseFloat(miles.value); } if(!miles.value || !carType.value){ total.value = ""; } }; miles.onchange = function () { if(miles.value && carType.value){ total.value = parseFloat(carType.value) * parseFloat(miles.value) } if(!miles.value || !carType.value){ total.value = ""; } }; }; 

 <strong>Car Type</strong></th><br> <select name="VehicleType" id="VehicleType"> <option value="">Select an option…</option> <option value="552">Sprinter Van</option> <option value="444">Personal Car</option> <option value="444">Renter Car</option> <option value="140">Bus or Shuttle</option> <option value="727">Diesel Truck</option> <option value="683">Regular Truck</option> </select> <br><br> <strong>Miles Driven</strong></th><br> <td width="65"><input type="text" name="milesDriven" id="milesDriven" size="15" maxlength="5"/></td> <td width="43">miles</td> <br><br> <strong>Total CO2 Emissions (grams)</strong><br> <td><input type="text" name="totalEmissions" id="totalEmissions" size="15" maxlength="5"/></td> 

Answer 1

What you need is not a submit button, but a regular <button> element. Just create one, give it an id , then listen for its click event, instead of change events of the other two elements. Check for validity inside the function that you execute when it's clicked and show the result, like this:

 window.onload = function() { var carType = document.getElementById('VehicleType'); var total = document.getElementById('totalEmissions'); var miles = document.getElementById('milesDriven'); var calculateButton = document.getElementById('calculateButton'); calculateButton.addEventListener('click', calculate); function calculate() { if (miles.value && carType.value) { total.value = parseFloat(carType.value) * parseFloat(miles.value); } if (!miles.value || !carType.value) { total.value = ""; } }; }; 

 <strong>Car Type</strong><br> <select name="VehicleType" id="VehicleType"> <option value="">Select an option…</option> <option value="552">Sprinter Van</option> <option value="444">Personal Car</option> <option value="444">Renter Car</option> <option value="140">Bus or Shuttle</option> <option value="727">Diesel Truck</option> <option value="683">Regular Truck</option> </select> <br><br> <strong>Miles Driven</strong><br> <input type="text" name="milesDriven" id="milesDriven" size="15" maxlength="5" />&nbsp;miles <br><br> <strong>Total CO2 Emissions (grams)</strong><br><input type="text" name="totalEmissions" id="totalEmissions" size="15" maxlength="5" /> <br><br> <button id="calculateButton">Calculate</button> 

Note 1: As @ScottMarcus pointed out in the comments, instead of using onXyz , it's better to use .addEventListener(eventName, callback) .

Note 2: I would suggest rechecking your HTML, if this is not part of something bigger, as there are a few problems I can see (which I fixed in my snippet). The W3C Markup Validation Service is a great place to check for problems in your markup.