英文:
JS Disable Button based on user input
问题
我在表单上有2个文本输入：
<div class="form-group">
<input type="text" class="form" id="descriptionInput" placeholder="Customer Name" onkeyup="manage(this)">
</div>
<div class="form">
<input type="text" class="form" id="contactName" placeholder="Contact Name">
</div>
想法是只有当这2个字段都有值时才启用提交按钮：
我的按钮：
<button type="submit" id="btSubmit" disabled>Add new Customer Entry</button>
我的启用/禁用函数：
function manage(descriptionInput, contactName) {
var bt = document.getElementById('btSubmit');
var custName = document.getElementById('descriptionInput').value.length;
var contact = document.getElementById('contactName').value.length;
if (custName > 0 && contact > 0) {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
问题是：
如果客户名称字段只有1个字符 + 联系人有1个或更多字符 = 不起作用
如果客户名称字段有2个字符 + 联系人有1个或更多字符 = 起作用
不确定发生了什么，有什么建议吗？感谢。
英文:
I have 2 text inputs on a Form:
<div class="form-group">
<input type="text" class="form" id="descriptionInput" placeholder="Customer Name" onkeyup="manage(this)">
</div>
<div class="form">
<input type="text" class="form" id="contactName" placeholder="Contact Name">
</div>
The idea is to enable the submit button only if these 2 fields have any value:
My button:
<button type="submit" id="btSubmit" disabled>Add new Customer Entry</button>
My enable/disable function:
function manage(descriptionInput, contactName) {
var bt = document.getElementById('btSubmit');
var custName = document.getElementById('descriptionInput').value.length;
var contact = document.getElementById('contactName').value.length;
if (custName > 0 && contact > 0) {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
Issue is:
if customer name field has 1 character only + contact has 1 or more characters = doesn't work
if customer name field has 2 characters + contact has 1 or more characters = it works
Not sure what's happening, any ideas?
Thanks
答案1
得分: 2
问题在于manage函数仅在#descriptionInput <input> 上触发键盘抬起事件时才被调用。为了解决这个问题，可以监视两个输入框的变化，以下是一个示例：
const btSubmit = document.querySelector('#btSubmit');
const descriptionInput = document.querySelector('#descriptionInput');
const contactName = document.querySelector('#contactName');
function manage() {
btSubmit.disabled = descriptionInput.value.length === 0 || contactName.value.length === 0;
}
descriptionInput.addEventListener('input', manage);
contactName.addEventListener('input', manage);
在这里，我不是监听键盘抬起事件，而是监听input事件，因为这个事件在例如粘贴文本时也会触发。此外，我将事件监听器添加到JavaScript中，而不是内联添加到HTML中。
英文:
The problem is that the manage function is only called when a key up event is triggered on the #descriptionInput <input>.
To fix that, monitor both inputs for changes, here is an example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btSubmit = document.querySelector('#btSubmit');
const descriptionInput = document.querySelector('#descriptionInput');
const contactName = document.querySelector('#contactName');
function manage() {
btSubmit.disabled = descriptionInput.value.length === 0 || contactName.value.length === 0;
}
descriptionInput.addEventListener('input', manage);
contactName.addEventListener('input', manage);
<!-- language: lang-html -->
<div class="form-group">
<input type="text" class="form" id="descriptionInput" placeholder="Customer Name">
</div>
<div class="form">
<input type="text" class="form" id="contactName" placeholder="Contact Name">
</div>
<button type="submit" id="btSubmit" disabled>Add new Customer Entry</button>
<!-- end snippet -->
Here, instead of listening for key up events, I'm listening for input events, this is more appropriate because this event is also triggered when you paste something in an input for example.
Also, instead of adding the event listeners inline, I'm adding them in JavaScript.
答案2
得分: 1
你忘记在第二个输入上添加 keyup 事件。
英文:
You forgot to add the keyup event on the second input.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论