- 締切済み
javascriptで変更状態の維持
動的にフォームの入力項目を追加・削除できるJavascriptをサンプルを元にdocument.createElementなどを使い作りました。 意図した通りに動いてはいるのですが、リロードされたり確認ページへ移動後に入力ページへ戻ると追加した項目がクリアされてしまいます。 クリアされてしまうこと自体は同然だと思うのですが、追加した項目を維持させておく方法はないのでしょうか。 phpでメールフォームを作った経験は何度かあり、以前は追加ボタンが押されたらincludeで追加項目を読み込んだりしていたのですが、javascriptの法がスマートかと思い作ってみた。 javascriptだけでは無理なのでしょうか。 おわかりの方がいましたら宜しくお願いします。
- invare
- お礼率28% (4/14)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
みんなの回答
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; という感じですね。 調べなから改良してみます。 ありがとうございました。
関連するQ&A
- PHP+JAVAscriptを利用して
PHP+JAVAscriptを利用してアメブロなどのブログで使われている 記事の入力フォームを作りたいと思っているのですが可能でしょうか？ 出来るのであれば、サンプル等のあるページ、書籍等教えていただけると幸いです。 出来ない場合、他言語でのサンプル等のあるページ等教えていただけると幸いです。 宜しくお願いいたします。
- 締切済み
- JavaScript
- Javascript有効時のみ表示
メールフォームの入力チェックでJavascriptを使っています。 単刀直入で申し訳ありませんが、 Javascriptが有効な場合のみ送信ボタンを表示させることは可能でしょうか？ （無効な場合は送信ボタンが出ないようにしたいです。） スプリクトのサンプルページやわかる方がおられたら教えてください。
- 締切済み
- JavaScript
- JavaScriptによるSelect項目追加
今、下記サイトにあるような JavaScriptでSelect項目を新しく追加できるフォームを 作成中です。（下記サイトのサンプルソースはうまく動作しました。） 下記のサイトによって、項目の一番末尾に新しい項目を追加することはできるのですが、 追加した項目が一番先頭に来て、選択状態にするにはどうすればいいか分からず、 ご質問させていただきました。 どなたかお分かりになられる方がいらっしゃいましたらご教示いただけませんでしょうか。 何卒よろしくお願い申し上げます http://www.magiccity.ne.jp/~kuima/tips/jsc/samples/4select1.html
- ベストアンサー
- JavaScript
- JavaScriptを使ってXMLにタグを打ち込みたいんですが。。
プログラミング初心者で申し訳ありません。 JavaScriptを使っているのですが、ボタンを押して、<math>～</math>の中に数式のタグを入力しようとしています。 現状のソースですが、 ファイル名：sample.xhtml ～ <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> #数式のタグの入力位置 </math> <script type="text/javascript"> function mul1(){ var info = document.getElementById("math"); var txt1 = document.createTextNode("<mi>"); var txt2 = document.createTextNode("x"); var txt3 = document.createTextNode("</mi>"); info.appendChild(txt1); info.appendChild(txt2); info.appendChild(txt3); } </script> <form> <input type = "button" value="x" onclick ="mul1()" /> </form> ～ となっています。 理想は <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> <mi>x</mi> </math> ボタンクリック後こういう感じでタグを挿入したいと考えています。 function mul1(){ var info = document.getElementById("math"); var element1 = document.createElement("mi"); var element2 = document.createElement("/mi"); var txt = document.createTextNode("x"); info.appendChild(element1); info.appendChild(txt); info.appendChild(element2); } 要素追加と思いcreateElement()で検証してみたんですが、結果はなにも表示されませんでした。 言葉不十分で申し訳ありませんが、解決法教えていただけませんか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 別ウィンドウへの要素の追加(javascript)
javascriptで下記の内容で要素を追加した場合、同一ウィンドウに表示した場合に比べて表示速度が非常に遅くなります。速く表示する方法はありませんでしょうか？ **************************************************************************************** sample1.html（一部） **************************************************************************************** <script type="text/javascript"> var win1 = window.open("aaaa.html", "", "width=400,height=200"); var ele = win1.document.createElement("div"); // 新規に要素（タグ）を生成 var str = win1.document.createTextNode("あいうえお"); // 生成する要素の値（文字列） ele.appendChild(str); // 生成する要素の作成（要素に値を追加） win1.document.body.insertBefore(ele,null); // ページ (aaaa.html) の最後に生成した要素を追加 </script> ***************************************************************************************** aaaa.htmlの内容 ***************************************************************************************** <html> <head> </head> <body> </body> </html> ***************************************************************************************** sample1.htmlを実行するとaaaa.htmlにあいうえおと表示されます。 別ウィンドウへの要素を追加するタグの数が一つですとよく分かりませんが、追加するタグの数が10個以上にもなると表示に時間がかかります。表示させるするウィンドウが同ウィンドウ(sample1.html)ですと一瞬で表示されます。別ウィンドウへの表示速度を速くする方法はありませんでしょうか？ また、別ウィンドウへ表示する場合は、なぜ時間がかかるのかが分かりません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ヘッダをJavaScriptで追加する方法
個人のWebサイトを運営している者です。 今まですべてのページのヘッダにナビゲーションバーを逐一記述していたのですが、これだとコンテンツの追加・削除があるたびにすべてのページのナビゲーションバーを書き直さないといけないのでめんどうです。 SSIを使えばよいのでしょうが、私が借りているサーバはSSIやCGIが使えないので、JavaScriptで代用できないものかと考えています。 JavaScriptのdocument.createElementを使えばタグの追加はできるようですが、HTMLの追加はできるのでしょうか？ ちなみに、ナビゲーションバーは <div id="header"> <ul> <li><a href="aaa.html">あああ</a></li> （中略） <li><a href="iii.html">いいい</a></li> </ul> </div> という感じです。
- 締切済み
- JavaScript
- javascriptでのフォーム自動入力について質問です。
javascriptでのフォーム自動入力について質問です。 プログラム超初心者ですがよろしくお願いします。 ブックマークレットを使ってフォームの自動入力をしたいと思っているのですが、 まず、新規（別）のページから自動入力したいURLに移動して、読み込みが完了したら IDとPASWSWORDを自動入力したいと思っています。 自動入力したいURLを手動で表示してからだと以下のスクリプトでうまくいったのですが・・ javascript:(function (){document.forms[0].CRSRED.value='ID';document.forms[0].CRSBLU.value='PASSWORD';document.forms[0].submit();})(); スクリプトの中にURLを記述して自動でページ移動してから入力する方法がわかりませんでした。 良い方法がありましたら教えていただきたいです。よろしくお願いいたします。 移動したいページは下のページです。 https://contents.nifty.com/member/service/g-way/meijinsen_month/pay/index.html
- ベストアンサー
- JavaScript
- javascript でリンクを動的に変更する方法
下記のようなシステムを作成をしようと思っています。 javascript がまだあまり理解していない為ご教授いただければ幸いです。 質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。 下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。 <a href="#" onClick="window.open('store1.php?from=js&no=「この部分」','search_store1','width=540,height=540')">検索</a> 宜しくお願い致します。 サンプルコード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript"> <!-- var i = 1; var maxrows = 10; function hage() { i++; // Tbody への参照を取得します var mybody=document.getElementById("histTablebody"); mystore_row=document.createElement("TR"); mystore_row.setAttribute("id","histrow"+i); mystore_cell=document.createElement("TD"); mystore_cell.setAttribute("id","num"); currenttext=document.createTextNode(i); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); currenttext=document.createTextNode("店舗ID"); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_id" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_form=document.createElement("INPUT"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_name" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); //mystore_cell=document.createElement("a"); mystore_row.appendChild(mystore_cell); mybody.appendChild(mystore_row); document.register.delrow.disabled=false; if(i>=maxrows){ document.register.addrow.disabled=true; } } var hige = function() { var mytable=document.getElementById("histTablebody"); var removeTable=document.getElementById("histrow"+i); mytable.removeChild(removeTable); i--; if(i==1){ document.register.delrow.disabled=true; } // 追加ボタンを有効にする document.register.addrow.disabled=false; } var result = function() { alert(''); } //--> </script> </head> <body> <form name="register"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr id="histrow1"> <td id="num">1</td> <td>店舗ID</td> <td><input type="text" name="store_id1" id="storecell"><input type="text" name="store_name1" id="storecell"></td> <td> [<a href="#" onClick="window.open('store1.php?from=js&no=[]','search_store1','width=540,height=540')">検索</a>] </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();" disabled="true"> </td> <td> <input type="button" value="登録" onClick="result()"> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの数値をcgiへ渡したい
javascriptで作られたゲームで、メールでクリアタイムを申告できるようにしたいのですが、うまく作動しません。 jsでゲームクリアの時間を変数 clear_time に格納する（ここまでは問題なく動いています。） クリアと同時に別窓（メールフォーム）が開く。cgiのメールフォームです。 名前などの項目の他に「クリアタイム」という項目<input type="text" name="time" readonly>を作り function clearT(){ document.form1.time.value=window.opner.clear_time;} という関数を<head></head>内に入れ、onload="clearT"で呼び出しましたが、「アクセス許可は拒否されました」とエラーが出ます。 目的としては クリアタイムが簡単には改編されないようにしたい クリアタイムをメールさせたい の2点です。 何かよいアドバイスがあれば是非お願い致します。
- ベストアンサー
- CGI
- JVSで行を追加
HTMLページにNo、列、金額の入力フォームがあるとします。 この入力項目を表表示し、それぞれの項目を入力したら1行追加して複数行の登録をできるようにしたいと思います。 JavaScript(Ajax)で行を追加する方法がうまく見つけることができません。 JavaScriptでの方法又はAjaxなどのライブラリがありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
補足
ありがとうございます。 確かにこちらのほうが 私にはわかりやすいです。