html onsubmit没有启动Javascript功能

时间:2014-10-28 14:25:49

标签: javascript html forms

我有一个带有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;
}

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:2)

您正在尝试设置window.location.href。您要么将表单提交到此网址。或者您根本不需要表单,只想将位置更改为此URL。你正在结合两件事,这就是为什么它不起作用。我会摆脱from,只需创建一个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>

答案 1 :(得分:0)

您是否尝试过添加提交按钮?

<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);
});