ログインに使う画面を現在作成中です。

PHP
1<!-- login.php -->
2<head>
3
4<script type="text/javascript" src="control.js"></script>
5
6</head>
7
8<body>
9		
10<!-- メールアドレス入力ボックス -->
11<div>
12<p>メールアドレス</p>
13<p><input type = "text" id = "login_adress" value = "" onChange = "login_check()"></p>
14</div>
15
16<!-- パスワード入力ボックス -->
17<div>
18<p>パスワード</p>
19<p><input type = "text" id = "login_pass" value = "" onChange = "login_check()"></p>
20</div>
21
22<!-- ログインボタン -->
23<div>
24<input id = "login_button" type = "submit" value = "ログイン" disabled = true onChange = "login_check()">
25
26</div>
27
28<div>
29<p><a>ご利用は初めてですか？</a></p>
30<p><input type = "button" value = "新規登録" onClick="window.location.href='regist.php'" ></p>
31</div>
32
33</body>

Javascript
1// control.js
2function login_check(){
3	
4	var adress = document.getElementById("login_adress").value;
5	var pass = document.getElementById("login_pass").value;
6
7	if(isset(adress) && isset(pass)) {
8
9		document.getElementById("login_button").disabled = false;
10	
11	}else{
12
13		document.getElementById("login_button").disabled = true;
14
15	}
16
17}

このようなコードを使い、
アドレスとパスワードの両方に入力された場合のみログインボタンを有効にしたいです。
GoogleChromeの検証機能を使うと、
isset is not definedと出てしまいます。
原因のご指摘お願いします。

行動規範の内容に同意します

回答4件

ベストアンサー

formの設定もなくinputにnameが設定されていないのでそのあたりの
基本を理解されたほうがよろしいかと思います。
またサブミットにonchangeを設定する必要もありません

addressが定義されていないことはないので
わざわざisset的な処理は不要で、空かどうかチェックすればいいでしょう
isset(adress)
↓↓↓
address===""
（passも同等）

逆にaddressおよびpassに一定の決まりがあるのであれば
それを別ユーザー関数にまとめてもいいかと思います

追記

まとめるとこんな感じでしょうか？
getElementById("login_button")でエラーは出ないと思います

HTML
1<script>
2window.onload=function(){
3  login_check();
4}
5function login_check(){
6  var adress = document.getElementById("login_adress").value;
7  var pass = document.getElementById("login_pass").value;
8  document.getElementById("login_button").disabled = (adress==="" || pass==="");
9}
10</script>
11<form>
12<div>
13<p>メールアドレス</p>
14<p><input type="text" id ="login_adress" value="" onchange="login_check()"></p>
15</div>
16<div>
17<p>パスワード</p>
18<p><input type="text" id ="login_pass" value="" onchange="login_check()"></p>
19</div>
20<div>
21<input id="login_button" type = "submit" value="ログイン">
22</div>
23</form>
24<div>
25<p><a>ご利用は初めてですか？</a></p>
26<p><input type="button" value="新規登録" onclick="location.href='regist.php'"></p>
27</div>

投稿2017/04/10 02:03

編集2017/04/10 03:13

yambejp

総合スコア114779

退会済みユーザー

2017/04/10 02:39

回答ありがとうございます。今回の質問には関係ないかと思い、nameは省略させていただいてました。おっしゃるとおり＝＝＝””に書き換えたところ、現在のエラーはなくなりましたが、次はCannot set property disabled of nullというエラーが出てしまいます。console.logで条件分岐の文はうまく通っていることが確認できました。こちらの解決法も可能であればお教えいただけないでしょうか。よろしくお願いします。

退会済みユーザー

2017/04/10 04:50

回答ありがとうございます。そちらのコードを引用させていただきましたが、uncaught typeerror:Cannot set property 'disabled' of null のエラーが出てしまします。

yambejp

2017/04/10 05:02

検証環境はWinのchromeですか？追記のソースをコピペで試しましたがエラーが再現できません

退会済みユーザー

2017/04/10 05:07

はい。Winのchromeです。実際のコードにはrepuire文などが入っているのですが、外部ファイルによって干渉が起きエラーになる可能性はありますでしょうか。

yambejp

2017/04/10 05:10

とりあえずは提示ソースのコピペでエラーがでないことを確認してからでしょうねあとはなんらかの競合が発生しているのでしたら当該部分の修正が必要になるでしょう

退会済みユーザー

2017/04/10 06:32

提示いただいたソースを単体で動かすことはできましたが、自分の使っているものに区k見込むとうまく動きませんでした。検証したところログインボタンがうまくJS側に持ってこれていなかったみたいなのでgetElementを使わずにnameで持ってくる方法を試してみたところうまく動かすことができました。いろいろアドバイス下さりありがとうございました。

行動規範の内容に同意します

JavaScriptにisset()は存在しません

以下のコードを最初に書くと使えるようになります

js
1var isset = function(data){
2    if(data === "" || data === null || data === undefined){
3        return false;
4    }else{
5        return true;
6    }
7};

参考：http://qiita.com/Evolutor_web/items/ffe5af0454f3743b4e43

投稿2017/04/10 01:59

yuta0801

総合スコア270

退会済みユーザー

2017/04/10 02:40

回答ありがとうございます。そのような方法があると知りませんでした。一度こちらの方法も試させていただきます。

行動規範の内容に同意します

issetはPHPの関数でJavascriptにはありません。
issetのようなことをしたい場合はここを参考にするといいと思います。

投稿2017/04/10 01:55

07JP27

総合スコア191

javascriptにissetはありません。

issetを自前で作るか、存在チェックを違う形でする必要があるかと思います。

javascript
1if (check !== null && check !== undefined && check !== ""){
2    // isset true
3} else {
4    // isset false
5}

みたいな感じですかね。

投稿2017/04/10 02:00

toshisum

総合スコア20

退会済みユーザー

2017/04/10 02:40

回答ありがとうございます。そのような方法があると知りませんでした。一度こちらの方法も試させていただきます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

Javascriptを用いた入力フォームの制御

追記

関連した質問