how to show the output after the form submit in JavaScript-CodePudding

How to edit the code so that the function calculateTotal can run when the submit button is pressed, and the output is how after the submit button press but not directly show to people by keep adding.

var person = [];
person["person1"]=1; 
person["person2"]=2;
person["person3"]=3;
person["person4"]=4;
person["person5"]=5;

var elec = [];
elec["elecuse"] = 0;
elec["elec1"] = 100*(5455/12);
elec["elec2"] = 150*(5455/12);
elec["elec3"] = 200*(5455/12);
elec["elec4"] = 250*(5455/12);
elec["elec5"] = 300*(5455/12);
elec["elec6"] = 350*(5455/12);
elec["elec7"] = 400*(5455/12);
elec["elec8"] = 450*(5455/12);
elec["elec9"] = 500*(5455/12);
elec["elec10"] = 550*(5455/12);
elec["elec11"] = 600*(5455/12);
elec["elec12"] = 650*(5455/12);
elec["elec13"] = 700*(5455/12);

function getNumberperson()
{  
    var numberperson=0;
    var theForm = document.forms["energyform"];
    var selectedPerson = theForm.elements["selectedperson"];
    for(var i = 0; i < selectedPerson.length; i  )
    {
        if(selectedPerson[i].checked)
        {
            numberperson = person[selectedPerson[i].value];
        }
    }
    return numberperson;
}

function getElectotal()
{
    var electotal=0;
    var theForm = document.forms["energyform"];
    var selectedElec = theForm.elements["electricity"];     
    electotal = elec[selectedElec.value];
    return electotal;
}

function waste()
{
    var mustwaste=0;
    var theForm = document.forms["energyform"];
    var waste = theForm.elements["waste"];

    if(waste.checked==true)
    {
        mustwaste=(692/12);
    }
    return mustwaste;
}

function recyclealu()
{
    var recyclealu=0;
    var theForm = document.forms["energyform"];
    var yesalu = theForm.elements["yesalu"];

    if(yesalu.checked==true)
    {
        recyclealu=-89.38;
    }
    return recyclealu;
}

function recycleplas()
{
    var recycleplas=0;
    var theForm = document.forms["energyform"];
    var yesplas = theForm.elements["yesplas"];

    if(yesplas.checked==true)
    {
        recycleplas=-35.56;
    }
    return recycleplas;
}

function checkAllRecycles() {
    const recycleBoxes = document.querySelectorAll('.recycle');

  if (recycleBoxes) {
    recycleBoxes.forEach((recycleBox) => {
      if (!recycleBox.checked) {
        recycleBox.checked = 'checked';
      }
    })
  }
  calculateTotal();
}

function calculateTotal()
{
    var totalco =  getNumberperson()*getElectotal()   waste()   recyclealu()   recycleplas();
    
    //display the result

    document.getElementById('totalConsumption').innerHTML =  totalco.toFixed(2);

}

//add a function to hide the result on page loading at the start
function hideTotal()
{
    document.getElementById('totalConsumption').innerHTML = "0";
} 

function vwaste()
{
    var cw = document.getElementsByName('waste');
    for (var i = 0; i < cw.length; i  )
    {
       if (cw[i].type == 'checkbox')
        {
        if (cw[i].checked) {return true}
        }
    }
  return false;
}

function allvalidate()
{
    var error = document.getElementById("error")
    if (!vwaste())
        {
            // Changing content and color of content
            error.textContent = "Waste must be select"
            error.style.color = "red"
            return false;
        }
        return true;
    
    
}

<body onl oad='hideTotal()'>
    <div id="all">
        <form action="/action_page.php" id="energyform" onsubmit="return false;">
        <div>
            <div >
               <fieldset>
                <legend>Carbon Footprint Calculator</legend>
                <label >Number of Person Live in Household</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person1" onclick="calculateTotal()" />1&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2" onclick="calculateTotal()" />2&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3" onclick="calculateTotal()" />3&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" onclick="calculateTotal()" />4&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5" onclick="calculateTotal()" />5&nbsp</label>
