• 締切済み

前ページ・次ページの判定の仕方

現在行いたい処理は以下の通りです。 (1)データの一覧を表示させる (2)一覧を表示させた状態でデータを変更する。 (3)更新ボタンを押さずに前ページか次ページを押した時に  「変更ボタンを押して下さい。」とのメッセージを出力させる。 (4) OKを押した時は、(3)の時に押した前ページか次ページの 処理を行う。 (4)の処理を行なった時に前ページか次ページの判定の仕方 がわかりません。 教えていただきたく、宜しくお願いいたします。 ソースは以下の通りです。 <script type="text/javascript"> function next(action) { var page = document.forms[0].NowPage.value; document.forms[0].NowPage.value = parseInt(page) + 1; document.forms[0].action = action; document.forms[0].submit(); } function before(action) { var page = document.forms[0].NowPage.value; document.forms[0].NowPage.value = parseInt(page) - 1; document.forms[0].action = action; document.forms[0].submit(); } function change(){ myRet = confirm("修正ボタンを押してください。"); if ( myRet == true ){ next('sample!Next.action'); } } </script> ・ ・ <td class="list1" ><s:textfield name="Sample1" size="10" maxlength="10" onchange="change()" /></td> ・ ・ ・  <td><s:submit value="修正" cssClass="form_button" action="Sample" method="Update" onclick="return confirm('%{btnUpdateMsg}');"/></td> <s:hidden name="btnUpdateMsg" /> <tr> <td class="form_navigation"> <s:if test="nowPage!=1"> <div class="navigation"> <s:a href="#" onclick="after('Sample!Next.action');"> <前ページ </s:a> </div> </s:if> </td> <td class="form_navigation"> <s:if test="nowPage!=TotalPage"> <div class="navigation"> <s:a href="#" onclick="next('Sample!Next.action');"> 次ページ> </s:a> </div> </s:if> </td> </tr>

みんなの回答

  • KI401
  • ベストアンサー率53% (44/82)
回答No.1

適当に前ページか次ページか分かるように判定専用の変数(フラグ)を用意して、 before,nextが呼び出された時にそのフラグを設定すればいい。 で、4番のステップでそのフラグ見て決めればいい。 # というかこの場合は前、不明、次の三種類なので、booleanをイメージさせる # flagよりはstateとかの言葉が正しい気がするが、まぁそこはどうでもいい。好きな名前つけてくれ ## あるいは、move=next;みたいにして直接関数入れてもいいかなと思う。 ## moveの初期値どうするかめどいからちゃんと考えてないけど。 それよりも、いくつか突っ込みたい。 ・なんでbefore<=>nextなんだ?prev<=>next,before<=>afterでしょうに。 ・そのインターフェース分かりにくくない?状況がよくわからないし何とも言えないけど、  「前」「次」クリックしたときに勝手にchange()処理してしまってもいいと思うんだけど…??  そうじゃないとアプリケーション要件を満たさないならせうがないが。。 ・アプリの案件としてScript非対応環境は考慮していないかもしれないけれど、  script要素内はHTMLコメントにするなりCDATAセクションにするなりした方がいい。 ・strutsタグ使っているけど、そう質問文で明示した方がいい。  全てのJavaScripterがstruts知っいるわけではないのだから。  今の場合質問に直接関係なさそーなので、別にstrutsタグ取り去った||出力したソースを提示してもよかったわけだし。

kouchan_s
質問者

お礼

