ひよっこ blog

ゲーム制作について、作ったものや思ったことをつらつら書いていく予定

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>