Q&A
連絡が遅くなり申し訳ございません。
既にお気づきかもしれませんが、知識がない状態でネットの断片的な情報を寄せ集めてコードを作りました。
ですので全体的に意味の分からないコードになってしまいました。
もう少し勉強して、全体的に修正をしてみます。
ご回答ありがとうございました。
if文でページを遷移させたい
簡単なログインページのようなものを作ってみたいです。
入力項目をif文でチェックして、入力が正しければページを遷移するというページを作りたいです。
下記のようにhtml,jsを作ったのですがページに遷移してくれません。
どのように修正すれば任意のページに飛ぶことができるでしょうか。
html
1<body> 2 <form id="login" action="mailto:アドレス" method="post" onsubmit="return Login.doLogin(this)"> 3 <p>アカウント<input type="text" name="acc" /></p> 4 <p>パスワード<input type="password" name="pw" /></p> 5 <p><input type="submit" value="ログイン" /></p> 6 </form> 7</body>
js
1var Login = {}; 2 3Login.doLogin = function doLogin(login) { 4 5 if (login.acc.value == '1234' && login.pw.value == '5678') { 6 window.location.href = 'https://www.yahoo.co.jp/'; 7 console.log('OK'); 8 } else { 9 console.log('error'); 10 } 11 return true; 12}
試したこと
コンソールにOKやerrorは表示されました。
回答4件
0
OKがでているならlocation.hrefの書き換えもうまくいくはずですが？
逆にonsubmitをつねにreturn trueしているのでdoLoginはfalseを返すべきでは？
投稿2018/10/10 04:23
総合スコア117728
0
locationよりformのactionが優先されるからではないでしょうか。
returnするべきはfalseですね。
それかpreventDefaultでsubmitを止めるか。
またactionにメールアドレスを指定したところでメールを送信したり入力した内容をメール本文に入れてくれたりを自動でしてくれるものではないので、何をしたくてこのように書かれているのかわかりませんが、
ちょっと意味不明な作りなので全体的に作り替えた方が良さそうです。
投稿2018/10/10 06:58
総合スコア80888
意味を通る作りにするのは最初の段階では簡単ではないとは思いますが、「プログラムは指示した通りにしか動かない」というのと「目的を達するためのルールと条件がある」というのを念頭に置いてみてください。
プログラムは制作者が何をしたいのか知りません。ですのでひとつひとつはじめてその土地を訪れる外国人に道案内をするように導いてあげてください。
ちゃんと案内をしてあげればちゃんと結果を返してくれます。
想定の結果を得られないのはどこか細かいところで道案内をミスっているのがほとんどです。
右だったのが左に行くだけで全くあさっての方向に進んでしまいますからね。
0
action="" や action属性を書かなかった場合は，送信先はそのHTMLファイル自身になるので、再描画されて、window.location.href が効かないような気がします・・（勝手な推測です）
なので、doLoginではチェックのみ行い、True なら actionのURLに遷移すればどうでしょうか？
javascript
1<script> 2 var Login = {}; 3 Login.doLogin = function doLogin(login) { 4 if (login.acc.value == '1234' && login.pw.value == '5678') { 5/* コメントアウト 6 window.location.href = 'https://www.yahoo.co.jp/'; 7*/ 8 console.log('OK'); 9 return true; /* 追加 */ 10 } else { 11 console.log('error'); 12 } 13 return false; /* true から false に変更 */ 14} 15</script>
HTML
1<form id="login" action="https://www.yahoo.co.jp/" onsubmit="return Login.doLogin(this)">
※この方法だと、www.yahoo.co.jp に ?acc=1234&pw=5678 のパラメータが付いていきますので、ログインボタンのclickイベントで処理した方がいいのでは？
投稿2018/10/10 06:27
総合スコア297
連絡が遅くなり申し訳ございません。
submitの場合はlocation.href = url;としてもリンク先に飛べないという情報を見つけましたので、
そもそもできなさそうです。
ご指摘いただいた通り、clickイベントに修正したところ遷移ができました。ありがとうございます。
0
Functionにこだわる必要がなければ、これはいかがでしょうか。
javascript
1document.getElementById("login").addEventListener("submit", function(e) { 2 e.preventDefault(); 3 if (login.acc.value == '1234' && login.pw.value == '5678') { 4 window.location.href = 'https://www.yahoo.co.jp/'; 5 console.log('OK'); 6 } else { 7 console.log('error'); 8 } 9});
投稿2018/10/10 04:27
総合スコア198
ご回答ありがとうございます。
質問時のactionの値が間違っていたので修正しました。
いただいたコードも試したのですが、結果は同じでした。
現状、"ログイン"ボタンを押すとコンソールにOKが表示され、メールが立ち上がります。
actionの値が空だとCannot POSTが出てしまうので、それが出ないようにmailto:アドレスにしています。
適切なactionの値を入れていないのが問題でしょうか。
そういう事でしたら、action="#"でいいと思います。：D
連絡が遅くなり申し訳ございません。
action="#"でページの先頭にジャンプさせるリンクを作ることができるのですね。
また１つ勉強になりました。ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/10 05:12
2018/10/10 05:14
2018/10/13 14:47 編集