javascriptでログインページの作成

質問

JSPを作成しているのですが、javascirpt構文の方が
多いため、こちらで質問をさせて頂きます。

javascript, html で　ログインページを作成しています。

<%@ page contentType="text/html;charset=Shift_JIS" %>

<script type="text/javascript" language="javascript"><!--
　　　　function Submit(name,pass,f){
　if(name == null){
document.getElementBy(f).action="http://www.yahoo.co.jp";
document.getElementById(f).submit();
}else{
document.getElementById(f).action="http://www.google.co.jp";
document.getElementById(f).submit();
}
}

//--></script>
<form action="login.jsp" method="post" NAME="f1">

<table border="1" width="30%">
<tr>
<td>ユーザーID:</td>
<td><input type="text" name="admin" size="25" value=""></td>
</tr>
<tr>
<td>パスワード:</td>
<td><input type="password" password="password" value=""></td>
</tr>
</table>

<%--- これが悪いのかも!? --- %>
<% String name = request.getParameter("name");
String password= request.getParameter("password");
%>
<input type="submit" value="ログイン" onClick="Submit('name','password','f1');">
</form>
</body>
</html>

ログインボタンをクリックして、name,password,f1(formの名前）を
function のSubmitに値を渡したいのですが、nullが渡されてしまいます。

テキストボックスで入力された値を渡したいのですが、
javascript,htmlの知識が乏しいため、どこがおかしいのかわかりません。

もしわかる方が居ましたら、よろしくお願いたします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

> admin (入力された値）
> password (入力された値）
これは期待するとおりに出力され、期待するとおりの表示ですか？

JSPをされているならname属性やid属性についてはご存じと思いますが、
両方を明記しておいたほうがいいです。
モダンブラウザは片方が書かれていれば、もう片方を同じ内容で補完しますが、nameのみの場合idを補完しないブラウザもあります（getElementByIdで取得出来ません）し、
idのみの場合、古いブラウザでnameを補完せずにvalueだけを送信する物もあります。
> <td><input type="password" password="password" value=""></td>
この辺は直されたようですが。。。

質問の内容と関係ないところでFAQでもありますが、一応解説しておきます。

フォームの内容をチェックするタイミングですが、
> <input type="submit" value="ログイン" onClick="Submit('name','password','f1');">
このタイミングでチェックを始めると、テキストフィールドやパスワードフィールドでエンターキー（リターンキー）を押した場合、
submitボタンは押されていませんから、関数は呼び出されません。
<form （中略） onsubmit="Submit()">
というタイミングでチェックするようにしてください。

本題ですが、あらかじめお断りしますが、ヒントだけです。

getElementByIdは知っていらっしゃるようですから、
フォームエレメント（<input type="text">など）の値（.value）を取得するには、どうすればいいか、わかりますよね？（リファランスに書かれているはずです）
あとはSubmit()への引数やdocument.getElementByIdの引数をどの様に指定すればいいかだけだと思います。

お礼

お返事ありがとうございます。javascriptの勉強を
してもう一度取り組んでみたいと思います。

お答え頂きありがとうございました。

回答No.1

神崎 渉瑠（@taloo）

JSPの部分が何をしているわイマイチわかりにくいので、
ブラウザでアクセスして「ソースを表示」した内容を提示していただけますか？

補足

お返事ありがとうございます。
これがソースです。間違いがあったので変更はしました。

<script type="text/javascript" language="javascript"><!--
　　　function Submit(name,pass,f){
　　　//if(name != null){
//document.getElementById(f).action="http://www.yahoo.co.jp";
//document.getElementById(f).submit();
　　　//}else if( name == null){
//document.getElementById(f).action="http://www.excite.co.jp";
//document.getElementById(f).submit();
//}
}
//--></script>
</head>
<form action="login.jsp" method="post" NAME="f1">
<table border="1" width="30%">
<tr>
<td>ユーザーID:</td>
<td><input type="text" name="admin" size="25" value=""></td>
</tr>

<tr>
<td>パスワード:</td>
<td><input type="password" name="password" value=""></td>
</tr>
</table>

admin (入力された値）
password (入力された値）

<input type="submit" value="ログイン" onClick="Submit('name','password','f1');">
</form>
</body>
</html>

テキストボックスで入力された値を、name , passwordの変数で
受け取り、それをonSubmit()中に渡そうと思っています。

name, password を渡す事が出来てないのはわかりますが
どう解決したらいいのかわかりません。

ちなみにテキストボックスに名前を入れても、入れなくても
yahooが表示されてしまいます。　よろしくお願いいたします。