<br/>
                <label><i ></i>Waste</label>
                <input type="checkbox" id="waste" name='waste' onclick="calculateTotal()" /><span id="error"></span>

                <hr><label><i ></i>Energy Consumption Per Month</label></hr>
<br/>
                <label>&nbspElectricity&nbsp&nbsp&nbsp&nbsp</label>
                <select id="electricity" name='electricity' onchange="calculateTotal()">
                <option value="elecuse">0kWh</option>
                <option value="elec1">100kWh</option>
                <option value="elec2">150kWh</option>
                <option value="elec3">200kWh</option>
                <option value="elec4">250kWh</option>
                <option value="elec5">300kWh</option>
                <option value="elec6">350kWh (Avg US)</option>
                <option value="elec7">400kWh (Avg MY)</option>
                <option value="elec8">450kWh</option>
                <option value="elec9">500kWh (Avg AS)</option>
                <option value="elec10">550kWh</option>
                <option value="elec11">600kWh</option>
                <option value="elec12">650kWh</option>
                <option value="elec13">700kWh</option>
                </select>

                <hr><label><i ></i>Recycle </label></hr>
<br/>
                <label for='yesalu' >&nbspAluminium and Steel&nbsp&nbsp</label>
                <input type="checkbox" id="yesalu" name='yesalu'  onclick="calculateTotal()" />
<br/>
                <label for='yesplas' >&nbspPlastic&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>
                <input type="checkbox" id="yesplas" name='yesplas'  onclick="calculateTotal()" />
<br/>
                <button type="button" onclick="checkAllRecycles()">Select All</button> 
<br/>
                <p>Total CO2 produced per year per household:</p>
                <div id="totalConsumption">0</div>
                <label>pounds</label>
                <div>US Household average is 21,820 lbs per year.</div>
                </fieldset>
            </div>
            <input type='submit' id='submit' value='Submit' onclick="allvalidate()" />
            <input type='reset' id='reset' value='Reset' onclick="hideTotal()" />
        </div>  
       </form>
                    </div>

</body>

CodePudding user response：

Move the call to calculateTotal() to the form's onsubmit instead of doing it in all the onclick.

Also take calls to it out of other functions.

var person = [];
person["person1"] = 1;
person["person2"] = 2;
person["person3"] = 3;
person["person4"] = 4;
person["person5"] = 5;

var elec = [];
elec["elecuse"] = 0;
elec["elec1"] = 100 * (5455 / 12);
elec["elec2"] = 150 * (5455 / 12);
elec["elec3"] = 200 * (5455 / 12);
elec["elec4"] = 250 * (5455 / 12);
elec["elec5"] = 300 * (5455 / 12);
elec["elec6"] = 350 * (5455 / 12);
elec["elec7"] = 400 * (5455 / 12);
elec["elec8"] = 450 * (5455 / 12);
elec["elec9"] = 500 * (5455 / 12);
elec["elec10"] = 550 * (5455 / 12);
elec["elec11"] = 600 * (5455 / 12);
elec["elec12"] = 650 * (5455 / 12);
elec["elec13"] = 700 * (5455 / 12);

function getNumberperson() {
  var numberperson = 0;
  var theForm = document.forms["energyform"];
  var selectedPerson = theForm.elements["selectedperson"];
  for (var i = 0; i < selectedPerson.length; i  ) {
    if (selectedPerson[i].checked) {
      numberperson = person[selectedPerson[i].value];
    }
  }
  return numberperson;
}

function getElectotal() {
  var electotal = 0;
  var theForm = document.forms["energyform"];
  var selectedElec = theForm.elements["electricity"];
  electotal = elec[selectedElec.value];
  return electotal;
}

function waste() {
  var mustwaste = 0;
  var theForm = document.forms["energyform"];
  var waste = theForm.elements["waste"];

  if (waste.checked == true) {
    mustwaste = (692 / 12);
  }
  return mustwaste;
}