ご回答ありがとうございます。 すいません。文章を短くするため関係ありそうな所の ソースを抜粋しのせました。 もう少し教えて下さい、 現在の動作はデータを修正し、前ページか次ページをクリックするとchange()の処理を行い「修正ボタンを押してください」のメッセージは出力します。ここまでは思ったとおりの動きです。 このあとにherfでの変数の設定方法とchageへ移行した時の変数 の取得方法をもう少し教えて下さい。(申し訳ありません。) (JavaScriptを始めたばかりなので・・・

関連するQ&A

  • ページ間の値の引渡し

    (1) Function nextPage(AAA) Select Case AAA Case "1" document.page.folder.value = "ASP" document.page.file.value = "System001" Case "2" document.page.folder.value = "JAVA" document.page.file.value = "System002" . . . (2) Response.Write "<tr><td nowrap><a href=# onclick=nextPage('1')>" & "ASP" & "</a>" Response.Write "<td nowrap><a href=# onclick=nextPage('2')>" & "JAVA" & "</a>" . . . テーブルに値が入っていて、クリックすると別ページに飛びます。(ここでの値はASP、JAVA) (1)では引数が一つで、次ページに飛ぶためにフォルダとファイルの名前をセットしています。 (2)ではクリックしたときに移動するための値を引数として渡しています。 で質問です。 引数を二つにしたいのです。ページ数と値を渡したいのです。 こんな感じだとダメでした。 Function nextPage(AAA,BBB) Select Case AAA Case "1" document.page.folder.value = "ASP" document.page.file.value = "System001" document.page.data.value = BBB . . . Response.Write "<tr><td nowrap><a href=# onclick=nextPage('1','ASP')>" & "ASP" & "</a>" . . . 調べてみたのですがわからなかったのでここで質問させていただきました。 今は自宅ですぐ確認できないのでお返事が明日になると思いますが よろしくお願いいたします。

  • 合計値の表示

    コード/品名/単価 01/鰯/10円 02/鮭/20円 というデータがあって --ソースstart-- function codeChange(c, n){ if(document.getElementById){ if(c==01){ document.getElementById("sina"+[n]).innerHTML=("鰯"); }else if(c==02){ document.getElementById("sina"+[n]).innerHTML=("鮭"); } } function suryoChange(s, n){ if(document.getElementById){ if(c==01){ document.getElementById("sum"+[n]).innerHTML=(10*s); }else if(c==02){ document.getElementById("sum"+[n]).innerHTML=(20*s); } }… <table> <tr> <td><input type="text" name="code1" onChange="javascript:codeChange(document.forms(0).code1.value, 1)"></td> <td><div id="sina1"></td> <td><input type="text" name="suryo1" onChange="javascript:suryoChange(document.forms(0).code1.value, 1)"></td> <td><div id="sum1"></td> </tr> <tr> <td><input type="text" name="code2" onChange="javascript:codeChange(document.forms(0).code2.value,2)"></td> <td><div id="sina2"></td> <td><input type="text" name="suryo2" onChange="javascript:suryoChange(document.forms(0).code2.value,2)"></td> <td><div id="sum2"></td> </tr> </table> --ソースend-- <div id="total"></div> で数量の入力値が変わるごとに 各合計のトータルの合計を表示したいのですが やり方がわかりません。 よろしくお願いします。

  • 「java script」データソートページ送りが可能なテーブル

    「java script」データソートページ送りが可能なテーブル java scriptはまったくの初心者です。 インターネット上にあったソースを使ったのですが、わからないことがあったので質問します。 データを、ソートで見ることができるようにしたいので、下記のコードを使いました。 [問題は] 1つのhtmlに一つの表を使う分にはちゃんと動くのですが、 2つ以上表使おうとすると、一番上の表のソート機能は動くのですが、 2つ目の表からはソート機能が使えなくなってしまいます。 どうしたら2つ目の表もソート機能が使えるようにするのはどうしたらよいですか? [使用ソース]   <table> <tr> <th>・・・</th> <th>・・・</th> </tr> <tr> <td>・・・</td> <td>・・・</td> </tr> <tr> <td>・・・</td> <td>・・・</td> </tr> </table>       <div id="controls"> <div id="perpage"> <select onchange="sorter.size(this.value)"> <option value="5">5</option> <option value="10" selected="selected">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> <span>表示ページ数を選択できます。</span> </div> <div id="navigation"> <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" /> <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" /> <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" /> <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" /> </div> <div id="text">残りのページ数 <span id="currentpage"></span> of <span id="pagelimit"></span></div> </div> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; sorter.asc = "asc"; sorter.desc = "desc"; sorter.even = "evenrow"; sorter.odd = "oddrow"; sorter.evensel = "evenselected"; sorter.oddsel = "oddselected"; sorter.paginate = true; sorter.currentid = "currentpage"; sorter.limitid = "pagelimit"; sorter.init("table",1); </script> 以上よろしくお願いいたします。

  • 親ウィンドウのボタンからサブウィンドウを閉じたいのですが・・・。

    いつもお世話になっています。 JavaScript初心者です。 window.closeについて質問させて下さい。 メインウィンドウにある「next」という次のページに移るボタンをクリックすると、開かれているサブウィンドウを閉じる処理を実行したいのですが、window.closeを使えばいいということしか分からず、何をどこに書けば良いのか困っています。(サブウィンドウにも「閉じる」ボタンを作成していますが、親ウィンドウからも操作が出来るようにしたいと思っています。) どうか教えていただけませんでしょうか。 ソースは次の通りです。 ----------------------------- //サブウィンドウの表示 <script language="JavaScript"> function sub(msg){ var page =window.open("", "HintPage","screenX=400,screenY=600,left=400,top=600,width=400,height=250,scrollbars=yes,resizable=yes"); page.document.open(); page.document.writeln("<html>"); page.document.writeln("<head><title>{test}</title></head>"); page.document.writeln("<body leftmargin=\"15\" rightmargin=\"15\" topmargin=\"20\">"); page.document.writeln("<h3>[ {test} ]</h3><hr><br>" + msg + "<br><br><hr><br>"); page.document.writeln("<div align=center>"); page.document.writeln("<input type=button value=close onclick=\"javascript:window.close()\"></div>"); page.document.writeln("</body>"); page.document.writeln("</html>\n"); page.document.close(); page.focus(); } </script> </HEAD> //「next」ボタンの表示 <body> <table cellpadding=3 cellspacing=5 align="right"> <tr> <td bgcolor="#9999ff" align="right"><input type="submit" name="next" value="{nextBtn}" style="width: 140px; height: 20.5px;" onClick="setPname('{next}')" {disabled2}></td></tr> </table> </body> ---------------------------- どうぞよろしくお願い致します。 説明不足の点がありましたら補足させて頂きます。

  • <html>

    <html> <head> <title>Quiz</title> <script language="javascript"> <!-- var n=0; var ten=0; var f_start=0 var f_ok=0 var n_max=0; function RTN_START(){ if(f_start==1){ if(confirm('クイズを中断して、やり直しますか?')==true){ f_start=1; n=0; ten=0; document.forms[0].txtKAZ.value=n; document.forms[0].txtTEN.value=ten; RTN_1(n); } else{} } else{ f_start=1; n=0; ten=0; document.forms[0].txtKAZ.value=n; document.forms[0].txtTEN.value=ten; RTN_1(n) }; }; function RTN_1(s){ if(s>=n_max){ RTN_END(); } else{ document.forms[0].txtMON.value=mon[n]; document.forms[0].txtKI1.value=ki1[n]; document.forms[0].txtKI2.value=ki2[n]; document.forms[0].txtKI3.value=ki3[n]; f_ok=1; }; }; function RTN_2(s){ if(f_ok==0){ } else{ f_ok=0; if(s==sei[n]){ document.forms[0].txtMON.value="ピンポン!正 解 です。"; document.forms[0].txtTEN.value=++ten*10; } else{ document.forms[0].txtMON.value="残念、はずれです。"; }; document.forms[0].txtKAZ.value=n+1; n++; window.setTimeout('RTN_1(n)',1000) }; }; function RTN_END(){ var str=""; var rit=0; document.forms[0].txtKAZ.value=n; document.forms[0].txtKI1.value=""; document.forms[0].txtKI2.value=""; document.forms[0].txtKI3.value=""; rit=Math.round(ten*100/n_max); . . }; mon=new Array(); ki1=new Array(); ki2=new Array(); ki3=new Array(); sei=new Array(); mon[n]="1+1?"; ki1[n]="1"; ki2[n]="2"; ki3[n]="3"; sei[n++]="2"; mon[n]="3+4?"; ki1[n]="4"; ki2[n]="6"; ki3[n]="7"; sei[n++]="3"; . . . n_max=n //--> </script> </head> <body> <FORM action="" method=post> <div align="center"> 3択クイズ <br><br> <input onclick=RTN_START(); type=button value=スタート> <HR> <br> 解答問題数 : <input size=3 name=txtKAZ> 獲得得点 : <input size=3 name=txtTEN> <br> <textarea name=txtMON rows=4 cols=45></textarea> <br><br> <input onclick=RTN_2(1) type=button value=" 1 "> <input size=25 name=txtKI1> <br> <input onclick=RTN_2(2) type=button value=" 2 "> <input size=25 name=txtKI2> <br> <input onclick=RTN_2(3) type=button value=" 3 "> <input size=25 name=txtKI3> </FORM> </div> </body> </html> ランダムで問題と選択肢を出題したいのですがわかりません。

  • JSでページ内の表示を変えた時の問題について

    どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 Javascriptを利用して、プルダウンメニューの選択肢を選んで ページ内の表示を変更したときの問題なのですが、 選択後submitボタンで次のページに移動しブラウザの戻るボタンで前ページに戻ると プルダウンメニューにはさきほど選択したものが残っているのですが、 変更したはずの表示部分が元に戻ってしまいます。 FireFoxで確認した場合、この症状はみられませんでした。 IEの仕様なのでしょうか? どなたか解決方法が分かりましたらご教授お願い致します。 【ソース】 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" Content="text/Javascript"> <title>テスト</title> <script type="text/javascript"> <!-- //表示変更 function showthis(obj) { if(!obj) return false; if(document.getElementById) { for( i=0; i<=5; i++ ){ document.getElementById( "1_"+ i ).style.display = "none"; document.getElementById(obj).style.display = "block"; } } else { return false; } } --> </script> </head> <body> <form name="one" action="./two.html" method="POST"> <table class="box2"> <tr class="tr1"> <td class="pdown"> <select name="q1" onChange="showthis(this.value)"> <option value="1_0" selected>---- 選んでください ----</option> <option value="1_1"> 1 - いち</option> <option value="1_2"> 2 - に-</option> <option value="1_3"> 3 - さん</option> <option value="1_4"> 4 - よん</option> <option value="1_5"> 5 - ご</option> </select> </td> </tr> </table> <div id="youso"> <table class="box1"> <tr> <td> <div id="q1"> <div id="1_0"> <p>【---- 選んでください ----】</p> </div> <div id="1_1" style="display: none;"> <p>【1 - いち】</p> </div> <div id="1_2" style="display: none;"> <p>【2 - に-】</p> </div> <div id="1_3" style="display: none;"> <p>【3 - さん】</p> </div> <div id="1_4" style="display: none;"> <p>【4 - よん】</p> </div> <div id="1_5" style="display: none;"> <p>【5 - ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>

  • Perlでページ処理がどうしても機能しない!教えて!

    次のページが表示してくれません。 どこが悪いのか、わかりません。教えてください。 スクリプトは以下の通りです。 #formのデータ処理で $in{$key} = $val; # 入力データは%inへ #ページ処理(2) if($val eq '次の$page件'){ $allhits=$in{'allhits'}; $ff=$key; &Search; } #sub Search内で #foreach $line (@messages) {の中で #ページ処理(4) $page_control++; if($ff eq ""){ $ff = 1; } if( $ff > $page_control ){ next; } #ページ処理(5) #最初のページの時、データの最後まで処理する。 if($in{'next_num'} eq ''){ if($end != 1 && $hit == $page ) { $end = 1; $next_num = $page_control; $allhits++ ; } elsif( $hit >= $page) { $allhits++ ; } else{ push(@NEWS , $line); $hit++; $allhits++; } $test5 = $allhits;     #test値 13 -> なし 正常(値の変化をチェック) }elsif( $ff > 4 ){      #この辺の処理がうまくいっていない? $allhits = $in{'allhits'}; $test3 = $allhits;     #test値が入らない?(値の変化をチェック) if ($hit == $page ) { $next_num = $page_control ; $test4 = $next_num;   #test値が入らない?(値の変化をチェック) #last OUTER; } else { push (@NEWS , $line ); $hit++; } } } #foreach文ここまで &footer; #ページ送りのサブルーチン #ページ送りボタンサブルーチン sub footer { print "<table width=700><tr><td align=left>\n"; if ($ff >2) { print "<INPUT type=submit value=\"前の$page件\" onClick=history.back()>\n"; } print "</TD><TD align=right>\n"; if ($next_num){ print "<INPUT type=submit name=\"$next_num\" value=\"次の$page件\">\n"; } print "</td></tr></table>\n"; }

    • ベストアンサー
    • Perl
  • 1ページで2つのフォームをチェックしたいのですが…

    1つのページに同じ項目のフォームを2つ作りました。 そしてそれにチェックを設けたいと思いフォームチェックのスクリプトを入れてみました。 が、しかし、、 上のフォームはチェックが動くのですが、 下のフォームは何を入れてもチェックがエラー検出をして 次のページに進めなくなってしまいます。。 こちらはどのようにしたら両方のチェックが働きつつ 次のページに値を渡せるのでしょうか? 正しい書き方を教えてください。 よろしくお願いします。 <html> <head> <script language="JavaScript"> <!-- // 入力チェック function chkInputForm() { Error = new Array(); i = 0; // お客様の業種入力チェック if (document.forms[0].elements["part"].selectedIndex == 0) { Error[i] = "[ 1・2の選択 ] は必須項目です。"; i++; } // 会社(事務所)のご住所入力チェック if (document.forms[0].elements["pref"].selectedIndex == 0) { Error[i] = "[住まい] は必須項目です。"; i++; } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("以下の項目は必須です。\n\n"+ErrorText); return false; } return true; } //--> </script> </head> <body> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> </body> </html>

  • AウィンドウからBウィンドウのページ位置の動かし方

    通常のページ(Aページ)にあるボタンを押すことによって、 新しいウィンドウで別のページ(Bページ)を開くプログラムを Javascriptで作りました。 質問したいことは、 新しいウィンドウで開いたBページから Aページで名前をつけた場所(ページの途中)に 直接ジャンプするものを作りたいです。 添付画像のように テレビのチャンネルをチラチラ変えるような感覚で Bページをリモコンのような役割にして Aページの中で見たい位置を次から次に動かしたいです。 Bページを開くまでは問題なくできましたが、 その先ができませんでした。 アドバイスを頂きたいです。 お願いいたします。 (↓自分で作ったコードです) ~~~ Aページ ~~~ <script language="JavaScript" type="text/javascript"> <!-- function openwin(url, winname, width, height) { if(!width) { width = 500; } if(!height) { height= 500; } if(!winname) { winname = 'win'; } w = window.open(url, winname,'width=' +width+ ',height=' +height+ ',status=no,scrollbars=yes,directories=no,menubar=no,resizable=yes,toolbar=no'); } //--> </script> </head> <form method="post"><input type=button onClick="openwin('xxx');" value="サンプル"> </form> <div class="t0"> <table> <tr> <th class="t1"><a name="1" id="1">文章</a></th> <td class="t2"></td> <td class="t3">文章</td> </tr> </table> </div> <div class="t0"> <table> <tr> <th class="t1"><a name="2" id="2">文章</a></th> <td class="t2"></td> <td class="t3">文章</td> </tr> </table> </div> <div class="t0"> <table> <tr> <th class="t1"><a name="3" id="3">文章</a></th> <td class="t2"></td> <td class="t3">文章</td> </tr> </table> </div> ~~~ Bページ ~~~ <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a>

    • ベストアンサー
    • HTML
  • onclickを使わずにイベント処理をする方法について。

    onclickを使わずにイベント処理をする方法について。 【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】 されるようにしたいのですが、IEで動作せず、困っています。 下記は現在のコードです。 -------------------------------------------------------------------------- var divs = document.getElementsByTagName('div'); var listener = function(ev){ if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){ var next = ev.target.nextSibling.nextSibling; if(next.style.display != "none"){ next.style.display = "none"; }else{ next.style.removeProperty("display"); } } }; if (document.addEventListener) { document.addEventListener('click', listener, false);// IE以外 } else { document.attachEvent("onclick", listener);// IE } -------------------------------------------------------------------------- <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> -------------------------------------------------------------------------- ev.target.classNameあたりが怪しく… window.event.srcElement.classNameに変更してみましたが動作しませんでした。 html側の制約があり、出来れば上記のようなclassのみのhtmlで、 更にわがままを言うと <div class="text"> <h1>見出し</h1> <p>本文</p> </div> のようにdivにclassを振った形で実現したいです。 なお、現在のコードは複数のサンプルコードを参考に試行錯誤したものですので 不要なコードが混ざっているかもしれません。 動作確認環境はIE7、IE8、Firefox、Safari(Windows)です。 納期が迫り大変困っています。アドバイスを頂けますと嬉しいです。 宜しくお願い致します。

専門家に質問してみよう