Question

我有简单的html表单（2个文本字段和1个选择集＆amp;保存按钮）我想设置此按钮以禁用，直到文本字段和选择集具有值，如果这些字段具有值按钮变为活动时单击它显示警报消息（我需要使用JavaScript）

Answer 1

以下是使用JavaScript实现此目标的示例。这可能不是最好的方法，但作为一个例子，它是一个很好的起点。

http://plnkr.co/edit/LLg9DklQFMFFB7XRzX7t?p=info

<!DOCTYPE html>
<html>

  <head>
    <style>
      button#submit:disabled {
        color: #bbb;
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <h1>Form Example</h1>
    <form>
      <div>
        <label>Input 1</label>
        <input type="text" required="required" name="input1" id="input1" onkeyup="validate()" />
      </div>

      <br />

      <div>
        <label>Input 2</label>
        <input type="text" required="required" name="input2" id="input2" onkeyup="validate()" />
      </div>

      <br />
      <button id="submit" type="submit" disabled>Submit</button>
    </form>

    <script>
      var button = document.getElementById('submit');
      button.disabled = true;

      function validate() {
        var input1 = document.getElementById('input1');
        var input2 = document.getElementById('input2');

        if (input1.value && input2.value)
         button.disabled = false;
        else
         button.disabled = true;
      }
    </script>
  </body>

</html>

注意：按钮元素和disabled上的button.disabled = true属性是多余的。您应该能够删除任何一个，示例仍然按预期工作。

修改

如果您想使用onblur和onfocus事件而不是onkeyup，则上述示例中唯一的变化是将这些属性标记为使用validate函数像这样：

<input type="text" required="required" name="input1" id="input1" onblur="validate()" onfocus="validate()" />

有关完整示例，请参阅此更新的plunk：http://plnkr.co/edit/lc0vO8kBnhMyKD3xgPxo?p=info

请注意，此处的行为是这样的，如果您输入第一个输入，然后移到第二个输入，则提交不会启用，直到您离开第二个输入。类似地反过来，如果用户在此设置中验证后删除了他们在任一框中提供的内容，如果他们没有触发模糊事件，则提交按钮将保持启用状态。我认为这可能令人困惑，并且真的建议您在提交按钮上也应该onclick，如果这真的是您需要的话。这就是我最初建议使用onkeyup的原因，因为它会在键入值时捕获这些值，并避免额外的混淆或编程。

Answer 2

如果两个字段通过JavaScript使用querySelector()方法进行DOM操作，请尝试使用此按钮启用按钮。

var submitBtn = document.querySelector('#submitBtn');
var nameInput = document.querySelector('#nameInput');
var addressInput = document.querySelector('#addressInput');
var myOption = document.querySelector('#mySelect');

function validateInputs() {
  if (nameInput.value && addressInput.value && myOption.value)
    submitBtn.disabled = false;
  else
    submitBtn.disabled = true;
}

function showData(){
alert("Data is :"+nameInput.value);
}

<form>
  <label for="nameInput">Name</label>
  <input id="nameInput" type="text" name="name" onkeyup="validateInputs();" required>

  <label for="addressInput">Address</label>
  <input id="addressInput" type="text" name="address" onkeyup="validateInputs();" required>
  <br><br>
  <select onchange="validateInputs();" id="mySelect">
   <option disabled selected value> -- select an option -- </option>
  <option>New York</option>
  <option>Chicago</option>
</select>
  <br><br>
  <button id="submitBtn" onclick="showData();" disabled>Submit</button>
</form>

如果字段在JavaScript中有值，我该如何启用表单的保存按钮？

2 个答案: