Home > OS >  how to close the alert after the waste button is selected
how to close the alert after the waste button is selected

Time：07-22

if the waste button does not be select, it will show the Waste must be select, but after i select it and submit the form again the Waste must be select still show beside the checkbox of the waste how to solve it so that the Waste must be select will not be show again after the waste and submit button had been pressed. The main function for the waste is allvalidate().

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() {
    var 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
            alert("Waste must be selected");
            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" onsubmit="calculateTotal()">1&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2" onsubmit="calculateTotal()">2&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3" onsubmit="calculateTotal()">3&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" onsubmit="calculateTotal()">4&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5" onsubmit="calculateTotal()">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>
<br/>
                <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>

CodePudding user response：

You are just checking if vwaste() returns falseand adding textContent in the span. You are not removing that textcontent. So, You'll need if-else condition for that. Then it will remove textContent in span after submitting the form.

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() {
  var 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
    alert("Waste must be selected");
    error.textContent = "Waste must be select"
    error.style.color = "red"
    return false;
  } else {
    error.textContent = "";
  }
  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" onsubmit="calculateTotal()">1&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2" onsubmit="calculateTotal()">2&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3" onsubmit="calculateTotal()">3&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" onsubmit="calculateTotal()">4&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5" onsubmit="calculateTotal()">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>
            <br/>
            <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>

CodePudding user response：

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() {
    var 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
            alert("Waste must be selected");
            error.textContent = "Waste must be select"
            error.style.color = "red"
            return false;
        }
        else
        {
        error.textContent=""
        }
        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" onsubmit="calculateTotal()">1&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2" onsubmit="calculateTotal()">2&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3" onsubmit="calculateTotal()">3&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" onsubmit="calculateTotal()">4&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5" onsubmit="calculateTotal()">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>
<br/>
                <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>

You can later add else statement and clear all the html in waste class so it will remove the waste must be selected after submision

Page link：https//www.codepudding.com/os/484689.html

Prev:Setting value to default in a django for loop
Next:How to resize angular cdk virtual viewport height when viewport size changes
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding