如何在 JavaScript 中提交表单后显示输出
[英]how to show the output after the form submit in JavaScript
问题描述
如何编辑代码，使function calculateTotal可以在提交按钮被按下时运行，输出是提交按钮按下后如何通过不断添加而不直接显示给人们。
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 onload='hideTotal()'> <div id="all"> <form action="/action_page.php" id="energyform" onsubmit="return false;"> <div> <div class="cont_order"> <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 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person2" onclick="calculateTotal()" />2 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person3" onclick="calculateTotal()" />3 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person4" onclick="calculateTotal()" />4 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person5" onclick="calculateTotal()" />5 </label> <br/> <label><i class="fa fa-flash"></i>Waste</label> <input type="checkbox" id="waste" name='waste' onclick="calculateTotal()" /><span id="error"></span> <hr><label><i class="fa fa-flash"></i>Energy Consumption Per Month</label></hr> <br/> <label> Electricity    </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 class="fa fa-flash"></i>Recycle </label></hr> <br/> <label for='yesalu' class="alu"> Aluminium and Steel  </label> <input type="checkbox" id="yesalu" name='yesalu' class="recycle" onclick="calculateTotal()" /> <br/> <label for='yesplas' class="plas"> Plastic                          </label> <input type="checkbox" id="yesplas" name='yesplas' class="recycle" 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>
1 个解决方案
解决方案1
1 已采纳 2022-07-21 16:27:10
将对calculateTotal()的调用移至表单的onsubmit ，而不是在所有onclick中进行。
也可以从其他函数中调用它。
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 onload='hideTotal()'> <div id="all"> <form action="/action_page.php" id="energyform" onsubmit="calculateTotal();return false;"> <div> <div class="cont_order"> <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 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person2" />2 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person3" />3 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person4" />4 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person5" />5 </label> <br/> <label><i class="fa fa-flash"></i>Waste</label> <input type="checkbox" id="waste" name='waste' /><span id="error"></span> <hr><label><i class="fa fa-flash"></i>Energy Consumption Per Month</label></hr> <br/> <label> Electricity    </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 class="fa fa-flash"></i>Recycle </label></hr> <br/> <label for='yesalu' class="alu"> Aluminium and Steel  </label> <input type="checkbox" id="yesalu" name='yesalu' class="recycle" /> <br/> <label for='yesplas' class="plas"> Plastic                          </label> <input type="checkbox" id="yesplas" name='yesplas' class="recycle" /> <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>
提交后如何增加和显示表单的数量
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.