1 
<script type="text/javascript">
window.onload = init;

function init() { //wait for load and watch for click
    var button = document.getElementById("searchbutton");
    button.onclick = handleButtonClick;
}

function handleButtonClick(e) { //get user input and go to a new url
    var textinput = document.getElementById("searchinput");
    var searchterm = textinput.value;
    window.location.assign("http://google.com/example/" + searchterm)
}
</script>

<form>
    <input type="text" name="search" id="searchinput">  
</form>
<input type="submit" value="Ara" id="searchbutton">

在此代码块中，它获取用户输入并使用用户输入转到新的 url。

如果我将最后一行移到表单元素中，它将不起作用。但我使用 id 来查找元素。

4

3 回答 3

4

您可以按照下面的代码片段中的说明指定 OnSubmit，它将起作用。

<form method="GET" onsubmit="handleButtonClick(event)"> 
    <input type="text" name="search" id="searchinput">  
</form>

function handleButtonClick(e) { 

    var textinput = document.getElementById("searchinput");
    var searchterm = textinput.value;
    window.location.assign("http://google.com/example/" + searchterm)
    return false;
}
于 2012-10-17T08:39:36.647 回答
3

我怀疑这是因为您的submit按钮正在提交表单。

e.preventDefault();将和添加return false;到您的代码中。

function handleButtonClick(e) { //get user input and go to a new url
    e.preventDefault();
    var textinput = document.getElementById("searchinput");
    var searchterm = textinput.value;
    window.location.assign("http://google.com/example/" + searchterm)
    return false;
}

这应该会阻止表单提交跨浏览器。

于 2012-10-17T08:19:04.290 回答
2

代替

<input type="submit" value="Ara" id="searchbutton">

使用这个（MDN 文档）

<button type="button" id="searchbutton">Ara</button>

您的按钮用作表单提交按钮，因此它不仅会执行 JavaScript，还会尝试提交表单，该表单指向脚本本身。通过使用<button type="button">，您可以定义一个没有任何提交功能的单纯按钮。

此外：如果你不需要周围的<form>元素，为什么不把它从代码中删除呢？

于 2012-10-17T08:21:39.863 回答