根据所选值启用按钮答案

【问题标题】：Enabling a button based on selected values根据所选值启用按钮
【发布时间】：2019-08-16 21:58:45
【问题描述】：

公平警告我有超级垃圾代码。话虽如此，我从一开始就禁用了我的按钮，以减少提交表单时发生的人为错误的数量。当填充三个特定字段时，我需要启用它。但是，其中一个字段是显示秒表的 html 中的标题标记。然后，一个 jquery 函数将该输出作为文本抓取，并将其存储到一个名为 userInfo 的对象中。我想在 ID 任务、源和输出不为空/ = "00:00:00" 时启用我的提交按钮。

我在不同的地方尝试了多个 if 语句来检查输入值的验证。但是，对于最新的 if 语句，它会在默认为“禁用”时启用按钮

<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>

我需要任务、源的输出和输出的文本值不为空白/“00:00:00”才能启用按钮。

这里是一些 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++;
        }
    }

【问题讨论】：

为什么不使用#btn的点击事件来验证所有三个条件并在满足时提交？

标签： javascript jquery html ajax google-apps-script

【解决方案1】：

尝试使用“更改”事件侦听器，并测试是否应在每次更改时启用或禁用按钮。

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); 
}

【讨论】：

这适用于第一次提交，但保持按钮为下一次提交启用。您对如何在提交后禁用它有任何想法，以便用户必须对相应字段进行有效输入？
@SamuelDaly 把它放在你的“提交成功处理程序”中，如果你有这样的东西的话。假设你需要验证服务器端是否成功，你需要类似google.script.run.withSuccessHandler(() => { $("#btn").prop("disabled", true);}).userClicked(userInfo); 这个例子展示了一个匿名函数，它只是在成功时禁用按钮，你也可以传入一个可以做很多事情的命名函数。
? google.script.run.withSuccessHandler(onSuccess); function onSuccess(){ $("#btn").prop("disabled", true);}).userClicked(userInfo); }
@SamuelDaly - 不完全是。 withSuccessHandler 返回 run 对象以进行链接。您不能将其链接到您的定义中。你想要google.script.run.withSuccessHandler(onSuccess).userClicked(userInfo); 并像往常一样在其他地方定义onSuccess（在它的末尾没有.userClicked

【解决方案2】：

通过阅读，我相信您想根据select#source的值将button#btn的disabled属性更改为enabled。您可以使用下面的示例代码来实现这一目标

// 1st: get select#source and button#btn using their ID
var source = document.getElementById('source');
var button= document.getElementById('btn');

// 2nd : capture source value on change using JS Event Listener
source.addEventListener("change", function() {
  if(source.value == "some source") {
    // 3rd : remove disabled attribute and set enabled attribute
    button.removeAttribute("disabled");
    button.setAttribute("enabled", "");
  }
});

【讨论】：