function recyclealu() {
  var recyclealu = 0;
  var theForm = document.forms["energyform"];
  var yesalu = theForm.elements["yesalu"];

  if (yesalu.checked == true) {
    recyclealu = -89.38;
  }
  return recyclealu;
}

function recycleplas() {
  var recycleplas = 0;
  var theForm = document.forms["energyform"];
  var yesplas = theForm.elements["yesplas"];

  if (yesplas.checked == true) {
    recycleplas = -35.56;
  }
  return recycleplas;
}

function checkAllRecycles() {
  const recycleBoxes = document.querySelectorAll('.recycle');

  if (recycleBoxes) {
    recycleBoxes.forEach((recycleBox) => {
      if (!recycleBox.checked) {
        recycleBox.checked = 'checked';
      }
    })
  }
}

function calculateTotal() {
  var totalco = getNumberperson() * getElectotal()   waste()   recyclealu()   recycleplas();

  //display the result

  document.getElementById('totalConsumption').innerHTML =  totalco.toFixed(2);

}

//add a function to hide the result on page loading at the start
function hideTotal() {
  document.getElementById('totalConsumption').innerHTML = "0";
}

function vwaste() {
  var cw = document.getElementsByName('waste');
  for (var i = 0; i < cw.length; i  ) {
    if (cw[i].type == 'checkbox') {
      if (cw[i].checked) {
        return true
      }
    }
  }
  return false;
}

function allvalidate() {
  var error = document.getElementById("error")
  if (!vwaste()) {
    // Changing content and color of content
    error.textContent = "Waste must be select"
    error.style.color = "red"
    return false;
  }
  return true;


}

<body onl oad='hideTotal()'>
  <div id="all">
    <form action="/action_page.php" id="energyform" onsubmit="calculateTotal();return false;">
      <div>
        <div >
          <fieldset>
            <legend>Carbon Footprint Calculator</legend>
            <label>Number of Person Live in Household</label><br/>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person1"/>1&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2"  />2&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3"  />3&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" />4&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5"  />5&nbsp</label>
            <br/>
            <label><i ></i>Waste</label>
            <input type="checkbox" id="waste" name='waste'  /><span id="error"></span>

            <hr><label><i ></i>Energy Consumption Per Month</label></hr>
            <br/>
            <label>&nbspElectricity&nbsp&nbsp&nbsp&nbsp</label>
            <select id="electricity" name='electricity' >
              <option value="elecuse">0kWh</option>
              <option value="elec1">100kWh</option>
              <option value="elec2">150kWh</option>
              <option value="elec3">200kWh</option>
              <option value="elec4">250kWh</option>
              <option value="elec5">300kWh</option>
              <option value="elec6">350kWh (Avg US)</option>
              <option value="elec7">400kWh (Avg MY)</option>
              <option value="elec8">450kWh</option>
              <option value="elec9">500kWh (Avg AS)</option>
              <option value="elec10">550kWh</option>
              <option value="elec11">600kWh</option>
              <option value="elec12">650kWh</option>
              <option value="elec13">700kWh</option>
            </select>

            <hr><label><i ></i>Recycle </label></hr>
            <br/>
            <label for='yesalu' >&nbspAluminium and Steel&nbsp&nbsp</label>
            <input type="checkbox" id="yesalu" name='yesalu'   />
            <br/>
            <label for='yesplas' >&nbspPlastic&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>
            <input type="checkbox" id="yesplas" name='yesplas'  />
            <br/>
            <button type="button" onclick="checkAllRecycles()">Select All</button>
            <br/>
            <p>Total CO2 produced per year per household:</p>
            <div id="totalConsumption">0</div>
            <label>pounds</label>
            <div>US Household average is 21,820 lbs per year.</div>
          </fieldset>
        </div>
        <input type='submit' id='submit' value='Submit' onclick="allvalidate()" />
        <input type='reset' id='reset' value='Reset' onclick="hideTotal()" />
      </div>
    </form>
  </div>

</body>