###前提・実現したいこと
EclipseでStruts2を使えるように、TODO管理アプリケーション開発の教材を使って勉強をしている初心者です。
Struts2を使う前にTODO管理アプリケーション開発をServletやJSPを使った基本的な作り方でも作っています。
実現したいことは、JavaScriptを使ってログインページでユーザーがIDとパスワードを入力するまでログインボタンを無効にして、IDとパスワードの入力を確認すると有効になるようにすることです。
###発生している問題
事前に作ったTODO管理アプリケーションではjsファイルを読み込んだJavaScriptは上手く動作していたのですが、Struts2を使って作ったTODO管理アプリケーションではjsファイルから読み込んだJavaScriptの動作が望んだ通りになりません。
自分でも調べてみて、原因はJavaScriptの関数の呼び出しが上手くいってないことだと思うのですが、どうして上手くいかないのかわかりませんでした。
どなたかご教示ください。
よろしくお願いします。
###該当のソースコード
- jsファイル login.js
// フィールドが変更された場合に処理する関数 function fieldChanged(){ var userId = getField("user_id"); var password = getField("password"); var disabled = true; if (userId.value.length > 0 && password.value.length > 0) { disabled = false; } var login = getField("login"); if (disabled) { login.setAttribute("disabled", "disabled"); } else { login.removeAttribute("disabled"); } } // フィールドを取得する関数 function getField(fieldName){ var field = document.getElementById(fieldName); if (field == undefined) { throw new Error("要素が見つかりません: " + fieldName); } return field; }
- Strtus2時のJSPファイル login.jsp (JavaScript動作失敗)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ログイン</title> <link rel="STYLESHEET" href="todo.css" type="text/css"> <script type="text/javascript" src="login.js"> </script> </head> <body onload="fieldChanged();"> //---------------------ここで関数を呼び出す <h1>ログイン</h1> <hr> <div align="center"> <s:form action="login_action"> <s:textfield name="user_id" value="" size="24" label="ユーザID" onkeyup="fieldChanged();" onchange="fieldChanged();" /> <s:password name="password" value="" size="24" label="パスワード" onkeyup="fieldChanged();" onchange="fieldChanged();" /> <s:submit value="ログイン" id="" align="center"/> </s:form> </div> </body> </html>
- 事前に作ったJSP login.jsp (JavaScript動作成功)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ログイン</title> <link rel="stylesheet" href="todo.css" type="text/css"> <script type="text/javascript" src="login.js"> </script> </head> <body onload="fieldChanged();"> <h1>ログイン</h1> <hr> <div align="center"> <table border="0"> <form action="Todo" method="post" > <input type="hidden" name="action" value="login_action"> <tr> <th class="login_field"> ユーザーID </th> <td class="login_field"> <input type="text" name="user_id" value="" size="24" id="user_id" onkeyup="fieldChanged();" onchange="fieldChanged();"> </td> </tr> <tr> <th class="login_field"> パスワード </th> <td class="login_field"> <input type="password" name="password" value="" size="24" id="password" onkeyup="fieldChanged();" onchange="fieldChanged();"> </td> </tr> <tr> <td colspan="2" class="login_button"> <input type="submit" value="ログイン" id="login"> </td> </tr> </form> </table> </div> </body> </html>
###試したこと
- ブラウザのインターネットオプションでセキュリティレベルの引き下げ。動作失敗。
- ネットに紹介されていた方法でfunctionの前にwindou.onload=を付け足す。動作失敗。
- Eclipseでjsファイルを作る時はコピペではなく、直接作らないと上手くいかないとネットで紹介されていたので、改めて一から作り直した。動作失敗。
- jsファイルの各所にalert("test〇");を付け足してどこで動作が止まっているのかの確認。
// フィールドが変更された場合に処理する関数 function fieldChanged(){ alert("test1"); var userId = getField("user_id"); alert("test2"); var password = getField("password"); alert("test3"); var disabled = true; alert("test4"); if (userId.value.length > 0 && password.value.length > 0) { alert("test5"); disabled = false; } alert("test6"); var login = getField("login"); if (disabled) { alert("test7"); login.setAttribute("disabled", "disabled"); } else { alert("test8"); login.removeAttribute("disabled"); } } // フィールドを取得する関数 function getField(fieldName){ alert("testA"); var field = document.getElementById(fieldName); alert("testB"); if (field == undefined) { alert("testC"); //--------------------------------ここで止まる throw new Error("要素が見つかりません: " + fieldName); } alert("testD"); return field; }
確認してみるとStruts2では"test1"から"testA"に移って"testC"で止まっているようなのですが、そこからどうすればいいのかが悩んでいます。
###補足情報(言語/FW/ツール等のバージョンなど)
- Eclipse
pleiades-e4.6-java-jre_20160622
- Struts2 --- struts-2.1.6
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
commons-logging-1.0.4.jar
freemarker-2.3.13.jar
ognl-2.6.11.jar
struts2-core-2.1.6.jar
xwork-2.1.2.jar
- H2 database
h2-setup-2016-05-26
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/21 01:17
2016/10/21 01:22