代码之家 › 专栏 › 技术社区 › Tzar

文本输入不为空时启用表单提交按钮的最简单方法

ecmascript-6 forms html javascript

Tzar · 技术社区 · 8 年前

submit 按钮,直到所有文本 inputs

实现这一点最简单、最惯用的方法是什么?我缺少什么?

const form = document.forms[0]
const inputs = form.querySelector("fieldset > *")
const submit = form.querySelector("[type=submit]")

inputs.addEventListener("change", () => {
  if (!inputs.length) {
    submit.disabled = true
  } else {
    submit.disabled = false
  }
})

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit">
</form>

我知道有很多关于堆栈溢出的问题和答案,但大多数都是不必要的复杂问题。

3 回复 | 直到 8 年前

Alex Turpin 6 年前

const form = document.forms[0];
const inputs = form.querySelectorAll("fieldset > input, fieldset > textarea");
const submit = form.querySelector("[type=submit]");

for (i in inputs) {
    var _input = inputs[i];

    if (typeof _input == 'object') {
    _input.addEventListener("change", () => {
      submit.disabled = false;

      for (i in inputs) {
        var _input = inputs[i];

        if (typeof _input == 'object') {
          if (_input.value == '') {
            submit.disabled = true;
            break;
          }
        }
      }
    });
  }
}

https://jsfiddle.net/un1m5jgq/13/

Sci Ranch 8 年前

您可以创建一个函数来检查输入是否为空。然后将该函数作为表单输入的回调函数。

编辑:

如果您有一个输入数组,则可以用于循环并替换所有单个输入变量。

let form = document.forms[0]
let nameInp = document.getElementById('name');
let emailInp = document.getElementById('email');
let messageInp = document.getElementById('message');

let submit = form.querySelector("[type=submit]")

function checkInputs() {
  if (nameInp.value != "" && emailInp.value != "" && messageInp.value != "") {
    
    submit.disabled = false;
    
  } else if(!(nameInp.value != "" && emailInp.value != "" && messageInp.value != "")){
    
    submit.disabled = true;
    
  }
}

nameInp.addEventListener("change",checkInputs);
emailInp.addEventListener("change",checkInputs);
messageInp.addEventListener("change",checkInputs);

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit" disabled>
</form>

Tzar 6 年前

你应该选择全部 inputs/textareas 在…内 fieldset 通过 querySelectorAll 和循环 for each 价值观

你应该尝试下面的代码来得到你想要的。您可以使用Jquery使其变得简单。

const form = document.forms[0]
var inputs = form.querySelectorAll("fieldset > input, fieldset > textarea"),result;
const submit = form.querySelector("[type=submit]")
console.log(inputs);
		for (var i = 0; i < inputs.length; i++) {
	    inputs[i].addEventListener('change', function() {
        for (var j = 0; j < inputs.length; j++) {
          if (!inputs[j].value.length) {
            submit.disabled = true
            return;
          } else {
            submit.disabled = false
          }
        }
		});
	}

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit" disabled>
</form>