CODEWITHSUNDEEP
javascripthtml
Patt.M
Patt.M

Reputation: 59

How to clear form when radio button is changed

I want to clear form when the radio button is changed. Example gender is male and I fill number in weight input only If I change gender, the form will be clear or when I fill number in all input and click calculate and then BMR show me If I change gender, the form will be clear too.

window.addEventListener("load", () => {
    document.getElementById('calculate').addEventListener('click', toBmr);
});

const toBmr = () => {
    const gender = document.querySelector('[name=gender]:checked').value;
    let weight = +document.getElementById('weight').value;
    let height = +document.getElementById('height').value;
    let age = +document.getElementById('age').value;

    if (weight && age && height) {
        let result = (10 * weight) + (6.25 * height) - (5 * age)
        result += gender === 'male' ? 5 : -161; 
        document.getElementById('result').innerHTML = result.toFixed(2);
        document.getElementById('showResult').style.display = "block";
    }
};

const clearForm = () => {
    document.getElementById('do-form').reset();
    document.getElementById('showResult').style.display = "none";
}

const changeGender = () => {
    let form = toBmr();
    let r = document.getElementById('showResult').style.display;
    if (r == "block") {
        form = document.querySelector('[name=gender]:checked').addEventListener('change', clearForm());
    } 
}

<form name="do-form" id="do-form">
<p>BMR Calculator</p>
<div id="selectGender" onchange="changeGender()">
  <p>Gender:
    <input type="radio" name="gender" value="male">Male
    <input type="radio" name="gender" value="female">Female
  </p>
</div>
<p>Weight:&nbsp;<input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;">&nbsp;kg</p>
<p>Height:&nbsp;<input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;">&nbsp;cm</p>
<p>Age:&nbsp;<input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length > 2) return false;"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" onclick="clearForm()">Clear</button><br><br>
<div class="row-result-tab" id="showResult" style="display:none;">
  <label>BMR = &nbsp;<span id="result"></span>&nbsp;calories/day</label>
</div>

Upvotes: 0

Views: 1059

Answers (1)

Joeri
Joeri

Reputation: 646

use form.reset() and then check the button

clearForm = (el) => {
  document.querySelector("#f1").reset(); // reset the form
  el.checked = true;  // since we passed the element into the function we can simply check it
}
<form id="f1">
  <input type="text" name="t" /><br />
  <input type="radio" id="b1" name="b" value="b1" onclick="clearForm(this)" />
  <label for="b1">b1</label><br>
  <input type="radio" id="b2" name="b" value="b2" onclick="clearForm(this)" />
  <label for="b2">b2</label><br>
</form>

Upvotes: 1

Related Questions