2017年12月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

JavaScript

2010年12月29日 (水)

#JavaScript(promptの入力値をサーブレットに渡すには)

JavaScriptネタの第2弾です。
JavaでWebアプリケーションをつくることになって、そんなに詳しくもないのにチャレンジしてみました。JSPとサーブレットの連携で検索用語が悪いのかなかなかネットから情報が得られなかったので手こずってしまった内容をまとめてみました。
以下にまとめてみます。

■やりたい事
Javascriptのpromptの値を変数に格納するだけならネットで沢山見つかるのですが、その値をFORMタグを使ってサーブレットにPOSTしなくてはいけない。その方法がわかりませんでした。それと同時にFORMタグ内のValue値も送信するケースです。例えば、下に書いたとおりcheckboxのvalue値などです。

■結論
今回は特に画面に表示する必要がなかったのでhiddenを使いましたが、画面に表示する場合は表示部のタグにnameを定義してその要素に値を設定すれば良いでしょう。ポイントは、(1)promptの設定値をdocument.[FORMのname].[hiddenのname].valueに設定すること、(2)hiddenの要素はvalue=と書かなくても(1)で値が設定できる、(3)さらに、FORMタグの内容をサーブレットに渡すという目的を果たすためには、Javascriptの起動はbuttonのactionではなく、submitにしてonSubmitで起動する必要がありそうです。これでないと、FORMタグ内のvalue値がサーブレットに送信されないということがありました。
checkboxでチェックした値の部分は動的な値を設定しつつサーブレットに送信したいという目的がありました。これについては次回Javaネタで書いてみたいと思います。

Javascript側
・・・
function funcEmail() {
     var toAdress = prompt("送信者アドレスを入力してね。\n例:taro@hoge.co.jp","@hoge.co.jp");
     if (toAdress == null) {
          return false;
     } else if (toAdress=="") {
          alert("何も入力されていません!");
          return false;
     } else {
        document.frm1.toAdd.value=toAddress;
        return true;
     }
}
・・・
Prompt


JSP側
・・・
<FORM method="post" name="frm1" action="JavamailServlet" onSubmit="return funcEmail()">
<TABLE  border="1">
<TR>
<TH>CHK</TH>
<TH>名前</TH>
<TH>内容</TH></TR>
<TR>
<TD><INPUT type="checkbox" name="chk" value="次回に説明します"/></TD>
<TD>鈴木一郎</TD>
<TD>こんにちは</TD></TR>
<TR>
<TD><INPUT type="checkbox" name="chk" value="次回に説明します"/></TD>
<TD>松井秀喜</TD>
<TD>こんばんは</TD></TR>
</TABLE>
<INPUT type="submit" value="送信" />
<INPUT type="hidden" name="toAdd" />
</FORM>
・・・
Html

2010年1月 8日 (金)

#JavaScript(関数の結果を指定した位置に表示させるには)

JavaScriptネタの初投稿です。
今、仕事でJava関連を扱っていて、ちょっとした処理ならばJavaScriptで記述しよう!ということで
やってみるのですが初心者なのでやりたいことがぜんぜん出来ない。ネット検索も関数や用語が分からない
ので結構な時間を要している状態です。
ということで、タイトルの事例ですが、意外とうまいやり方が見つからずにあれこれ悩んでしまいました。
やっとたどり着いた成果を以下にまとめてみます。

■やりたい事
functionの処理結果をページの指定した位置に表示したい
今回の場合は時刻を表示したい

■ぐぐったら
document.write(getTime());とかはよくあるのですが、やりたい事ではない。

これ↓はかなりやりたいことに近いがinputではなく単に表示だけしたいのだが。
<html>
<head>
<title>test1</title>
<script type="text/javascript">
<!--
function jikoku() {
    dd = new Date();
    document.F1.T1.value = dd.toLocaleString();
    window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</head>
<body onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
</body>
</html>

■結論
分かってしまうとなんてことはないのだが、ここまでたどり着くのに苦労した。。。
<html>
<head>
<title>test2</title>
<script type="text/javascript">
<!--
function jikoku() {
    dd = new Date();
    document.all.fd1.innerHTML = dd.toLocaleString();
    window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</head>
<body onload="jikoku()">
<table border="1" width="600" cellspacing="0" cellpadding="5" bordercolor="#333333">
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">現在時刻</font></th>
<th width="200"><font >
<div id="fd1"></div></font></th>
<th width="370"><font >※div id=xxを好きな位置に定義すればよい</font></th>
</tr>
</table>

</body>
</html>