html onsubmit無法啟動Javascript函數

Question

我有一個表單，其中包含Javascript填充的可緩存項的集合，以及一個文本框，它是用戶輸入的ID。 我想在表單提交中將用戶重定向到其余調用的JSON響應。 當我直接進入瀏覽器時，其余的URL起作用，但是將其傳輸到html和js卻使我不勝其煩。 單擊提交時，提交表單不執行任何操作。

我的表格-

<form id="query" action="get" onsubmit="return restLink();">
  <td>
    <select id="selectCacheableItemType">
      <option>Select a Cacheable Item Type</option>
    </select>
  </td>
  <td>
    Cacheable item Id: <input type="text" id="cacheableId"><br>
  </td>
</form>

可緩存項類型在此處填充-

window.onload = function cacheItemType(){
    var select = document.getElementById("selectCacheableItemType");
    var options = ["1", "2", "3", "4", "5", "6","7"];
    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
};

而restLink（）函數是-

function restLink() {   
    cachetypename = document.getElementyId('selectCacheableItemType').getValue();
    cacheid = document.getElementyId('cacheableId').getValue();
    return window.location.href = "http://localhost:8080/rest/query/"+ cachetypename + "/" + cacheid;
}

任何幫助深表感謝。

Answer 1

您正在嘗試設置window.location.href。 您要么想要將表單提交到該URL。 或者，您根本不需要表單，只想將位置更改為此URL。 您正在組合兩件事，這就是為什么它不起作用的原因。 我將擺脫它，僅使用onclick創建一個按鈕來調用restLink（）方法。 這里不需要表格。

像這樣：

<table>
<tr>
  <td>
    <select id="selectCacheableItemType">
      <option>Select a Cacheable Item Type</option>
    </select>
  </td>
  <td>
    Cacheable item Id: <input type="text" id="cacheableId"><br>
  </td>
</tr>
<tr>
    <input type="button" id="enterButton" onclick="restLink()">
</tr>
</table>

Answer 2

您是否嘗試過添加提交按鈕？

<form id="query" action="get" onsubmit="return restLink();">
  <td>
    <select id="selectCacheableItemType">
      <option>Select a Cacheable Item Type</option>
    </select>
  </td>
  <td>
    Cacheable item Id: <input type="text" id="cacheableId"><br>
  </td>
 <input type="submit" value="Submit" id="submitForm"/>
</form>

接着：

$(document).ready(
function(){
    cacheItemType();
 var select = $("#selectCacheableItemType");
    var options = ["1", "2", "3", "4", "5", "6","7"];
    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
});