javascript - Enabling a button based on selected values
问题描述
Fair warning I have super janky code. With that being said, I have my button disabled from the start, as to reduce the amount of human error that happens upon submission of my form. I need to enable it when three specific fields are populated. However, one of those fields is a header tag in html that displays a stop watch. A jquery function then scrapes that output as text and stores it into an object called userInfo. I want to enabled my submission button when IDs task, source, and output are not blank/ = "00:00:00".
I have tried multiple if statements in various places to check the validation of the input values. However, with the most current if statement, it enables the button when the default is "disabled"
<div class ='row'>
<div class="input-field col s6">
<input type="text" id="task" class="autocomplete" placeholder ='Task' required>
<div class="input-field col s6">
<select id = 'source'>
<option value="" diasable selected></option>
<option value="some source">source1</option>
<option value="other source">source2</option>
</select>
<label>source1 or source2</label>
</div>
<h2 id = 'output'><b>0:00:00:00</b></h2>
<button id="start"class="waves-effect waves-light btn">start<i class="material-icons right">timer</i></button>
<button id="stop"class="waves-effect waves-light btn">stop<i class="material-icons right">timer_off</i></button>
<button id ="btn" class="btn waves-effect waves-light #26a69a" type="submit" name="action" disabled>Track It!
<i class="material-icons right">access_time</i>
</button>
I need the output for task,source,and the text value for output to not be blank/ "00:00:00" for the button to be enabled.
And here is some of the javascript
M.toast({html: 'Record Submitted'})
var userInfo = {};
userInfo.task= document.getElementById('task').value;
userInfo.source= document.getElementById('source').value;
userInfo.timeSpent= $("#output").text();
userInfo.units= $("#count").text();
google.script.run.userClicked(userInfo);
document.getElementById('task').value='';
var source = document.getElementById('source');
source.selectedIndex = 0;
M.FormSelect.init(source);
}
var h1 = document.getElementById('output'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
//clear = document.getElementById('clear'),
seconds = 0, minutes = 0, hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
解决方案
Try using a "change" event listener, and test if the button should be enabled or disabled on each change.
document.addEventListener("change", validate);
// I need the output for task,source,and the text value for output to not be blank/"00:00:00" for the button to be enabled.
function validate() {
const ready = $("#task").val() && $("#source").val() && $("#output").text() !== "00:00:00";
$("#btn").prop("disabled", ! ready);
}
推荐阅读
- internet-explorer-11 - 一段时间后显示“此内容无法在框架中显示”
- numpy - 使用查找表进行快速图像处理
- css - 如何减小图像背景的大小或将其删除
- batch-file - 将服务的启动类型更改为 Oracle 的批处理脚本
- google-bigquery - 在 AutoML 批量预测结果中指定 BigQuery 数据集/表的名称
- c# - 使用系统反射从类属性中查找所有类型的列表
- javascript - 对函数数组进行与运算
- html - 首先垂直对齐 div 元素,然后在下一列中水平对齐
- sql - 如何以编程方式重命名数据库文件?
- sql - 检索子查询中导致“单行子查询返回多行”的特定行