- 締切済み
javascriptで変更状態の維持
動的にフォームの入力項目を追加・削除できるJavascriptをサンプルを元にdocument.createElementなどを使い作りました。 意図した通りに動いてはいるのですが、リロードされたり確認ページへ移動後に入力ページへ戻ると追加した項目がクリアされてしまいます。 クリアされてしまうこと自体は同然だと思うのですが、追加した項目を維持させておく方法はないのでしょうか。 phpでメールフォームを作った経験は何度かあり、以前は追加ボタンが押されたらincludeで追加項目を読み込んだりしていたのですが、javascriptの法がスマートかと思い作ってみた。 javascriptだけでは無理なのでしょうか。 おわかりの方がいましたら宜しくお願いします。
- invare
- お礼率28% (4/14)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
みんなの回答
addEventは、イベントを追加するだけなので window.onload = function(){ var count = getCookie( 'count' )-0; for( var i=0; i<count; i++) addRow('hist'); } にしてテストしてみる？
IE6か～困った。 クッキーの値は正常なの？
補足
_pipi_さん ありがとうございます。 //ウィンドウが開いた時の処理 addEvent( window, 'load', function(){ var count = getCookie( 'count' )-0; alert(count); と「alert(count);」を追加してみたところ、 IE6では項目を増やした後でも更新すると0となってしまいまいました。 IE7、Firefoxでは増やした項目数分の値が表示されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style tye="text/css"> .ccol { background-color:#fc9; } </style> <form name="hogehoge"> <table border="1" id="hist"> <tbody> <tr id="histrow"> <td>項目名</td> <td><input name="COMPANY_NAME" type="text" id="txt" size="60"></td> </tr> </tbody> </table> <p> <input type="button" id="addrow" value="行を追加"> <input type="button" id="delrow" value="行を削除"> </p> </form> <script type="text/javascript"> //@cc_on addEvent( window, 'load', function(){ var count = getCookie( 'count' )-0; for( var i=0; i<count; i++) addRow('hist'); }, false); addEvent( document, 'click', function( evt ){ var element = evt.target || evt.srcElement; if( element.id == 'addrow' ) addRow('hist',true); if( element.id == 'delrow' ) delRow('hist',true); }, false); function addRow( tableId, flag ){ var table = document.getElementById( tableId ); var c = table.rows.length; var row = document.createElement('TR'); row.id = 'histrow' + c; var cell = document.createElement('TD'); cell.className = 'ccol'; cell.appendChild( document.createTextNode( ' ' ) ); row.appendChild( cell ); var cell = document.createElement('TD'); cell.className = 'ccol'; cell.appendChild( document.createTextNode('追加項目名'+ c ) ); row.appendChild( cell ); table.tBodies[0].appendChild( row ); if(flag) setCookie( 'count', c, 10); } function delRow(){ alert('自分で書いてね^^;'); } function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, flag); } function getCookie( name ) { name = encodeURIComponent( name ).replace( /([.*()])/g, '\\$1' ); var value = document.cookie.match( RegExp ( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) ); return value ? decodeURIComponent( value[1] ) : ''; } function setCookie ( name, value, day, path, domain ) { document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +'; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() +'; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) + ( domain ? 'domain=' + encodeURI ( domain ) + '; ': '') } </script>
補足
_pipi_さん ありがとうございます。 追加数だけ回して表示させないと 私の投稿したソースではだめでしたね。 addEventを使った事がないので解読に苦労しそうです。 もう一つお聞きしたいのですが_pipi_さんに書いて頂いたソースをブラウザから確認したところ私の 思っていた通りに動いてくれたのですが、IE6（IETester）だと更新した時に増やした項目がクリアしてしまいます。 function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, flag); } のあたりに原因があるのでしょうか。 何度もすみません。 宜しくお願いします。
//クッキーを読み込む function getCookie( name ) { name = encodeURIComponent( name ).replace( /([.*()])/g, '\\$1' ); var value = document.cookie.match( RegExp ( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) ); return value ? decodeURIComponent( value[1] ) : ''; } //クッキーの保存 function setCookie ( name, value, day, path, domain ) { document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +'; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() +'; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) + ( domain ? 'domain=' + encodeURI ( domain ) + '; ': '') }
補足
_pipi_さん ありがとうございます。 _pipi_さんの回等を見る前に、クッキーの取扱いはいろいろと検索しながら試してみたのですがうまく動かず 「Cookie Manager」というライブラリを使ってしまいました。 ところがやはり思うとおりに動いてくれません。 クッキーに保存したのは下記ソースの変数「i」の値で、フラウザから「行を追加」ボタンを3回押すと 項目も3つ増えるのですが更新ボタンを押すと増えた3つの項目は消えてしまい、もう一度「行を追加」ボタンを押すと1つ項目が増え("項目名"+i);の部分は 4から始まります。 よくよくソースを見ながら考えてみれば当然かなとは思いまいたが、作っている時はまったく気付かず。 元は人様の書いたものですが 下記のようなソースでは難しいのでしょうか？ 良いアドバイスがあれば教えてください。 <script language="javascript" src="/js/prototype.js"></script> <script language="javascript" src="/js/cookiemanager.js"></script> <script language="JavaScript"> <!-- var manager = new CookieManager(); var manager = new CookieManager({shelfLife:1}); var i = manager.getCookie("counter"); if(i == ""){ var i = 1; }else{ var i = manager.getCookie("counter"); } var maxrows = 10; function hage() { i++; manager.setCookie("counter", i); // Tbody への参照 var mybody=document.getElementById("histTablebody"); // セルを生成 mycurrent_row=document.createElement("TR"); mycurrent_row.setAttribute("id","histrow"+i); mycurrent_cell=document.createElement("TD"); mycurrent_cell.setAttribute("bgcolor","#FFCC99"); currenttext=document.createTextNode(" "); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_cell.setAttribute("bgcolor","#FFCC99"); currenttext=document.createTextNode("追加項目名"+i); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mybody.appendChild(mycurrent_row); //--> </script> <form name="hogehoge"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr id="histrow1"> <td>項目名</td> <td><input name="COMPANY_NAME1" type="text" id="txt" size="60"></td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id=addrow value="行を追加" onClick="hage();"> </td> <td> <input type="button" id=delrow value="行を削除" onClick="hige();"> </td> <td> </td> </tr> </table> </form> づらづらと長い内容ですみません。 宜しくお願いします
- steel_gray
- ベストアンサー率66% (1052/1578)
状態の保存先として、 サーバ側、クライアント側の二つが考えられます。 前者の場合、Javascriptにはサーバのファイルを更新する権限がないので、phpなどのサーバ上の仕掛けと連携させる事で実現できるでしょう。 後者の場合、cookieを読み書きする事で実現できると思います。 後者の場合、保持される状態は変更したクライアント向けに限られます。 たとえば誰かが行った変更結果を他のユーザにも反映したいとなると、前者の方法を採る事になると思います。
お礼
steel_grayさん ありがとうございます。 javascriptでcookieが扱えるのですね。 勝手に使えないもだと思い込んでいました。 検索したら色々とありました。 document.cookie="〇〇〇〇"; string=document.cookie; という感じですね。 調べなから改良してみます。 ありがとうございました。
補足
ありがとうございます。 確かにこちらのほうが 私にはわかりやすいです。