[英]Javascript Disable button until 3 or more input fields have a value
I have 6 input fields in my html page like so:我的 html 页面中有 6 个输入字段,如下所示:
<div class='inputBox'>
<form action="/" method="post">
<div>
<label>Angle of A = </label>
<input class='field' autocomplete="off" autofocus name="A" type="number">
</div>
<div>
<label>Angle of B = </label>
<input class='field' autocomplete="off" autofocus name="B" type="text">
</div>
<div>
<label>Angle of C = </label>
<input class='field' autocomplete="off" autofocus name="C" type="text">
</div>
<div>
<label>Side Length of a = </label>
<input class='field' autocomplete="off" autofocus name="a" type="text">
</div>
<div>
<label>Side Length of b = </label>
<input class='field' autocomplete="off" autofocus name="b" type="text">
</div>
<div>
<label>Side Length of c = </label>
<input class='field' autocomplete="off" autofocus name="c" type="text">
</div>
<div>
<button id='calculate' disabled="true" class='field' type="submit">Calculate</button>
</div>
</form>
</div>
I would like the button to be disabled until any 3 out of the 6 fields have a value.我希望按钮被禁用,直到 6 个字段中的任何 3 个具有值。 Here is my javascript code:
这是我的 javascript 代码:
function enableButton()
{
var filled = 0;
var fields = [...document.getElementsByClassName("field")];
for (var i = 0; i < 6; i++)
{
if (fields[i].length() > 0)
{
filled += 1;
}
}
if (filled >= 3)
{
document.getElementById("calculate").disabled = false;
}
else
{
document.getElementById("calculate").disabled = true;
}
}
Unfortunately the button stays disabled despite the number of fields that have a value.不幸的是,尽管具有值的字段数量很多,但按钮仍处于禁用状态。
Try using a change event to the input fields, I have used onkeyup
function to invoke the enableButton
function.尝试对输入字段使用更改事件,我使用
onkeyup
函数来调用enableButton
函数。 Instead of checking fields[i].length()
try to check whether fields[i].value
exist or not.而不是检查
fields[i].length()
尝试检查fields[i].value
是否存在。 Here is a working sample.这是一个工作示例。
function enableButton() { var filled = 0; var fields = [...document.getElementsByClassName("field")]; for (var i = 0; i < 6; i++) { if (fields[i].value) { filled += 1; } } if (filled >= 3) { document.getElementById("calculate").disabled = false; } else { document.getElementById("calculate").disabled = true; } }
<div class='inputBox'> <form action="/" method="post"> <div> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number" onkeyup="enableButton()"> </div> <div> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text" onkeyup="enableButton()"> </div> <div> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text" onkeyup="enableButton()"> </div> <div> <button id='calculate' disabled="true" class='field' type="submit">Calculate</button> </div> </form> </div>
that ?那 ?
I just added an id on the form element, and transformed the Id attribute of the button into name, so that I only have the for to declare as const我只是在form元素上加了一个id,把按钮的Id属性改成了name,这样我就只有for声明为const了
and also remove all unnecessary divs in the form, light code is always easier to read并删除表单中所有不必要的div,轻量级代码总是更容易阅读
const myForm = document.getElementById('my-form') , inFields = [...myForm.querySelectorAll('input.field')] ; myForm.oninput=()=> { let count = inFields.reduce((a,c)=>a+=(c.value.trim().length >0)?1:0,0) myForm.calculate.disabled = (count <3) } myForm.onreset=()=> { myForm.calculate.disabled = true }
label, input, button { display: block; float: left; margin: .3em; } label, button:first-of-type { clear: both; } label { width: 10em; line-height: 2.3em; text-align: right; }
<form action="/" method="post" id="my-form"> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number"> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text"> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text"> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text"> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text"> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text"> <button type="reset">reset</button> <button name='calculate' disabled="true" class='field' type="submit">Calculate</button> </form>
You might've had a few problems with that function, but the main problem is that you never call the enableButton
function.您可能在使用该函数时遇到了一些问题,但主要问题是您从未调用
enableButton
函数。 The code below calls it whenever one of the fields are changed.只要其中一个字段发生更改,下面的代码就会调用它。
function enableButton() { let filled = 0; let fields = document.getElementsByClassName("field"); for (let i = 0; i < fields.length; i++) { if (fields[i].value != "") { filled++; } } if (filled > 2) { document.getElementById("calculate").removeAttribute("disabled"); } else { document.getElementById("calculate").setAttribute("disabled", ""); } }
<div class='inputBox'> <form action="/" method="post"> <div> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number" onchange="enableButton()"> </div> <div> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text" onchange="enableButton()"> </div> <div> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text" onchange="enableButton()"> </div> <div> <button id='calculate' type="submit" disabled>Calculate</button> </div> </form> </div>
How did you call the function , also put a console log to check if the function is getting called.你是如何调用函数的,还放了一个控制台日志来检查函数是否被调用。 also as @certainPerformance told .length is a property not an function
也正如@certainPerformance 所说的 .length 是一个属性而不是一个函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.