テキストボックスのvalue属性でlocation.hrefをする

<script type="text/javascript">
function jumpPage(){
location.href = "http://hogemoge.com/foo/" + document.urlform.url.value;
}
</script>
<form name="urlform">
<input type="text" id="url">
<input type="submit" style="display: none;" onclick="jumpPage();">
</form>
というHTMLがあります。
しかし実際はページが飛びません。
どうしたら飛ぶようになりますか。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2009/10/23 23:11

実験してみました。

1）<input type="submit" style="display: none;" onclick="jumpPage();">
　となっているので、submitボタンは表示されません。
　リターンキーを押したときの動作はブラウザによって違うようです。
　jumpPage()が実行される場合と、クリックではないので無視される場合と。

2）jumpPage()が実行されるとlocation.hrefが書き換えられますが、直後にformのsubmitが実行されます。formにactionを設定しておくと動作がわかりますが、これもジャンプするブラウザとしないブラウザがあるみたい。
（本当にlocation.hrefを書き換えているかは不明：先にキャンセルされてるかも）

3）そこでsubmitをキャンセルするために、
　onclick="jumpPage();return false;"
みたいにしておくと、指定したURLへジャンプします。
ただし、display: noneのままだと、リターンキーでスクリプトが実行されないブラウザだと何も起こりません。
表示したくないのなら、formのonsubmitで行えばよろしいかと。

この回答へのお礼

ありがとうございます。
onsubmitにreturn false;をつけたらページが移動しました。

お礼日時：2009/10/23 23:55