时间戳

首页 > 解决方案 > 更改单选按钮时如何清除表单

javascript - 更改单选按钮时如何清除表单

问题描述

我想在单选按钮更改时清除表单。示例性别是男性，我只在体重输入中填写数字如果我更改性别，表格将清晰或当我在所有输入中填写数字并单击计算然后 BMR 显示我如果我更改性别，表格也会清晰。

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>

标签： javascripthtml

解决方案

使用form.reset()然后检查按钮

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>

推荐阅读