このサンプルコードが実行されない理由はなぜですか？
- セレクト１とセレクト２で絞り込みたいキーワードを指定し、<input>の絞込によりstart()を実行させ、<dd>のテキストに一致するもののみ表示させたく、そのコードを作ってみましたが、正しく実行されません。
- スクリプト内のstart()関数が、適切に動作していないため、コードが実行されません。
- 要件に沿ってセレクト１とセレクト２の選択肢を設定し、絞り込み条件を指定する必要があります。現在のコードでは、選択肢が空のままになっており、絞り込みが正しく行われていません。
- ベストアンサー
このサンプルコードが実行されない理由はなぜですか？
セレクト１とセレクト２で絞り込みたいキーワードを指定し <input>の絞込によりstart()を実行させ、 <dd>のテキストに一致するもののみ表示させたく、 そのコードを作ってみましたが、正しく実行されません。 どこをどのようにしたら良いのでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> dl{ overflow:hidden; margin-bottom: 30px; } dd{ float:left; } dt{ float:left; clear:both; color:#f00; } </style> <script type="text/javascript"> function start() { var fs_a = document.myform.sel_a; var fs_b = document.myform.sel_b; var text_a = fs_a.options[fs_a.selectedIndex].text; var text_b = fs_b.options[fs_b.selectedIndex].text; var tag_dd = document.getElementsByTagName('dd'); var tag_dl = document.getElementsByTagName('dl'); for(var i = 0; i<=tag_dd.length; i++){ if(tag_dd.item[i].textContent == ans_a || tag_dd.item[i].innerText == ans_a){ tag_dl.style.display = ''; }else{ tag_dl.style.display = 'none'; } if(tag_dd.item[i].textContent == ans_b || tag_dd.item[i].innerText == ans_b){ tag_dl.style.display = ''; }else{ tag_dl.style.display = 'none'; } } } </script> </head> <body> <form name="myform"> <fieldset> <legend>セレクト１</legend> <select name="sel_a"> <option value="指定なし">指定なし</option> <option value="">あ</option> <option value="">い</option> <option value="">う</option> </select> </fieldset> <fieldset> <legend>セレクト２</legend> <select name="sel_b"> <option value="指定なし">指定なし</option> <option value="">え</option> <option value="">お</option> <option value="">か</option> </select> </fieldset> <input type="button" value="絞込" onclick="start()"> </form> <dl> <dt>セレクト１</dt><dd class="ddc">あ</dd> <dt>セレクト２</dt><dd class="ddc">か</dd> </dl> <dl> <dt>セレクト１</dt><dd class="ddc">い</dd> <dt>セレクト２</dt><dd class="ddc">お</dd> </dl> <dl> <dt>セレクト１</dt><dd class="ddc">う</dd> <dt>セレクト２</dt><dd class="ddc">え</dd> </dl> </body> </html>
- kiseki777
- お礼率80% (211/261)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>実際に使うなら～これを10列作ることになるのですね。 その通りです。実際にはvar1:などではなく、 {lastName:"山田",firstName:'太郎',age:'35',img:'yamada.jpg'} 等、適切な変数名の方が後々分かりやすくなります。 getElementsByTagName('dd')について >for(var i = 0; i<=tag_dd.length; 2*(i++)+1){ >で正しく動くということですか。 考え方としてはそうなります。※ただし、 最初のスクリプトでは、HTMLのタグからデータを取得していましたが、#Ano3 の方法では「データからprintlist()でHTMLを出力」しています。検索時には classは関係なく、直接var dataの値を見ていますので、おたずねのgetElementsByTagName('dd')やif(tag_dd[i].className = 'dd_a'){ の処理 は不要になります。 (#Ano3 をコピペでそのまま動かしてみてください。)
その他の回答 (3)
- JaneDue
- ベストアンサー率75% (263/350)
ちょっときつそうなので僭越ながら。 実際にはどのようなデータか分かりませんが、自分だったら、応用効く様以下のようにするかな。 <script type="text/javascript"> //データや項目を簡単に増やせるように。 var data = [ {var1:'あ',var2:'A'}, {var1:'あ',var2:'a'}, {var1:'い',var2:'I'}, {var1:'う',var2:'U'}, {var1:'え',var2:'E'}, {var1:'か',var2:'KA'}, {var1:'き',var2:'KI',var3:'kkkkk'}, //こんな感じで項目を増やす ]; function search(){ //各selectのvalueを取得 var sel1 = document.myform.sel1.value; var sel2 = document.myform.sel2.value; var n=data.length; for(var i=0; i<n; i++){ //sel1に値があってvar1と異なれば消す if(sel1 && sel1 != data[i].var1){ document.getElementById("dl_no"+i).style.display = 'none'; //それ以外で、sel2に値があってvar2と異なれば消す }else if(sel2 && sel2 != data[i].var2){ document.getElementById("dl_no"+i).style.display = 'none'; //それ以外なら、該当したということなので表示 }else{ document.getElementById("dl_no"+i).style.display = 'block'; } } } </script> </head> <body> <form name="myform"> <fieldset> <legend>セレクト１</legend> <select name="sel1"> <!-- valueへ値を入れています。指定なしはカラに--> <option value="">指定なし</option> <option value="あ">あ</option> <option value="い">い</option> <option value="う">う</option> <option value="か">か</option> </select> </fieldset> <fieldset> <legend>セレクト２</legend> <select name="sel2"> <option value="">指定なし</option> <option value="A">A</option> <option value="I">I</option> <option value="U">U</option> <option value="KA">KA</option> </select> </fieldset> <hr> <input type="button" value="絞込" onClick="search();"> </form> <script> //データの書き出し部分。dataに追加すれば自動的に出力 printlist(); function printlist(){ var n=data.length; //dl dt dd を書き出します。DLにidをつけています。 for(var i=0; i<n; i++){ document.write("<dl id='dl_no", i, "'>", "<dt>セレクト１</dt><dd>",data[i].var1, "</dd>", "<dt>セレクト２</dt><dd>",data[i].var2, "</dd>", "</dl>"); } } </script>
補足
>>>実際にはどのようなデータか分かりませんが サンプルでは2種類の条件ですが、実際には10種類くらいあります。 その中身も10種類ほどあります。 {var1:'あ',var2:'A'} 実際に使うなら {var1:'あ',var3:'A',var4:'A2',var5:'A3',var6:'A4',var7:'A5',var8:'A6',var9:'A7',var10:'A8'}これを10列作ることになるのですね。 >>>var tag_dd = document.getElementsByTagName('dd'); >>>としていますので、ddタグすべてを取得、比較しているためです。 _aのddの順番は1,3,5,7…の奇数番号 _bのddの番号は2,4,5,6…の偶数番号 もしvar tag_dd = document.getElementsByTagName('dd');を使うなら for(var i = 0; i<=tag_dd.length; 2*i++){ や for(var i = 0; i<=tag_dd.length; 2*(i++)+1){ で正しく動くということですか。 >>>var sel1 = document.myform.sel1.value; text側でなくvalue側を取得するようにします。 >>>if(tag_dd[i].className != 'dd_a') continue; _aでも動きました。でも_bもとはいきませんでした。 なので、このようにしてみました。 <dt>セレクト１</dt><dd class="dd_a">あ</dd> <dt>セレクト２</dt><dd class="dd_b">か</dd> のようにclassをつけて <script type="text/javascript"> function shibori() { var fs_a = document.myform.sel_a; var text_a = fs_a.options[fs_a.selectedIndex].text; var fs_b = document.myform.sel_b; var text_b = fs_b.options[fs_b.selectedIndex].text; var tag_dd = document.getElementsByTagName('dd'); for(var i = 0; i<=tag_dd.length; i++){ if(tag_dd[i].className = 'dd_a'){ if(tag_dd[i].textContent == text_a || tag_dd[i].innerText == text_a){ tag_dd[i].parentNode.style.display = ''; }else{ tag_dd[i].parentNode.style.display = 'none'; } }else{ if(tag_dd[i].className = 'dd_b'){ if(tag_dd[i].textContent == text_b || tag_dd[i].innerText == text_b){ tag_dd[i].parentNode.style.display = ''; }else{ tag_dd[i].parentNode.style.display = 'none'; } }else{ if(tag_dd[i].className != 'dd_b'){continue; }else{ if(tag_dd[i].textContent == text_b || tag_dd[i].innerText == text_b){ tag_dd[i].parentNode.style.display = ''; }else{ tag_dd[i].parentNode.style.display = 'none'; } } } } } } </script> switchを使えないか考えましたが、swich(式)の式部分が作れないことが分かり諦めました。 ifを重ねていくしか方法がないのでしょうか。
- JaneDue
- ベストアンサー率75% (263/350)
セレクト1では各データのセレクト1の欄だけを、2では2だけを比較したいのですよね。 var tag_dd = document.getElementsByTagName('dd'); としていますので、ddタグすべてを取得、比較しているためです。 すべてのdd が class="ddc" となっていますが、別のクラス名 <dt>セレクト１</dt><dd class="dd_a">あ</dd> <dt>セレクト２</dt><dd class="dd_b">か</dd> 等で区別できるようにして、for(){ の中で if(tag_dd[i].className != 'dd_a') continue; (もし、dd_a クラスでなければ、とばして次へ～ )などの処理が必要です。 (※クラス名で取得する getElementsByClassName('dd_a'); が簡単ですがIEダメ) また if(tag_dd[i].textContent == text_a || tag_dd[i].innerText == text_a){ で、一見よさげですが、IEのinnerTextは後ろに半角スペースが入るため一致しませんから、 var val = tag_dd[i].textContent ? tag_dd[i].textContent : tag_dd[i].innerText.replace(/ $/,''); (//textContentがあればそれを、なければ(IE)innerTextのスペースを修正して valに入れて比較) if(val == text_a){～ としてみてください。 ※比較するのはtext_aとtext_bの２つだけでしょうか? もし、本当はもっとたくさんの項目を比較するのであれば、DOMの走査/操作が多いので、jQueyを使った方が簡単かも知れません。
お礼
有難うございます。 勉強になりました。
- JaneDue
- ベストアンサー率75% (263/350)
ぐだぐだです。 1.関数名 start()は IEでは動きません。 http://www004.upp.so-net.ne.jp/sekiuchi/js/help/keywords.html 2.変数 ans_a や ans_b が突然出てきています。text_a/text_bの間違いかと。 3.tag_dd.item[i] ==> tag_dd[i] 4.tag_dl はdocument.getElementsByTagName()で取得していますから、 tag_dl.style.display～ ではどのdlのことを指すのか指定されないので動きません。 ddの親であるdl、ということなら tag_dd[i].parentNode.style.display = 'none'; の方が簡単かと。 5."選択なし"を選択した場合「選択なし」を調べています。 6.text_a を調べて表示/非表示、==> 次にtext_bを調べて表示/非表示、としています…。(結局、最初のtext_aは関係なしにtext_bの結果のみになってしまいます。) 想定している値がきちんと来てるか、要所で alert(xxx); 等確認しながら修正してみてください。どうしてもきついようなら補足してください。
お礼
有難うございます。 参考にさせていただきます。
補足
_bは動きますが、_aが動かなかったので、 _aと_bを別々に動かしてみました。 _bのみの場合は、 <script type="text/javascript"> function shibori() { var fs_b = document.myform.sel_b; var text_b = fs_b.options[fs_b.selectedIndex].text; var tag_dd = document.getElementsByTagName('dd'); for(var i = 0; i<=tag_dd.length; i++){ if(tag_dd[i].textContent == text_b || tag_dd[i].innerText == text_b){ tag_dd[i].parentNode.style.display = ''; }else{ tag_dd[i].parentNode.style.display = 'none'; } } } </script> はちゃんと動きますが、 _aのみの場合は <script type="text/javascript"> function shibori() { var fs_a = document.myform.sel_a; var text_a = fs_a.options[fs_a.selectedIndex].text; var tag_dd = document.getElementsByTagName('dd'); for(var i = 0; i<=tag_dd.length; i++){ if(tag_dd[i].textContent == text_a || tag_dd[i].innerText == text_a){ tag_dd[i].parentNode.style.display = ''; }else{ tag_dd[i].parentNode.style.display = 'none'; } } } </script> 正しく動きません。 for()より上は全て動き、for()からが動きがおかしいようです。 調べましたが理由が分かりませんでした。
関連するQ&A
- 名前と名字をそれぞれ比較して表示する
名字と名前に分けて、selectで比較するものを作りたいです。 名前は無視して「山田」という名字のみを比較する場合、 「あああ」という名字で「太郎」という名前を比較する場合 全部を無視して比較する場合など、で比較したいです。 名字を無視して名前のみを比較するものは使いません。 <dd><p>山田太郎</p></dd>というのを変えずに、 あまりコードを増やさずにやりたくて htm.match(sn) && sm="指定なし"な感じにやってみたのですが、 上手にできません。この場合どんなものが役立つのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>名字</legend> <select name="m" onchange="aaa(this.form)"> <option value="日本">日本</option> <option value="山田">山田</option> <option value="あああ">あああ</option> <option value="い">い</option> <option value="う">う</option> <option value="え">え</option> </select> </fieldset> <fieldset> <legend>名前</legend> <select name="n" onchange="aaa(this.form)"> <option value="太郎">太郎</option> <option value="花子">花子</option> <option value="ままま">ままま</option> <option value="みみ">みみ</option> <option value="む">む</option> </select> </fieldset> </form> <dl> <dt>名前</dt> <dd><p>日本太郎</p></dd> </dl> <dl> <dt>名前</dt> <dd><p>い花子</p></dd> </dl> <dl> <dt>名前</dt> <dd><p>山田太郎</p></dd> </dl> <script type="text/javascript"> function aaa(f){ var sn = f.n.value; var sm = f.m.value; var idID = document.getElementsByTagName('p'); var idLen = idID.length; for(i=0; i<idLen; i++){ var htm = idID[i].innerHTML; if(htm==sn+sm || htm.match(sn) && sm="指定なし" || sn="指定なし"){ alert("true"); }else{ alert("false"); } } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 複数の<option>と一致するものを表示するには
サンプルで作ったコードは、 <select name="select1">の<option>、 <select name="select2">の<option>、 <select name="select3">の<option>で選び、その下にあるボタンを押すと、 <div class="sample_in">の<dd>タグ内と上記３つの項目に一致するにものだけを表示させたい と考え下記コードを作りました。しかし、select1とselect2は処理が行われません。 select3のみが処理されてしまいます。例えば・・・ 「1組,男子,おとなしい」を選んだ場合、サンプルでは一致するものは１つしかないので その親である<div class="sample_in">のみを表示させたいですが、 2組、女子でも表示の対象になり、一致するものが２つになってしまいます。 解決に役立つ様なプロパティやメソッドはないでしょうか。ヒントだけでもお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form name="myForm" action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="test0()"> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> </div> <script type="text/javascript"> function test0() { var div1 = document.getElementById('sample'); var div2 = div1.children; var index1 = document.myForm.select1.selectedIndex; var index2 = document.myForm.select2.selectedIndex; var index3 = document.myForm.select3.selectedIndex; var str1 = document.myForm.select1.options[index1].text; var str2 = document.myForm.select2.options[index2].text; var str3 = document.myForm.select3.options[index3].text; var ary = [str1, str2, str3]; for(m=0; m<ary.length; m++){ for(i=0, len1=div2.length; i<len1; i++){ var dd = div2[i].getElementsByTagName("dd"); for(j=0, len2=dd.length; j<len2; j++){ var ddText = dd[j].textContent; if( ary[m] == ddText ){ dd[j].parentNode.parentNode.style.display = ''; break; }else{ dd[j].parentNode.parentNode.style.display = 'none'; } } } } alert("エラーなし"); //動作確認用 } </script></body></html>
- ベストアンサー
- JavaScript
- 数値の比較で正しく評価されない理由
下記サンプルで、trueになるべきところがfalseになります。なぜでしょうか。 このサンプルでは識別番号のラスト値のみを比較するものですが、 実際は複数の<dd>の値を比較します。 NO12「DE」-114 という1行の文章に複数の比較する対象が含まれる場合は、 １つの<dd>に<span>で囲い【NO12】、【「DE」】、【114】のそれぞれを比較の対象にしますが、 こういったやり方自体が間違っているのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>識別番号のラスト値</legend> <select name="sss" onchange="spl(this.form)"> <option value="50">50以下</option> <option value="100">100以下</option> <option value="150">150以下</option> <option value="200">200以下</option> </select> </fieldset> </form> <dl> <dt>名前</dt> <dd>ジム</dd> <dt>識別番号</dt> <dd><p><span>NO12</span>「<span>DE</span>」-<span>114</span></p></dd> </dl> <dl> <dt>名前</dt> <dd>トム</dd> <dt>識別番号</dt> <dd><p><span>NO33</span>「<span>DR</span>」-<span>168</span></p></dd> </dl> <dl> <dt>名前</dt> <dd>エミリー</dd> <dt>識別番号</dt> <dd><p><span>NO8</span>「<span>AB</span>」-<span>93</span></p></dd> </dl> <script type="text/javascript"> function spl(f){ var selValue = f.sss.value; var idID = document.getElementsByTagName('p'); var idLen = idID.length; for(i=0; i<idLen; i++){ var spans = idID[i].getElementsByTagName('span'); var pawwar = spans[2].innerHTML; if(pawwar<=selValue){ alert("true"); }else{ alert("false"); } } } </script> </body> </html>
- ベストアンサー
- JavaScript
- ページ内の幾つかのformを1つの送信で送りたい
初心者です。現在お店のホームページを作っているのですが、問合せのページでなかなかうまくいきません。すみませんがお知恵をお貸しください。 まず概要からいいますと、 商品上、複数の商品を一度に注文頂く事が多く、それを１ページにまとめたいと思っています。、 フォームは各商品を選べば、それに対応する項目が表示されます。 これを3つほどページ内に、同じ内容のものを設置し、1つの送信ボタンで送れないかと考えています。 そこで <script language="JavaScript" type="text/JavaScript"> <!-- function productA(sel) { var target = sel.value; var group = sel.form.getElementsByTagName("FIELDSET"); var i=0, fs; while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none"; } function productB(sel) { var target = sel.value; var group = sel.form.getElementsByTagName("FIELDSET"); var i=0, fs; while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none"; } //--> </script> として <boby> <form name="form1" method="post" action="cgi-bin/formmail.cgi"> 商品選択１<br> <select name="select1" onChange="productA(this)"> <option value="--" selected class="style9"> </option> <option value="A">A</option> <option value="B">B</option> </select> <fieldset id="A"> ■Ａの質問： <select name="q1A" size="1"> <option value="--" selected class="style9"> </option> <option value="q1A_1" >q1_1</option> <option value="q1A_2" >q1_2</option> </select> </form> <form name="form1" method="post" action="cgi-bin/formmail.cgi"> 商品選択2<br> <select name="select1" onChange="productB(this)"> <option value="--" selected class="style9"> </option> <option value="A">A</option> <option value="B">B</option> </select> <fieldset id="B"> ■Bの質問： <select name="q1B" size="1"> <option value="--" selected class="style9"> </option> <option value="q1B_1" >q1B_1</option> <option value="q1B_2" >q1B_2</option> </select> </form> <INPUT TYPE="submit" VALUE="送 信"> という状況です。 <form>を分けている理由は1つのformにしてしまうと、商品選択1を記載し、 次の商品選択２がある場合、そこで別の商品を選択すると、先ほど記載した、 商品選択１がリセットされ、項目も別の商品の内容になってしまいます。 その為、formを分けている状態です。この状態では勝手にリセットはされませんが、 ただし、送信できません・・・ なので、この状態で送信できる方法はありませんか？ もしくはformを１つにしてもいいので、その際各formで商品選択をしても、 リセットされない方法があれば教えてください。 本当に初心者なので、出来ない事をいっているのかもしれません。 大変お恥ずかしいご質問ですが、何卒ご教授頂ければ助かります。
- 締切済み
- JavaScript
- optionのselectedは更新時は効かない？
最初に表示させたいoptionにselected="selected"を付けているのですが、 ブラウザの更新をしたときにselectedが効きません。 読み込んだときは指定通りになりますが、更新時は指定通りになりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>順位１</legend> <select name="sss111" onchange="letsGO111()"> <option value="指定無し" selected="selected">指定無し</option> <option value="1位">1位</option> <option value="2位">2位</option> </select> </fieldset> <fieldset> <legend>順位２</legend> <select name="sss222" onchange="letsGO222()"> <option value="指定無し" selected="selected">指定無し</option> <option value="1位">1位</option> <option value="2位">2位</option> </select> </fieldset> </form> </body> </html>
- ベストアンサー
- HTML
- 【PHP】メールフォームの連動するセレクトボックス
メールフォームを作っているのですが、 連動するセレクトボックスにおいて、 自動返信メールに内容が思った様に記載されません。 複数のチェックボックがあり、それぞれに連動して、 セレクトボックス1でサイズを選び、セレクトボックス2で数を選ぶようになっています。 ソースは最後に記載しますが、希望する返信メールの形は以下の通りです。 ーーーーーー現在ーーーーーー 【色 / サイズ / 数量】 S 1個 L 2個 S 3個 【料金】 （表示なし） ーーーーーー希望ーーーーーー 【色 / サイズ / 数量】 レッド S 1個 ブルー L 2個 イエロー S 3個 【料金】 S × 4個：600円 ＝1,800円 L × 2個：900円 ＝1,800円 ご教示のほど、お願い致します。 以下、ソースです。 <dt>色</dt> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="レッド">レッド</label> </dd> <dd> <select class="parent" name="size_01"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S：600円</option> <option value="L">L：900円</option> </select> </dd> <dd> <select class="children" name="number_01"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="ブルー">ブルー</label> </dd> <dd> <select class="parent" name="size_02"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S：600円</option> <option value="L">L：900円</option> </select> </dd> <dd> <select class="children" name="number_02"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> ＜以下、他の色が同様に続きます＞ <dt>料金</dt> <dd class="required"> <div id="result"> S：合計<span class="s maisu" name="sum_s_n" value="0">0</span>個 × 600円 ＝ <span class="s kingaku" name="sum_s_p" value="">0</span>円<br> L：合計<span class="a maisu" name="sum_a_n">0</span>個 × 900円 ＝ <span class="all kingaku" name="sum_all">0</span>
- ベストアンサー
- PHP
- メールフォームについて質問です。
php初心者です。 メールフォームのチェックボックスの値をPOSTでキャッチしたあと表示がしたいのですがうまくいきません。 他のPOSTでキャッチした値も、最終的にforeachで回しています。 チェックボックスからの値のみ「array」と出力されます。 多次元配列の値を並列に表示したい場合、どのような処理の考え方があるのか教えていただきたいです。 送信元 <form action="entry.php" method="post"> <dl> <dt>氏名 <span class="red">[必須]</span></dt> <dd><input type="text" name="氏名"></dd> </dl> <dl> <dt>フリガナ <span class="red">[必須]</span></dt> <dd><input type="text" name="フリガナ"></dd> </dl> <dl> <dt>メールアドレス <span class="red">[必須]</span></dt> <dd><input type="text" name="メールアドレス" style="white-space:nowrap;"></dd> </dl> <dl> <dt>参加内容</dt> <dd><input type="checkbox" value="値1" name="参加内容[]">値1</dd> <dd><input type="checkbox" value="値2" name="参加内容[]">値2</dd> </dl> <dl> <dt>個人情報保護方針 <span class="red">[必須]</span><br /><input type="checkbox" class="checkbox" name="個人情報保護方針">同意する</dd> </dl> <p class="contactBt"><input type="submit" value="確認ページ" /></p> </form> 【送信先】 $_POSTSTRINGCODE = "EUC-JP"; $_THISFILESTRING = "UTF-8"; $_MYPOST = ""; foreach($_POST as $key=>$var) { //mb_convert_variables($_THISFILESTRING, $_POSTSTRINGCODE, $key); //smb_convert_variables($_THISFILESTRING, $_POSTSTRINGCODE, $var); $_MYPOST[$key] = $var; } <dl> <?php unset( $_MYPOST['個人情報保護方針'] ); foreach($_MYPOST as $key=>$var) { $key = strtr($key, $string_from, $string_to); if(get_magic_quotes_gpc()) $var = stripslashes($var); $var = htmlspecialchars($var); $OUT_var = ($var == "")?' ':nl2br($var); print("<dt>".$key."</dt><dd>".$OUT_var."</dd>"); ?> <INPUT type="hidden" name="<?php echo $key ?>" value="<?php echo $var ?>"> <?php print("</dt></dd>\n"); } ?> </dl> 配列はこんな感じです。 array(6) { ["所属団体"]=> string(1) "a" ["氏名"]=> string(2) "aa" ["フリガナ"]=> string(3) "ア" ["メールアドレス"]=> string(15) "aaa@aaa.co.jp" ["ご参加内容"]=> array(2) { [0]=> string(51) "値1" [1]=> string(15) "値2" } ["個人情報保護方針"]=> string(2) "on" } このまま表示させると「array」として表示されてしまうため「値1」「値2」の値を表示 させるためループ内で色々やってみましたが、考え方自体少しつかめていません。 【現状】 所属団体 a 氏名 aa フリガナ ア メールアドレス aaa@aaa.co.jp ご参加内容 Array （この場所に「値1」「値2」が表示させるようにしたいです） どなたかご教授いただければと思います。 よろしくおねがいいたします。
- ベストアンサー
- PHP
- PHPを勉強しながらメールフォームの作成をしています。
PHPを勉強しながらメールフォームの作成をしています。 PHPは初心者です。 ご質問なのですが、メールフォームでinput type="hidden"で値の受け渡しをしたいと思っています。 SESSIONなどありますが、こちらはのちのち勉強していきます。 まずメールフォームから確認画面を表示する流れにしていきたいのですが、ここでご質問があります。 ソースは下記のとおりになります。 <!-- index.php --> <form action="comfirm.php" method="post"> <dl> <dt>名前</dt> <dd><input type="text" name="name" value="" /></dd> <dt>性別</dt> <dd> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </dd> <dt>カテゴリ</dt> <dd> <select name="category"> <option value="サッカー">サッカー</option> <option value="野球">野球</option> <option value="バスケ">バスケ</option> <option value="バレー">バレー</option> </select> </dd> </dl> <input type="hidden" name="contact" value="form" /> <input type="submit" value="送信" /> </form> としており、 <!-- comfirm.php --> <?php $name = $_POST['name']; $sex = $_POST['sex']; $category = $_POST['category']; ?> <html> <body> <dl> <dt>名前</dt> <dd><?php echo $name; ?></dd> <dt>性別</dt> <dd><?php echo $sex; ?></dd> <dt>カテゴリ</dt> <dd><?php echo $category; ?></dd> </dl> </body> </html> となっております。 ここでconfirm.phpに渡る際ににエラー表示をしたいのですが、記述の仕方がどうもわかりません・・・ confirm.phpに渡るときに名前が記入されていなかったらindex.phpに名前が記入されていませんと表示させたいのですがどなたかご教授いただけませんでしょうか? 初心者のため、わからないことがあると思いますが、いろいろと教えていただけたら幸いです。 宜しくお願いいたします。
- ベストアンサー
- PHP
- Stack overflow line at:0のエラーについて
はじめまして。 先日も質問させていただき、見事に解決できたのでまた質問させていただきます。 タイトルにもあるのですが、連動プルダウンを使用したJavascriptでエラーが出てしまいます。ネットでも色々と調べ呼び出しのメモリが不足している、キャッシュが多いなど載っていましたが、どうもPCそのものの問題ではないようです。 それ以外では構文のエラーということだったのでフリーソフトのエラーチェックを行ったのですが、特に問題はなかったです。 プルダウンは全部で20個あり初めの4個は選択後に次のプルダウンに移行すると必ずStack overflowのエラーがでます。 不躾な質問で申し訳ないですが、何か問題があるのかご教授いただけないでしょうか？ よろしくお願いします。 以下は構文になります。 <html> <head> <title>テンプレtest</title> <script type="text/javascript"src="ConnectedSelect.js"></script> <script> function Jump(f){ for(var i=0;i<f.length;i++){ if(f[i].type=="select-one" && f[i].value.match(/\.html?$/)){ window.open(f[i].value,'_blank'); break; } } } </script> </head> <body> <form> 項目1<select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> </select> 項目2<select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option> <option value="bb1">bb1</option> </optgroup></select> ・ ・ ・ ・ 項目20<select name="SEL20"> <option value="">-----------</option> <optgroup label="zz"> <option value="zz1">zz1</option> <option value="zz2">zz2</option> <option value="***.html">***</option> </optgroup></select> <input type="button" value="Go" onClick="Jump(this.form)"> <script type="text/javascript">ConnectedSelect (['SEL1','SEL2','SEL3','SEL4','SEL5','SEL6','SEL7','SEL8','SEL9','SEL10','SEL11','SEL12','SEL13','SEL14','SEL15','SEL16','SEL17','SEL18','SEL19','SEL20']); </script> </form> </center> </body> </html>
- ベストアンサー
- JavaScript
- 以下のコードがＩＥ８では実行されない
現在、セレクトボックスで選択した値をテキストエリアに反映させる javascriptを以下のように作成したのですが、 Firefoxでは問題なく実行されるのですが、ＩＥ８だと全く反応がありません。 この機能をＩＥ８でも実行できるようにするためには、どこをどのように修正すればよいのか わかりません。 （色々調べてはいるのですが、早急に実装しなければならない事情がありまして） どなたか、ご教授いただけないでしょうか？ ■ＨＴＭＬソース <html> <head> <title>テスト</title> <script type="text/javascript" src="./insert.js"></script> </head> <body> 項目： <select id="meet1" onchange="insert_meet1()"> <option></option> <option>テスト１</option> <option>テスト２</option> <option>テスト３</option> </select> <br /> 反映されるエリア： <textarea id="result" cols="50" rows="10"></textarea> </body> </html> ■insert.js function insert_meet1(){ var mojiretsu = document.getElementById('meet1').value; var area = document.getElementById('result'); var bun = document.getElementById('result').value; var nagasa = bun.length; var basho = area.selectionStart; var mae = bun.substr(0, basho); var ushiro = bun.substr(basho, nagasa); document.getElementById('result').value = mae + mojiretsu + ushiro; }
- ベストアンサー
- JavaScript
お礼
試してみました。参考になります。 自分で全部作ってからもう一度質問させていただこうと思ったのですが、 まだまだ時間がかかりそうなので、質問を閉じさせていただきます。 有難うございました。