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 docu）

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

ボタンはフォーム送信ボタンとして機能するため、JavaScriptを実行するだけでなく、スクリプト自体を指すフォームも送信しようとします。を使用することにより<button type="button">、送信機能のない単なるボタンを定義します。

その上：周囲の要素が必要ない場合<form>は、コードから削除してみませんか？

于 2012-10-17T08:21:39.863 に答える