HTML - 提交按钮不起作用答案

【问题标题】：HTML - Submit button does not workHTML - 提交按钮不起作用
【发布时间】：2015-07-29 21:03:41
【问题描述】：

请，此代码是一个搜索栏，可根据插入的单词将用户重定向到页面。

但提交按钮不起作用 ...仅当用户按下“Enter”键时才起作用。

谁能帮忙？

<datalist id="mylist">
    <option value="red">
    <option value="blue">
    <option value="black">
    <option value="white">
  </datalist>


<!-- Input Colors -->
<input type="hidden" id="red"  name="red" value="RED" required>
<input type="hidden" id="blue"  name="blue" value="BLUE" required>
<input type="hidden" id="black"  name="black" value="BLACK" required>
<input type="hidden" id="white"  name="white" value="WHITE" required>


<!-- Search Bar -->
<form>
  <input type="search" list="mylist" id="search" placeholder="What Color?" name="search_box" required autocomplete="off"
   onsearch="check(this)">
  <input type="submit">
</form>



<script>
function check(input) 

{
<!-- Validation Color 1 -->
if (input.value.toUpperCase() != document.getElementById('red').value)
{
<!-- Validation Color 2 -->
if (input.value.toUpperCase() != document.getElementById('blue').value)  
{
<!-- Validation Color 3 -->
if (input.value.toUpperCase() != document.getElementById('black').value) 
{ 
<!-- Validation Color 4 -->
if (input.value.toUpperCase() != document.getElementById('white').value) 
{


<!-- Action web site color WHITE -->
} 
else 
{ 
parent.location.href = 'http://www.websitecolor.com/white'
}


<!-- Action web site color BLACK -->
} 
else 
{ 
parent.location.href = 'http://www.websitecolor.com/black'
}


<!-- Action web site color BLUE -->
} 
else 
{ 
parent.location.href = 'http://www.websitecolor.com/blue'
}


<!-- Action web site color RED -->
} 
else 
{ 
parent.location.href = 'http://www.websitecolor.com/red'
}

}
</script>

【问题讨论】：

1.不确定对 onsearch 事件处理程序的支持有多大。 2. 你的 JavaScript 代码中不能有 HTML cmets，这只会导致语法错误。

标签： javascript html search button

【解决方案1】：

来自W3C Schools：

当用户按下“ENTER”键或单击 type="search" 的 <input> 元素中的“x”按钮时，会发生 onsearch 事件。

与搜索字段形式相同的提交按钮不会触发搜索字段onsearch 事件。相反，它会提交整个表单。由于没有设置action，它将提交到您所在的同一页面，有效地重新加载它（使用GET发送的表单中的数据）。

我认为您想调用函数check，并将搜索字段的引用作为参数。那么你不妨使用按钮类型的输入而不是提交，你应该添加一个onclick 事件。它看起来像这样：

<form>
  <input type="search" list="mylist" id="search" placeholder="What Color?" name="search_box" required autocomplete="off"
   onsearch="check(this)">
  <input type="button" onclick="check(document.getElementById('search'))">
</form>

【讨论】：