テキストボックスの中に順番に○がついていくような画面を表示できる方法
- jspで連続的に○が増える画面を表示する方法について質問です。
- ９個のテキストボックスがあり、OKボタンを押すたびに次のページに遷移し、１つずつ○が表示される仕組みを作りたいです。
- HTMLとJavaを組み合わせることで実現する方法を教えてください。
- ベストアンサー
テキストボックスの中に順番に○がついていくような・・・
こんにちは。 jspで画像にあるような画面を表示できるようにと課題が出まして、四苦八苦しております。 内容は９個のテキストボックスがあり、OKボタンを押すごとに次のページに遷移し、１つずつ○が順に表示されていくというものです。 さらに、全てのボックスが埋まっている時にOKボタンを押すと全て空になり、また最初に戻ります。 自分で書いてみたコードはこんな感じです。 <%@page language="java" %> <%@page contentType="text/html;charset=Shift_JIS" %> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <HTML><HEAD><TITLE>課題１</TITLE> </HEAD><BODY> <FORM ACTION="kadai2.jsp" METHOD="post"> <BR> No.1:<INPUT TYPE="text" name="box1" VALUE="○"><BR> No.2:<INPUT TYPE="text" name="box2"><BR> No.3:<INPUT TYPE="text" name="box3"><BR> No.4:<INPUT TYPE="text" name="box4"><BR> No.5:<INPUT TYPE="text" name="box5"><BR> No.6:<INPUT TYPE="text" name="box6"><BR> No.7:<INPUT TYPE="text" name="box7"><BR> No.8:<INPUT TYPE="text" name="box8"><BR> No.9:<INPUT TYPE="text" name="box9"><BR> <INPUT TYPE="submit" VALUE="ok"> </FORM> </BODY></HTML> 上記と同様で、○を１つずつ増やしたファイルを９個作れば表示はできますが、それではHTMLで済んでしまいます。 １～９のボックスの部分をjava(配列)で書けますが、○を１個ずつ増やしていく方法が分かりません。 １つのファイルで自分を呼び出すという方法っぽいですが・・・ sessionでもrequestでも何でも大丈夫です。 ご教示お願いします。
- Java
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 >最初にindexを定義しておき、実際に表示する部分を書いて、・・・ そうですね、次に制御する為の値を隠し持っています。 >この部分などは、 >No.+<%=i+1%><%=input teyp="text" name="box" value=""%>・・・ >のようにappendを使用せず１行で書くことはできないでしょうか？ 書き方はいろいろあると思います。 この程度の文字列結合ではたいしたこと無いと思いますが、StringBufferを利用することにより処理速度の向上が望めます。 他の書き方の例としてはフォームタグの中に <form action="test.jsp" method="post"> <% for ( int i = 0; i < 9; i ++ ) { String value = ""; if ( i <= index ) { value = "○"; } %> No.<%= i + 1 %>:<input type="text" name="box" value="<%= value %>"><br> <% } %> <input type="hidden" name="ind" value="<%= index + 1 %>"> <input type="submit" VALUE="ok"> </form> こんな風にもかけます。 他にもまだまだいろいろ書き方はあります。 いろいろ試してみてください。
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 hiddenは画面上には表示したくないけどパラメータに含めたい値を格納しておく感じでしょうか。 >画像にある各段階のものは"hidden"を使用したものなのでしょうか？ そうですね。現在表示している○のNo.を格納しています。 例： <input type="hidden" name="ind" value="1"> ここのvalueを増やしていくことによりどこまで○を表示するか制御しています。 ちなみに画像の動作は以下のjspで確認しました。 <%@ page contentType="text/html; charset=UTF-8" %> <% int index = -1; try { index = Integer.parseInt ( request.getParameter("ind") ); } catch ( Exception e ) { } if ( index >= 9 ) { index = -1; } StringBuffer sb = new StringBuffer(); String[] box = request.getParameterValues("box"); for ( int i = 0; i < 9; i ++ ) { sb.append ( "No." ); sb.append ( i + 1 ); sb.append ( ":<input type=\"text\" name=\"box\" value=\"" ); if ( i <= index ) { sb.append ( "○" ); } sb.append ( "\"><br>" ); } index ++; sb.append ( "<input type=\"hidden\" name=\"ind\" value=\"" ); sb.append ( index ); sb.append ( "\">" ); %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> </head> <body> <form action="test.jsp" method="post"> <%= sb.toString() %> <input type="submit" VALUE="ok"> </form> </body> </html>
補足
ありがとうございます。 最初にindexを定義しておき、実際に表示する部分を書いて、次に実質の中身をhiddenにて隠しておきながら、indexを１ずつ増やしていっているという感じでよろしいでしょうか？ appendの存在も知らなかったので、調べてみると色んなケースで使用できそうですね。 しかし、 >sb.append ( "No." ); >sb.append ( i + 1 ); >sb.append ( ":<input type=\"text\" name=\"box\" value=\"" ); >if ( i <= index ) { >sb.append ( "○" ); この部分などは、 No.+<%=i+1%><%=input teyp="text" name="box" value=""%>・・・ のようにappendを使用せず１行で書くことはできないでしょうか？
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 課題ということで答えをずばり書いてしまうと意味が無いのでヒントを出します。 方法はいろいろ考えられると思いますが、現在表示対象とする値をhiddenに含めるのが簡単かなと思います。 手順 1.現在の表示対象とする値をパラメータより取得する 2.<input・・・はループでNo.1～No.9まで生成する 3.2の生成時に表示対象となっている時はvalue="○"を出力する 4.現在の表示対象を加算してhidden値にセットする A.formのsubmit先は自分 課題ということで何か制限がある場合はそれに従ってくださいね。 他の方法としては <input type="text" name="box"> で10個定義すれば、request.getParameterValues("box"); でStringの配列として取得できます。 以上、頑張ってください。
補足
ご回答ありがとうございます。 遅れまして申し訳ありません。 "hidden"というものを使ったことがなくて、試してみましたがどのように使うのかがいまいちよくわかりません。 (どうゆう状況だからどのように"hidden"を使おうというのがピンときません。) 画像にある各段階のものは"hidden"を使用したものなのでしょうか？
関連するQ&A
- テキストボックスに遷移するごとに○が追加されるjsp
こんにちは。 前にも質問させていただきましたが、再度お願いします。 画像のようなテキストボックスがあり、OKボタンを押下するごとに○が１つずつ追加され、全部埋まった状態でOKを押すとまた最初からになるというjspなんですが、下記コードまではこぎつけましたが、分からなくなりました。 ------------------------------------------------- <%@page language="java" %> <%@page contentType="text/html;charset=Shift_JIS" %> <% int index = -1; request.setCharacterEncoding("SHIFT_JIS"); String strBox=request.getParameter("box"); if(strBox!=null){ session.setAttribute("box",strBox); %> <HTML><HEAD><TITLE>問題１</TITLE> </HEAD><BODY> 問題１<BR> <FORM ACTION="mondai1.jsp" METHOD="post"> <% for(int i=0; i<9; i++){ String value=""; if(i<=index){ value="○"; } %> No.<%=i+1%><input type="text" name="box" value="<%=value%>"><BR> <%}%> <% index++; %> <INPUT TYPE="submit" VALUE="ok"> </FORM> </BODY></HTML> ------------------------------------------------- 以上がコードです。 1回目は上手くいきますが、２回目以降もテキストボックスの中に○が追加されません。 「session.getAttribute()」の使い方がよく分かりません。 画像は１枚目が１番最初or全部埋まってからまた戻ってきたもの、２枚目が３回目、３枚目が９回目のものです。 ご教示お願いします。
- ベストアンサー
- Java
- 複数のテキストボックスでインデックスを取得する方法
htmlでテキストボックスを複数作り、そのうちの一つの テキストボックスをクリックすると、Javascriptで そのテキストボックスのインデックスを取得したい思います。 ソースは簡単ですが、以下の通りです。 サンプルとして５つテキストボックスを作成していますが、 実際は不特定（データの読み込み件数）です。 onclick="hoge(???);" の???の部分に、テキストボックスのインデックスを書きたいのですが。。。 リストボックスだと、selectedIndexで取得できるようなのですが、 テキストボックスはどのような関数を使えばいいですか？ <html> <head> <script language="javascript"> function hoge(index){ alert(index); } </script> </head> <body> <input type="text" name="hoge" onclick="hoge(???);"><br> <input type="text" name="hoge" onclick="hoge(???);"><br> <input type="text" name="hoge" onclick="hoge(???);"><br> <input type="text" name="hoge" onclick="hoge(???);"><br> <input type="text" name="hoge" onclick="hoge(???);"><br> </body> </html>
- ベストアンサー
- JavaScript
- Enterで指定のテキストボックスにフォーカスを・・・
Enterを押すと指定のテキストボックスにフォーカスを移動させたいのですがやり方がわかりません・・・。 例えば以下の様なフォームで TB1→TB2→TB3→TB5→TB6 という具合に移動させたいです。 どうか皆さんのお知恵をお貸しください。 <form name = "textbox"> <input type = "text" name="TB0" onFocus="this.blur()"> <input type = "text" name="TB1"> <input type = "text" name="TB2"> <input type = "text" name="TB3"><br> <input type = "text" name="TB4"onFocus="this.blur()"> <input type = "text" name="TB5"> <input type = "text" name="TB6"> </form>
- ベストアンサー
- JavaScript
- テキストボックスに関して質問です
ページ間でのテキストボックスからテキストボックスへの文章の移行って可能でしょうか？ tezt１.htmlってページにある 名前⇒<INPUT TYPE="text" NAME="name1"> 住所⇒<INPUT TYPE="text" NAME="adres1"> のテキストボックスに入力された文章を 入力ボタン <INPUT type="button" value="入力" onClick="・・・・・"> を押すと、下に用意してあるテキストボックス（別ページ）に入力した値が入るようにしたいのです。 tezt2.htmlの 名前⇒<INPUT TYPE="text" NAME="name2"> 住所⇒<INPUT TYPE="text" NAME="adres2"> 事情が有り一つのページで行えません。 フレームわけしたページで移行して使用したいのですが… 質問し方が悪くて大変申し訳有りません。宜しくお願いします。
- ベストアンサー
- HTML
- テキストボックスの値同士を比較したい
urizakaと申します。 さて、現在JSPでプログラムを組んでいるのですが、その際にHTMLフォームの テキストボックスとテキストボックスの値を比較して、同じ値だった場合に イベントが起きるようにしたいのですが、うまくいきません。 具体的には以下のようなソースコードを書いたのですが… <HTML> <BODY> <FORM name="Del"> <input type="text" name="1"> <input type="text" name="2"> (中略） </FORM> <script language="JavaScript"> if (Del.1.value == Del.2.value){ document.writeln("同じ値です"); } (以下省略） 以下省略で省略されている部分に関しては問題なく動くので この場所以外でのエラーはかんがえられないのですが…すみません が上記の方法についてご存知の方は教えていただけませんでしょうか？ 宜しくお願いします。
- ベストアンサー
- JavaScript
- テキストボックスが、縦長になる
このokwaveの質問テキストボックスのようなテキストボックスを作りたいです。 パソコンだけの利用です。スマホ対応は不要です。以下のようなcgiを書きました。 textarea{ のwidtを増やしたり、col=を増やしたりしていますが、横幅が狭いままで、縦長のテキストボックスになります。 どうすればよろしいでしょうか？ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> textarea { width 1000ptx; height 40em; } </style> </head> <form action="insert_data.cgi" method="post"> <input type="hidden" name="mode" value="display_data"> Data text<br> <textarea name="data_text" value="" col="1000" rows="50"></textarea> <input type="submit" value="SUBMIT" style="font-size:x-large;" /> </form>
- ベストアンサー
- CGI
- テキストボックスが何番目かを検出したい
<FORM> <INPUT type="text" name="S1"> <INPUT type="text" name="S2"> <INPUT type="text" name="S3"> <INPUT type="text" name="S4"> <INPUT type="text" name="S5"> </FORM> 上記ソースでオンフォーカスのテキストボックスが何番目かを検出したいのですがJavaScriptで可能でしょうか？
- 締切済み
- JavaScript
- テキストBOX１個の画面でテキストBOXがリロード。
【ご質問】 テキストBOX１個だけの画面で、データ入力をEnterキーを 押すと、入力したデータがリロードされてしまいます。 （テキストBOX２個以上だと、リロードされません） 入力したデータをそのまま、保持したいのですが、 実現方法をご存知の方、教えて頂けますでしょうか。 【サンプル】 <%@page contentType="text/html; charset=euc-jp" %> <html> <head> <title>テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <script language="JavaScript"> function m_evt_add(f1){ return; } </script> </head> <body bgcolor="#FFFFFF"> <div align="center" style="color:#3300CC"><b>テスト</b></div> <br> <form name="form2" > <div align="center"> <table width="300" border="2"> <thead class="tableheader"> <tr> <th colspan="2" align="center">詳細項目</th> </tr> <tr> <th>項目</th><th>内容</th> </tr> </thead> <tbody class="tabledata"> <tr> <td >項目1</td><td><input type="text" name="input1" size="20" id="imemode1"></td> </tr> <tr> </tbody> </table> <br> <br> </div> </form> </body> </html>
- 締切済み
- HTML
- ボタンを押すとテキストボックスが増えるJavaScriptについて教えてください
Javascriptで質問です。 <input type="text" name="hoge1" value=""> <input type="text" name="hoge2" value=""> <input type="text" name="hoge3" value=""> というようなテキストボックスがあり、「追加」というボタンを押すと 新たなテキストボックス <input type="text" name="hoge4" value=""> が追加されるようなJavascriptを作成したいと考えています。 新たに作られたテキストボックスには name="hoge4" name="hoge5" ・ ・ ・ というように、nameの部分に「hogeの右にある番号に1ずつ加算された名前」を付けていきたいのです。 検索すると、テキストボックスを追加していくだけのサンプルはいくつかあったのですが、nameの部分を加算していく、という例が無くて行き詰っています。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テキストボックス値をsetPropertyでセット
HTMLのテキストボックス<input type="text">値を JSPのsetPropertyでセットBeanのフィールドとしてセットし、 Servlet側で取得したいと思っています。 JSPでのsetPropertyの書き方は次のようで、 直接valueに値を書く（またはbeanからとってきた値を書くようですが、 [質問1.]テキストボックスに入力された値を代入することは可能でしょうか？ [質問2.]どのように記述すればよろしいのでしょうか。 ---JSP setPropertyの記述 <jsp:setProperty name="オブジェクト変数" property="プロパティ" value="プロパティ値" param="パラメータ" />
- 締切済み
- Java
お礼
こんにちは。 やはり色んな書き方があるんですね。 課題はrequestの他にも、session、bean、cookieで同様のものを作るようにと指示がありますので、ご回答いただいたコードを参考にやってみます。 ありがとうございました。
補足
こんにちは。 お礼した後で申し訳ありませんが、また宜しくお願いします。 同じものをsessionで試みておりますが、上手くいきません。 --------セッション１ページ目------------- <%@page language="java" %> <%@page contentType="text/html;charset=Shift_JIS" %> <% int index = -1; %> <HTML><HEAD><TITLE>追加課題１(session編)</TITLE> </HEAD><BODY> session<BR> <FORM ACTION="tuikakadai1.2.jsp" METHOD="post"> <% for(int i=0; i<9; i++){ String value=""; if(i<=index){ value="○"; } %> No.<%=i+1%><input type="text" name="box" value="<%=value%>"><BR> <%}%> <INPUT TYPE="submit" VALUE="ok"> </FORM> </BODY></HTML> ----------セッション２ページ目------------- <%@page language="java" %> <%@page contentType="text/html;charset=Shift_JIS" %> <% request.setCharacterEncoding("SHIFT_JIS"); String strBox=request.getParameter("box"); if(strBox!=null){ session.setAttribute("box",strBox); //int index++; %> <HTML><HEAD><TITLE>追加課題１(session編)</TITLE> </HEAD><BODY> session<BR> <FORM ACTION="tuikakadai1.3.jsp" METHOD="post"> <% //for(int i=0; i<9; i++){ // String value=""; // if(i<=index){ // value="○"; //} %> <%=session.getAttribute("box")%><BR> //<%}%> <INPUT TYPE="submit" VALUE="ok"> </FORM> </BODY></HTML> 以上になります。 １ページ目はきちんと表示されますが、２ページ目が「OK」のボタンのみになってしまいます。 １ページ目のループさせているテキストボックスはそのまま「box」として２ページ目以降でも使用できるのでしょうか？ 再度、宜しくお願いします。