• 締切済み

javascriptでクッキーの読み出し

お世話になります。 下記のjavascriptで、あらかじめ取得したクッキーを html内に表示させ、且つ他のページへ情報を送る 方法を調べていますがうまくいきません。 フォームのインプットタイプテキストを利用すれば、 表示されますが、それ以外の方法がございましたら、 ご教示いただければと思います。 よろしくお願いいたします。 <!-- 表示確認 --> <input type="text" id="id" value=""><br> <input type="text" id="url" value=""><br> <html> <head> <script type="text/javascript"> <!-- function load() { // クッキーから読み込んだ値を、『url』『id』要素に設定 document.getElementById("url").value = readCookie("url"); document.getElementById("id").value = readCookie("id"); } function readCookie(key) { if (key == "") return; // クッキーの文字列『key1=value; key2=value; …』から、 // 引数の『key』を元に、正規表現で値を検索 var re = new RegExp(escape(key) + "=(.*?)(?:;|$)"); if (document.cookie.match(re)) return unescape(RegExp.$1); return ""; } // --> </script> </head> <body onload="load();"> <!-- 表示確認 --> <input type="text" id="id" value=""><br> <input type="text" id="url" value=""><br> <br> <br> <!-- 表示確認できない --> <span id="id" value=""></span><br> <span id="url" value=""></span><br> </body> </html>

  • sdzgq
  • お礼率41% (5/12)

みんなの回答

  • hue2011
  • ベストアンサー率38% (2800/7250)
回答No.2

基礎をちゃんと勉強してほしいなと思いますね。 タグの使い方がめちゃめちゃです。 HTMLはコンパイラがないですからどんなに文法のおかしい書き方をしてもなかなかエラー表示はしてくれませんよ。 そもそもクッキーになっているものをどうして他のページに転送する必要があるのですか。 そのページでクッキーを読み直したらいいじゃないですか。

  • y_shimizu
  • ベストアンサー率41% (27/65)
回答No.1

まず、spanにvalueなんてありません。 定義すれば作られますが、少なくとも画面に表示されるものではありません。 spanのinnerHTMLとかにでも入れればいいと思います。 (そもそもHTMLの基本的な要素や属性、 その用途は先に勉強しておいたほうがいいと思います) あと、document.getElementByIdは配列取得ではないですし、 一致したもの全てなんていうセレクタでもないです。 つまり基本的にひとつのページ上ではidはユニークである必要があるということです。 なので、id="id"とid="url"な要素は画面上に2つ以上存在してはいけないってことです。

関連するQ&A

  • javascript で wait() をさせたい

    無限ループを使用せずに、次のような作業を、プログラムした順に行なう方法がわかりません。 function test(id) { writeX("1", "a1") ; wait(3000) ; writeX("3", "a3") ; writeX("4", "a4") ; writeX("5", "a5") ; writeX("6", "a6") ; } function writeX(x, id) { document.getElementById(id).value = x ; } function wait(t) { setTimeout( function() { writeX("waited", "a2") }, t ) ; } --------------- <input type= "text" id= "a1" ></input><br> <input type= "text" id= "a2" ></input><br> <input type= "text" id= "a3" ></input><br> <input type= "text" id= "a4" ></input><br> <input type= "text" id= "a5" ></input><br> <input type= "text" id= "a6" ></input><br> <button onclick="test()" > Test </button> ********* どのような方法で、wait() が終わるまで次の処理を待たせることができるか教えて下さい。 よろしくお願いします。

  • javascript 「折りたためるリスト」

    javascript初学者です。 「折りたためるリスト」について、皆さまにお教え頂きたいことがあり投稿しました。 以下のプログラムのような「折りたためるリスト」があると仮定します。「野菜すべて」をクリックすると、「大根、にんじん、レタス」が表示される折りたためるリストです。 通常、折りたたまれたリストを表示した後にリロードすればリストがたたまれてしまいますが、リロードしてもなおリストがたたまれず、「大根、にんじん、レタス」が表示された状態のままにするにはプログラムをどのように改良すればよいでしょうか。 (例:大根とにんじんにチェックを付けた後にリロードすると、リストがたたまれてしまうため何にチェックが付いているのかわからなくなってしまいます。リロードしてもリストが閉じることなく、リストを表示したままにしたい、と一生懸命やっているのですが、私のjavascriptの知識では解決できないのです(涙)。) なにぶんjavascriptが苦手でどうにもお手上げ状態です。 大変お手数をお掛けしますが、どうぞよろしくお願いいたします。 「折りたためるリスト」プログラム ----------------------------------------------------------------------- <html> <body> <input id="all" name="test1" type="checkbox" value="1"><a href="URL" onclick="oritatami('1');return false">野菜すべて</a><br> <div id="1" style="display:none">   <input name="test1" type="checkbox" value="10">大根<br>   <input name="test1" type="checkbox" value="11">にんじん<br>   <input name="test1" type="checkbox" value="11">レタス<br> </div> <script type="text/javascript"> function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } </script> </body> </html> -----------------------------------------------------------------------

  • javascriptがIEだけ動作しません

    javascript初心者です。 サイトに、ラジオボタンの選択に応じて、 値をテキストボックスに返す仕組みを作りたいと思っています。 Chrome,FireFox,Operaでは正しく動作していすが、 IEでは、テキストボックスのみ表示され、 ラジオボタンと選択肢が非表示になってしまいます。 お手数ですが、ご教示をお願いしたく、 よろしくお願いします。 <form> <script type="text/javascript"> NoDHTML=(!document.all && !document.getElementById) || (navigator.userAgent.indexOf('Opera/6.')>=0) || (navigator.userAgent.indexOf('Opera 6.')>=0); function changeMenu2(n) { if (NoDHTML) return; if (n==100) { if (document.all) { document.all['TNAME'].style.display='none'; document.all['TNAME2'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME').style.display='none'; document.getElementById('TNAME2').style.display='none'; } with(document.forms[0].TNAME) { options.length=1; options[0].text=''; options[0].value=''; } document.forms[0].TNAME2.value=''; } else { if (document.all) { document.all['TNAME2'].style.display='none'; document.all['TNAME'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME2').style.display='none'; document.getElementById('TNAME').style.display='none'; } if (n==0) { document.forms[0].course_name.value='りんご'; document.forms[0].course_price.value='600円'; } else if (n==1) { document.forms[0].course_name.value='メロン'; document.forms[0].course_price.value='1000円'; } else if (n==2) { document.forms[0].course_name.value='マンゴー'; document.forms[0].course_price.value='5000円'; } } document.forms[0].TNAME.options[0].selected=true; } if (!NoDHTML) { document.write( ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(0);" onkeypress="return(true)" />リンゴ</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(1)" onkeypress="return(true)" />メロン</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(2);" onkeypress="return(true)" />マンゴー</label>'+ '<input type="hidden" name="course_name">' ); } </script> <!-- ★★ここの部分はCSSで強制的に見えないようになっています --> <select name="TNAME" id="TNAME" style="display:none !important;"> <option value="" selected="selected" style="display:none !important;"></option> </select> <!-- /★★ここの部分はCSSで強制的に見えないようになっています --> <script type="text/javascript"> if (!NoDHTML) { document.write( '<input type="hidden" name="TNAME2" id="TNAME2" value="" size="20" />' ); } </script> <br /> <br /> <br /> <!-- ★★ここに"course_priceの値が表示されます --> <input type="text" name="course_price" readonly="readonly"> <!-- /★★ここに"course_priceの値が表示されます --> </form>

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示/非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • javascriptにてHTMLのhiddenエリアのvalueを変更したい

    javascriptにてHTMLのHIDDENエリアのVALUEをフォームの値が変わるごとに更新していきたいのですが、やり方がいまいちわかりません。 <input type = "text" value="10" id="aaa" onchange=aaa();/> <input type = "text" value="20" id="bbb" onchange=aaa();/> <input type = "hidden" name="abc" value="aaa"/> <script> function aaa(){ document.abc.value = document.getElementById("aaa").value+document.getElementById("bbb").value ; } </script> このような感じで考えていますが、進みません。どなたかご教授お願いいたします。

  • javascriptの変数の渡し方

    ラジオボタンで選択した値によって表示するテーブルを変えるフォームを作っています。 AAAは入力ボックスが1つ BBBは入力ボックスが2つ 同じphpへ送信して、入力ボックスへデータは入るのですが、javascriptの値を渡すことが出来ません。 BBBでsubmit後、BBBの入力ボックスを表示することは出来ますでしょうか。 <? echo "<form method=post action=?>"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=1"; if($user==1){ echo " checked"; } echo ">AAA"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=2"; if($user==2){ echo " checked"; } echo ">BBB"; echo "<br>"; echo "<span id=inner>"; echo "<table>"; echo "<tr>"; echo "<td>AAAのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<span id=outer>"; echo "<table>"; echo "<tr>"; echo "<td>BBBのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "<td><input name=form2 type=text value=$form2></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<br>"; echo "<input type=submit value=submit>"; echo "</form>"; ?> <script language='javascript'> var inner = document.getElementById('inner'); var outer = document.getElementById('outer'); function change_user (uid) { if (uid == '2') { inner.style.display = 'none'; outer.style.display = ''; } else { inner.style.display = ''; outer.style.display = 'none'; } } change_user(document.getElementById('user').value); </script>

    • ベストアンサー
    • PHP
  • if構文

    初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名(うさぎ・とり)を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。

  • 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>

  • JavaScriptの入力制御がうまく働きません。

    JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたのですが、下の例の「フード」で「その他」以外を選択するとまったく何も表示されません。ちなみにPHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、またJavaScriptをOFFにすると正常に表示されることから、PHPのコードではなく、JavaScriptのtxt.value=""; の部分に問題があると思われます。ですが、いろいろ調べましたが手詰まりになりました。 PHPとJavaScriptの双方にお詳しい方、どうかご教授くださいますようお願いいたします。 以下、問題のコードです。長くて申し訳ありませんm(_ _)m <script type="text/javascript"> function zzz(list,txt){ if (list.value == "その他"){ txt.disabled=false; }else{ txt.value=""; txt.disabled=true; } } </script> <?php if(!isset($_POST['pet'])){ ?> <body onload="zzz(document.getElementById('pet'),document.getElementById('petOther')),zzz(document.getElementById('food'),document.getElementById('foodOther'))"> <form method="post" action="test.php"> ペット: <select name="pet" id="pet" onchange="zzz(this,document.getElementById('petOther'))"> <option value="" selected="selected">↓</option> <option value="犬">犬</option> <option value="猫">猫</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="petOther" value="" size="20" id="petOther" />) <br /> フード: <select name="food" id="food" onchange="zzz(this,document.getElementById('foodOther'))"> <option value="" selected="selected">↓</option> <option value="缶詰">缶詰</option> <option value="ドライフード">ドライフード</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="foodOther" value="" size="20" id="foodOther" />) <button class="submit" type="submit"><span class="submitBTN">送信内容確認画面へ進む</span></button> </form> <?php }else{ print "<body>\n"; foreach($_POST as $key => $val){ if($key == "pet"){ if($val != "その他"){ $pet = $val; } } if($key == "petOther"){ if(!empty($val)){ $pet = $val; } } if($key == "food"){ if($val != "その他"){ $food = $val; } } if($key == "foodOther"){ if(!empty($val)){ $food = $val; } print $pet."に".$food."を与える"; } } } ?> </body> </html>

  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

専門家に質問してみよう