HTML

Question

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

但是提交按钮不起作用 ...只有在用户按下"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>

Answer 1

来自W3C Schools：

The onsearch event occurs when a user presses the "ENTER" key or clicks the "x" button in an <input> element with type="search".

与搜索字段相同形式的提交按钮不会触发搜索字段 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>

HTML - 提交按钮不起作用

HTML - Submit button does not work

javascript

search

button