• 締切済み

クッキーによるidとパスワードのログイン情報の保持について

現在、クッキーによるIDとパスワードの保持機能を製作中なのですが、詳細は チェックボックスにチェックをいれてログインすると次回からIDとパスワードをテキストボックスに表示させてログインボタンをクリックするとログインでき、さらにそのチェックボックスの状態も維持したいと考えております。そのチェックボックスの状態の維持の仕方がわからずに困っております。 下記のスクリプトでどのようにすれば良いのかどなたかご教授ください。 ↓JS↓ var rwAuthInfo={conf:{kwordId:"login_id",kwordPass:"login_password",savePeriod:365,idElemKey:"id",passElemKey:"password",chkElemKey:"save"},CookieWrite:function(a,b,c){if(navigator.cookieEnabled){var d=new Date;d.setTime(d.getTime()+c*1E3*60*60*24);c=d.toGMTString();document.cookie=a+"="+escape(b)+";expires="+c+";path=/"}},CookieRead:function(a){if(typeof a=="undefined")return"";a+="=";var b="",c=document.cookie+";",d=c.indexOf(a);if(d!=-1){end=c.indexOf(";",d);b=unescape(c.substring(d+a.length,end))}return b}, getAuthInfo:function(){var a=unescape(rwAuthInfo.CookieRead(rwAuthInfo.conf.kwordId)),b=document.getElementsByTagName("input");for(i=0;i<b.length;i++)if(b[i].id==rwAuthInfo.conf.idElemKey&&a!=""){b[i].value=a;if(b[i].value=="Input a ID and Password")b[i].style.color="silver"}else if(b[i].id==rwAuthInfo.conf.idElemKey&&a=="")b[i].style.color="silver";a=unescape(rwAuthInfo.CookieRead(rwAuthInfo.conf.kwordPass));b=document.getElementsByTagName("input");for(i=0;i<b.length;i++)if(b[i].id==rwAuthInfo.conf.passElemKey&& a!="")b[i].value=a},saveAuthInfo:function(){var a=document.getElementById(rwAuthInfo.conf.chkElemKey);if(a.type=="checkbox"&&a.checked){var b=document.getElementById(rwAuthInfo.conf.idElemKey);a=document.getElementById(rwAuthInfo.conf.passElemKey);b=escape(b.value);rwAuthInfo.CookieWrite(rwAuthInfo.conf.kwordId,b,rwAuthInfo.conf.savePeriod);a=escape(a.value);rwAuthInfo.CookieWrite(rwAuthInfo.conf.kwordPass,a,rwAuthInfo.conf.savePeriod)}},addSubmitEvent:function(){for(i=0;i<document.forms.length;i++){var a= document.forms[i];try{a.addEventListener("submit",rwAuthInfo.saveAuthInfo,false)}catch(b){a.attachEvent("onsubmit",rwAuthInfo.saveAuthInfo)}}},addLoadEvent:function(){try{window.addEventListener("load",rwAuthInfo.getAuthInfo,false);window.addEventListener("load",rwAuthInfo.addSubmitEvent,false)}catch(a){window.attachEvent("onload",rwAuthInfo.getAuthInfo);window.attachEvent("onload",rwAuthInfo.addSubmitEvent)}}};rwAuthInfo.addLoadEvent(); ↓HTML↓----------------------------------------------------- <form action="index.php" id="login" method="post"> <div id="id_area"><label for="id">ID:</label><input type="text" id="id" name="id" onfocus="if(this.value == 'Input a ID and Password'){this.value = '';this.style.color='black';}" onblur="if(this.value == ''){this.value = 'Input a ID and Password';this.style.color='silver';return false;}" value="Input a ID and Password" maxlength="20" /></div> <div id="password_area"><label for="password">パスワード:</label><input type="password" id="password" name="password" maxlength="20" /></div> <div id="save_area"><input type="checkbox" id="save" name="save" value="" /><label for="save">ログイン情報を保存する</label></div> <div id="submit"><input type="submit" class="submit" value="ログイン" /></div> </form>

みんなの回答

回答No.1

