submitで送信してリンク先へ遷移する!
Javascriptでゲームっぽいものを作ってると、ちょいちょい普通はしないであろうことで詰まるので、解決したことをメモ。
■今回の問題
formにテキストを入力し、送信ボタンを押した場合だけじゃなく、enterを押したときにもエラーを返すなり、遷移させたりする。
アンケートフォームなどだと、enterを押して送信は誤動作につながる為なのか、調べてもなかなかたどり着けなかった。
■Enterキーでonclickする
http://alphasis.info/2013/09/javascript-dom-event-onsubmit/
なるほど、<input type="submit" value="送信">みたいに、type="submit"にすればいいのか!とやってみる。(type="button"にしてました)
元々:<INPUT type="button" value=" 決定 " onClick="Check02()">
エラーのために入れたアラートは返すけど、正解入れても遷移しない!
■formのsubmitでリンク先へ飛ばない
http://eight-web.com/blog/2012/07/13/html5formlink/
かなしい。厳密にいうと、リンク先に飛ばないというか、javascriptでlocation.href=url;みたいにしていたため、location.hrefがsubmitでは使えないっぽい。
さすがにsubmitで全く遷移ができないとかはないと思ったので、ちょっと調べると、actionで遷移できると分かった。<form action="url">みたいな。
でも、javascriptいれないと、テキストによって挙動が変えられない……
そうだ!getElementByIdしよう!idつけとけば、actionをgetできるはず!!
■フォームのエレメントへアクセスする
http://www.openspc2.org/reibun/JavaScript_technique/sample/03_form/001/
これだ!document.getElementById("").actionを使うことで、enterキーでもボタンでも正しい挙動を得ることができた!
■Javascript部分
<script type="text/javascript">
i=0;
function Check03(){
i++;
p="パスワード";
wo=document.PA03.pass.value;
if(wo==p){
document.getElementById("PA03").action = "blue_room.html";
}
else{
alert("パスワードが違います");
document.PA03.pass.value="";
if(i>=3){location.href="guestroom.html";}
}
}
</script>
■HTMLの部分
<FORM NAME="PA03" ID="PA03" onSubmit="Check03()">
<INPUT style="color:#000000;" type="text" name="pass" size="13" value="パスワード">
<INPUT type="submit" value=" 決定 ">
</FORM>