質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

4回答

6154閲覧

if文でページを遷移させたい

harinezumi2

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/10/10 04:18

編集2022/01/12 10:55

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は表示されました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

OKがでているならlocation.hrefの書き換えもうまくいくはずですが?
逆にonsubmitをつねにreturn trueしているのでdoLoginはfalseを返すべきでは?

投稿2018/10/10 04:23

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

harinezumi2

2018/10/10 05:12

ご回答ありがとうございます。 質問時のactionの値が間違っていたので修正しました。 現状、"ログイン"ボタンを押すとコンソールにOKが表示され、メールが立ち上がります。 actionの値が空だとCannot POSTが出てしまうので、それが出ないようにmailto:アドレスにしています。 やはりそれが問題でしょうか。
yambejp

2018/10/10 05:14

mailtoは確実性にかけるのでformのactionには向きません アンカーのhrefにつけてメーラーを立ち上げるくらいの機能だと思っておいたほうがいいでしょう
harinezumi2

2018/10/13 14:47 編集

連絡が遅くなり申し訳ございません。 actionにmailtoを使用しないようにします。 ご忠告ありがとうございます。
guest

0

locationよりformのactionが優先されるからではないでしょうか。
returnするべきはfalseですね。
それかpreventDefaultでsubmitを止めるか。

またactionにメールアドレスを指定したところでメールを送信したり入力した内容をメール本文に入れてくれたりを自動でしてくれるものではないので、何をしたくてこのように書かれているのかわかりませんが、
ちょっと意味不明な作りなので全体的に作り替えた方が良さそうです。

投稿2018/10/10 06:58

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

harinezumi2

2018/10/13 15:08

連絡が遅くなり申し訳ございません。 既にお気づきかもしれませんが、知識がない状態でネットの断片的な情報を寄せ集めてコードを作りました。 ですので全体的に意味の分からないコードになってしまいました。 もう少し勉強して、全体的に修正をしてみます。 ご回答ありがとうございました。
m.ts10806

2018/10/13 20:21

意味を通る作りにするのは最初の段階では簡単ではないとは思いますが、「プログラムは指示した通りにしか動かない」というのと「目的を達するためのルールと条件がある」というのを念頭に置いてみてください。 プログラムは制作者が何をしたいのか知りません。ですのでひとつひとつはじめてその土地を訪れる外国人に道案内をするように導いてあげてください。 ちゃんと案内をしてあげればちゃんと結果を返してくれます。 想定の結果を得られないのはどこか細かいところで道案内をミスっているのがほとんどです。 右だったのが左に行くだけで全くあさっての方向に進んでしまいますからね。
guest

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

miyakichi

総合スコア297

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

harinezumi2

2018/10/13 14:57

連絡が遅くなり申し訳ございません。 submitの場合はlocation.href = url;としてもリンク先に飛べないという情報を見つけましたので、 そもそもできなさそうです。 ご指摘いただいた通り、clickイベントに修正したところ遷移ができました。ありがとうございます。
guest

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

yeondev

総合スコア198

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

harinezumi2

2018/10/10 05:14

ご回答ありがとうございます。 質問時のactionの値が間違っていたので修正しました。 いただいたコードも試したのですが、結果は同じでした。 現状、"ログイン"ボタンを押すとコンソールにOKが表示され、メールが立ち上がります。 actionの値が空だとCannot POSTが出てしまうので、それが出ないようにmailto:アドレスにしています。 適切なactionの値を入れていないのが問題でしょうか。
yeondev

2018/10/10 05:31

そういう事でしたら、action="#"でいいと思います。:D
harinezumi2

2018/10/13 14:51

連絡が遅くなり申し訳ございません。 action="#"でページの先頭にジャンプさせるリンクを作ることができるのですね。 また1つ勉強になりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問