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：

onsearch事件发生在用户按下＆＃34; ENTER＆＃34;键或点击＆＃34; x＆＃34; <input>元素中的按钮，类型为＆＃34;搜索＆＃34;。

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

1 个答案: