Question

我想禁用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>

我知道在Stack Overflow上有很多与此相关的问题和答案，但是大多数问题都不必要地复杂。

Answer 1

可能与其他解决方案相似，我在JSFiddle中对此进行了测试，因此我知道它至少可以工作。

const user = new schema.Entity('users');

const message = new schema.Entity('messages', {
  user: user
});

const room = new schema.Entity('rooms', {
  messages: [message]
})

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

Answer 2

您可以使函数检查输入是否为空。然后只需将该函数作为表单输入的回调即可。

编辑：

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

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>

Answer 3

您应该在querySelectorAll字段集中选择所有输入/文本区域，并为每个值循环。

您应该尝试下面的代码来获取所需的内容。您可以使用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>

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

3 个答案: