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 學校：

當用戶按下“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>