ぐちをいっていいかな? こんなあんごうみたいなのをみて 「ははぁ~ここはこうなんだよ」っていえるひといるのか?! そのまえに、ちゃんとかいぎょうするところはかいぎょうして、 みやすくしてから、おねがいすると、だれかこたえてくれるよ。 (たぶん)

hunter_999
質問者

補足

簡略化する以前のものは入力フォームの文字数制限で入りきりませんでしたので宜しくお願いいたします。

関連するQ&A

  • ページにHTMLデータを出力の方法につきまして

    いつもお世話になっております。 現在、javascriptを使って5択の問題が出題できるコンテンツを作成しております。五択を選択し、ボタンを押すと、選択した番号や正解不正解をを同じフォーム上の下に表示させたいと思っております。 サイトを参照(http://www.openspc2.org/reibun/JavaScript_technique/sample/06_DOM/007/index.html)して、test01.html内では同じフォーム上に結果を出すことまではできたのですが、テストの種類を増やしたくて、test02.htmlを作りました。test01で使用したプログラムをコピーして、必要そうなID名などだけを変えてみたのですが、test02.htmlでは動いてくれず、行き詰まっていましました。 js側 window.onload = function() { document.getElementById("check").onclick = function() { //すべての解答を入れる変数の定義 var anserbox = "" //問1 var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"]; for(var i=0; i<checkList.length; i++) { var chkObj = document.getElementById(checkList[i]); if (chkObj.checked) { anserbox += "問1は"+ chkObj.value + "を選択しました<br>"; if (chkObj.value == 1){ anserbox += "正解<br>"; } //if (chkObj.value == 1){ point += 5; } else anserbox += "不正解<br>正解は1です<br />"; } } //anserboxに格納された値をウィンドウに表示する document.getElementById("result").innerHTML = anserbox; } document.getElementById("check2").onclick = function() { //すべての解答を入れる変数の定義 var anserbox = "" //問1 var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"]; for(var i=0; i<checkList.length; i++) { var chkObj = document.getElementById(checkList[i]); if (chkObj.checked) { anserbox += "問1は"+ chkObj.value + "を選択しました<br>"; if (chkObj.value == 1){ anserbox += "正解<br>"; } //if (chkObj.value == 1){ point += 5; } else anserbox += "不正解<br>正解は1です<br />"; } } document.getElementById("result2").innerHTML = anserbox; } } test01.html側 <form action="./enq.cgi" method="get"> <label><input type="radio" id="q1_01" name="q1" value="1">1</label><br> <label><input type="radio" id="q1_02" name="q1" value="2">2</label><br> <label><input type="radio" id="q1_03" name="q1" value="3">3</label><br> <label><input type="radio" id="q1_04" name="q1" value="4">4</label><br> <label><input type="radio" id="q1_05" name="q1" value="5">5</label><br> <input type="button" id="check" value="チェック" > </form> <div id="result">結果:</div> test02.html側 <form action="./enq.cgi" method="get"> <label><input type="radio" id="q1_01" name="q1" value="1">1</label><br> <label><input type="radio" id="q1_02" name="q1" value="2">2</label><br> <label><input type="radio" id="q1_03" name="q1" value="3">3</label><br> <label><input type="radio" id="q1_04" name="q1" value="4">4</label><br> <label><input type="radio" id="q1_05" name="q1" value="5">5</label><br> <input type="button" id="check2" value="チェック" > </form> <div id="result2">結果:</div> js側の3行目のdocument.getElementById("check").onclick = function()は実行されるのですがtest01.htmlはokなのですが、 中段にありますdocument.getElementById("check2").onclick = function()はボタンを押しても無反応です。(test02.html) どちらも単体では実行可能でしたので、使い方に間違いがあるのかも知れません。今日一日でわからなかったら質問しようと思っていましたので、投稿致します。 どうかご教授宜しくお願い致します。

  • JavaScriptの計算のNaNの判定について…

    いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか?いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>   <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>   <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>

  • javaの計算に関する質問です。

    以下のプログラムで、画像の矢印のように処理ができたのですが、(4)と(5)の計算値などを用いて更に計算をするにはどう記述すればよいのですか?できれば画像の赤○で囲ったような感じで四則演算したいのですが…よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=100; } else { if (a==1 && b==2) { rslt1=90; } else { if (a==2 && b==1) { rslt1=80; } else { rslt1=70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=95; } else { if (a==1 && c==2) { rslt2=85; } else { if (a==2 && c==1) { rslt2=75; } else { rslt2=65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=60; } else { if (a==1 && d==2) { rslt3=50; } else { if (a==2 && d==1) { rslt3=40; } else { rslt3=30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>   <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>   <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> </body> </html>

    • ベストアンサー
    • Java
  • 同じ i 番目のclassを連動させることはできますか?

    お世話になります <script type="text/javascript"><!-- window.onload = function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj0 = document.getElementsByClassName("id"); obj1 = document.getElementsByClassName("pass"); for(i=0;i<obj0.length;i++) { obj0[i].onclick = function() { obj1[i].style.display = "block"; } } } //--></script> <style type="text/css"><!-- .id { width:150px; float:left; cursor:pointer; } .pass { display:none; } .pass0 { width:100px; } --></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません>< 名前とパス両方を入力にしてやる方法もできますし、 それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます 後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが^^;

  • javascript クイズ

    こちらの http://okwave.jp/qa/q4105194.html 回答のNo.4の回答者様のソースコードなのですが <html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ? <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ? <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ? <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ? <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ? <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした! <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です! <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいます これを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか? よろしくお願いします。

  • createElementが一瞬で消えてしまいます

    <script type="text/javascript"> <!-- function check(){ if(document.loginform.user.value==""){ var element1=document.createElement("span"); element1.innerHTML="Usernameを入力してください。"; element1.className="error0"; var ojbody1=document.getElementById("titlerror1"); ojbody1.appendChild(element1); false; } if(document.loginform.pass.value==""){ var element2=document.createElement("span"); element2.innerHTML="Passwordを入力してください。"; element2.className="error0"; var ojbody2=document.getElementById("titlerror2"); / ojbody2.appendChild(element2); false; } } // --> </script> <title>ログインページ</title> </head> <body> <div id="error"><font color="red"><?=$error?></font></div> <div id="loginform"> <form id="loginform" name="loginform" action="index.php" method="post"> <fieldset> <p> <div class="titlerror" id="titlerror1"> <label for="user">User Name <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="text" name="user" value="" id="user" text-align="middle"> </p> <p> <div class="titlerror" id="titlerror2"> <label for="pass">Password <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="password" name="pass" value="" id="pass" > </p> <div id="submit"> <p class="submit"> <button type="submit" name="login" value="login" class="button" id="login" onclick="check()"><img src="submit.png" border="0" alt="login" /></button> </p> </div> </fieldset> </form> </div> </body> javascript初心者です。 これを実行するとつくられたタグが一瞬だけ表示して消えてしまいます。(CSSを付けると) 上記は表示すらしません。 どこが間違っているか、なぜそうなのかを教えていただけると助かります。 お願いします。

  • オブジェクト名に変数を使いたい

    <form id="form1" name="form1" method="post" action=""> <label for="q1-1"><input id="q1-1" name="q1" type="radio" value="1" />あ</label> <label for="q1-2"><input id="q1-2" name="q1" type="radio" value="0" />い</label> <label for="q1-3"><input id="q1-3" name="q1" type="radio" value="0" />う</label> <label for="q1-4"><input id="q1-4" name="q1" type="radio" value="0" />え</label> <label for="q2-1"><input id="q2-1" name="q2" type="radio" value="1" />あ</label> <label for="q2-2"><input id="q2-2" name="q2" type="radio" value="0" />い</label> <label for="q2-3"><input id="q2-3" name="q2" type="radio" value="0" />う</label> <label for="q2-4"><input id="q2-4" name="q2" type="radio" value="0" />え</label> </form> ============================================================ 上のような4択の問題が10問あります。 これを採点して合計点数を表示させたいと思っていますが、 下記のようにfor文を使う際、オブジェクト名の、"q1"の"1"というところに変数nを使いたいのですが、やり方がわかりません。 ============================================================ for(var n=0;n<10;n++){ var length=document.form1.q1.length; for(var i=0;i<length;i++){ var checked=document.form1.q1[i].checked; if(checked==true){ ans = i; } } var value=document.form1.q1[ans].value; } ============================================================ いろいろ調べてみましたが、うまくいかず固まっております。 どなたかご教授いただけませんでしょうか?

  • IEでF12を押さないとjavascriptが…

    javascript初心者です。 サイトのログインページに、 IDとpasswordを保存する機能をを作りたいと考えています。 プログラムからjavaccriptを呼び出しているのですが、 IEからそのjavascriptが読み込まれなくなってしまいました。 (Chrome,FireFox,Operaでは正しく動作しています。) F12を押してIEの開発者ツールを立ち上げると、正しく動作するようになります。 なぜ、F12を押さないと呼ばれないのかが、 さっぱりわからず、教えていただけないでしょうか。 htmlソースにも記述されています。 呼び出し元は、tclです。 <script language="JavaScript"> var rwAuthInfo = { conf : { kwordId : 'auth_id', kwordPass : 'auth_pass', savePeriod : 120, idElemKey : 'authId', passElemKey : 'authPass', chkElemKey : 'authSave' }, CookieWrite : function(kword, kdata, kday) { if (!navigator.cookieEnabled) { return; } var sday = new Date(); sday.setTime(sday.getTime() + (kday * 1000 * 60 * 60 * 24)); var s2day = sday.toGMTString(); document.cookie = kword + "=" + escape(encodeURIComponent(kdata)) + ";expires=" + s2day + ";path=/"; }, CookieRead : function(kword) { if (typeof(kword) == "undefined") { return ""; } kword = kword + "="; var kdata = ""; var scookie = document.cookie + ";"; var start = scookie.indexOf(kword); if (start != -1) { end = scookie.indexOf(";", start); kdata = decodeURIComponent(unescape(scookie.substring(start + kword.length, end))); } return kdata; }, getAuthInfo : function() { console.log("get auth info"); var myPass = decodeURIComponent(unescape(rwAuthInfo.CookieRead(rwAuthInfo.conf.kwordPass))); var obj1 = document.getElementsByTagName('input'); for(i = 0; i < obj1.length; i++){ if ( obj1[i].id == rwAuthInfo.conf.passElemKey && myPass != "" ) { obj1[i].value = myPass; } } var myId = rwAuthInfo.CookieRead(rwAuthInfo.conf.kwordId); var obj2 = document.getElementsByTagName('input'); for(i = 0; i < obj2.length; i++){ if ( obj2[i].id == rwAuthInfo.conf.idElemKey && myId != "" ) { obj2[i].value = myId; } } console.log("From cookie - id: " + myId + ", password: " + myPass); }, saveAuthInfo : function() { console.log("save authentication info"); var objChk = document.getElementById(rwAuthInfo.conf.chkElemKey); if ( objChk.type == "checkbox" && objChk.checked ) { var obj1 = document.getElementById(rwAuthInfo.conf.passElemKey); if ( obj1.value != null && obj1.value != '' ) { var myPass = escape(encodeURIComponent(obj1.value)); console.log("password: " + obj1.value + ", encoded: " + myPass); rwAuthInfo.CookieWrite(rwAuthInfo.conf.kwordPass, myPass, rwAuthInfo.conf.savePeriod); } var obj2 = document.getElementById(rwAuthInfo.conf.idElemKey); if ( obj2.value != null && obj2.value != '' ) { var myId = escape(encodeURIComponent(obj2.value)); rwAuthInfo.CookieWrite(rwAuthInfo.conf.kwordId, myId, rwAuthInfo.conf.savePeriod); } } }, addSubmitEvent : function() { for ( i=0; i<document.forms.length; i++ ) { var frm = document.forms[i]; try { frm.addEventListener('submit', rwAuthInfo.saveAuthInfo, false); } catch (e) { frm.attachEvent('onsubmit', rwAuthInfo.saveAuthInfo); } } }, addLoadEvent : function() { try { if (window.addEventListener) { window.addEventListener('load', rwAuthInfo.getAuthInfo, false); window.addEventListener('load', rwAuthInfo.addSubmitEvent, false); } else if (window.attachEvent) { var isMSIE = /*@cc_on!@*/0; if (isMSIE) { window.attachEvent('onload', rwAuthInfo.getAuthInfo); window.attachEvent('onload', rwAuthInfo.addSubmitEvent); window.attachEvent('load', rwAuthInfo.getAuthInfo); window.attachEvent('load', rwAuthInfo.addSubmitEvent); } else { window.attachEvent('onload', rwAuthInfo.getAuthInfo); window.attachEvent('onload', rwAuthInfo.addSubmitEvent); } } } catch (e) { console.error("got error in addLoadEvent: " + e); window.attachEvent('onload', rwAuthInfo.getAuthInfo); window.attachEvent('onload', rwAuthInfo.addSubmitEvent); } } } rwAuthInfo.addLoadEvent(); </script>

  • JavaScriptについて

    以下のコードはテキストボックスに文字を書き込み追加ボタンを押すとボタンのしたに書き込んだ内容が追加されるというものです なぜか追加ボタンを押しても反応がありません なぜでしょうか? <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <h1>ToDoメモ</h1> <!--新規追加ボックス--> <div id = "new_div"> <input id = "new_txt" type = "text" value = "" style = "width:250px" size = "40"/> <br /><input id = "add_btn" type = "button" value="追加" /> </div> <!--項目一覧--> <div id = "items_div"></div> <!--項目の操作パネル--> <div id = "control_div"> <input id = "done_btn" type = "button" value = "削除"> </div> <script> function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $(todo_div); var db; var cbItems = []; //ドキュメント読み込み時のイベント設定 window.onload = function() { if (window.openDatabase == undefined) { alert("Web Databaseに対応していません"); return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ;   tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

  • 【ツリーメニューの保持】

    【ツリーメニューの保持】 1.フォーム内の「タイプ」のラジオボタンをどれか1つ選択すると該当のツリーメニューが表示される 2.・必要項目を入力し、form送信、POSTで受け取る。 3.・form送信後も表示されていたツリーメニューを保持 ということを実装したいと思っています。 javascriptは初心者で、ネットで調べてつくりました。 「ラジオボタン選択でツリー表示」はできましたが 「form送信後も表示されていたツリーメニューを保持」部分が実装できません。 一人ではどうしても解決できず、どなたかご教授いただけませんでしょうか? よろしくお願い致します。 ------------------------------------------------------------------------------ 【php】 if($_REQUEST["mode"] == "regist") { var_dump($_REQUEST); } 【javascript】 //送信後もツリーメニュー保持 function check() { if (document.fm.type[0].checked == true) { document.getElementById('A').style.display = "block"; } else if(document.fm.type[1].checked == true) { document.getElementById('B').style.display = "block"; } } //ラジオボタン選択でツリーメニュー表示 function treeMenu(tName) { radio = document.getElementsByName('type') if(radio[0].checked) { document.getElementById('A').style.display = "block"; document.getElementById('B').style.display = "none"; } else if(radio[1].checked) { document.getElementById('A').style.display = "none"; document.getElementById('B').style.display = "block"; } 【form】 <form action="hogehoge.php" method="post" name="fm"> <input type="hidden" name="mode" value="regist"> <table> <tr> <td>タイプ</td> <td> <input type="radio" name="type" value="1" onClick="treeMenu('A')"> <input type="radio" name="type" value="2" onClick="treeMenu('B')"> </td> </tr> </table> <div id="A"> <table> <tr> <td>住所</td> <td><input type="text" name="address" value="<?php echo $_REQUEST[address]?>"></td> </tr> </table> </div> <div id="B"> <table> <tr> <td>電話番号</td> <td><input type="text" name="tel" value="<?php echo $_REQUEST[tel]?>"></td> </tr> </table> </div> <table> <tr> <td>年齢</td> <td><input type="text" name="age" value="<?php echo $_REQUEST[age]?>"></td> </tr> </table> <input type="submit" value="確認" onclick="check()"> </form>