Fatal编程技术网
  • javascript/
  • 使用Javascript检查表单元素并启用/禁用搜索按钮

使用Javascript检查表单元素并启用/禁用搜索按钮

javascript html forms validation

使用Javascript检查表单元素并启用/禁用搜索按钮,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我需要你的帮助 使用javascript，我如何添加某种类型的数据表单验证，这将是双重的： 第一个事件，[OnKeyUp]连接到所有输入框 第二个事件，[OnChange]附加到所有选择框 典型用户场景 如果任何输入框中存在任何数据且没有选定的选项值，则{启用搜索按钮}否则{禁用搜索按钮} <!DOCTYPE html> <html> <head></head> <body> <form id="myform"> Ca

我需要你的帮助

使用javascript，我如何添加某种类型的数据表单验证，这将是双重的：

第一个事件，[OnKeyUp]连接到所有输入框

第二个事件，[OnChange]附加到所有选择框

典型用户场景

如果任何输入框中存在任何数据且没有选定的选项值，则{启用搜索按钮}否则{禁用搜索按钮}

<!DOCTYPE html>

<html>

<head></head>

<body>
<form id="myform">
Cars
 <select id="car">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br>
Fruits
 <select id="fruits">
  <option value=""></option>
  <option value="apple">apple</option>
  <option value="banana">banana</option>
  <option value="pear">pear</option>
  <option value="strawberry">strawberry</option>
  <option value="mango">mango</option>
  <option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>

</html>
如果有任何选定的选项值，其选项值不为空且所有选项中均不存在数据，则{启用搜索按钮}否则{禁用搜索按钮}

<!DOCTYPE html>

<html>

<head></head>

<body>
<form id="myform">
Cars
 <select id="car">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br>
Fruits
 <select id="fruits">
  <option value=""></option>
  <option value="apple">apple</option>
  <option value="banana">banana</option>
  <option value="pear">pear</option>
  <option value="strawberry">strawberry</option>
  <option value="mango">mango</option>
  <option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>

</html>


汽车
沃尔沃汽车
萨博
梅赛德斯
奥迪



水果
苹果
香蕉
梨
草莓
芒果
橙色



蔬菜



数




var-car=$（“#car”）；变量水果=$（“#水果”）；
var veggie=$（“#veggie”）；变量编号=$（“#编号”）；
$（'select'）.change（函数（）{
验证（）；
});
$（'input'）.keyup（函数（）{
验证（）；
});
函数validate（）{
如果（$（veggie.val（）！=“”| |$（number.val（）！=“”）&&
$（car.val（）=''&$（fruits.val（）=''）{
$（'#search'）.prop（'disabled'，false）；
}如果（$（veggie）.val（）=''&$（number）.val（）=''，则为else&&
（$（car.val（）！=''水果.val（）！=''）{
$（'#search'）.prop（'disabled'，false）；
}否则{
$（'#search'）.prop（'disabled'，true）；
}
}

汽车
沃尔沃汽车
萨博
梅赛德斯
奥迪



水果
苹果
香蕉
梨
草莓
芒果
橙色



蔬菜



数
我不是100%确定，但是如果只有一个
select
元素有值或一个
input
元素有值，则您似乎希望启用该按钮，但如果两者（或两者都没有）都有值，则不启用该按钮

如果是这样的话，那么这应该是可行的，它允许您通过向顶部的数组添加ID，向其中添加所需的元素

var selectInputIds=['fruits'，'car']；
var textInputIds=['veggie'，'number']；
函数setButtonState（）{
var hasVal=函数（arr）{
对于（变量i=0；i
如果两种输入类型都有值，您的需求可能需要一些澄清。

您的代码不符合标准，在下拉框中选择了一个值，在输入框中键入了一些文本，反之亦然。结果仍然是一个禁用的搜索按钮。这是你的第一个要求，不是吗？任何输入中的文本+无选项选择=启用按钮或禁用按钮啊，这也是我在回答中假设的。您的代码不符合条件，在下拉框中选择了一个值，在输入框中键入了一些文本。最终结果仍然是一个禁用的搜索按钮。您的要求很模糊。您声明，如果一个有值而另一个没有，则启用按钮。这就是代码的作用。你从来没有指出当两者都有价值时会发生什么，所以我和另一个回答者不得不猜测。因此，我们的代码确实适用于您最初声明的内容。