formの指定ページをthickboxで表示したい

このQ&Aのポイント
  • ラジオボタンとフォームを組み合わせて決まったリンク先をthickboxで表示したいと思っています。現在のHTMLソースでは別窓でリンク先が開かれてしまいます。
  • 試行錯誤してもうまくいかないため、どのように修正すればよいか教えていただけると助かります。
  • 質問1と質問2のラジオボタンの選択に応じて、指定したリンク先(answer1.htmlなど)をthickboxで開きたいです。
回答を見る
  • ベストアンサー

formの指定ページをthickboxで表示したい

現在、HTMLを使用してホームページを作成しています。 ラジオボタンとフォームの組み合わせで決まったリンク先をthickboxで表示したいと思ってるのですが、うまくいきません。 現在のHTMLソースは、このようになっています <script language="JavaScript"> function Link(btn) { if(document.form1.q1[0].checked && document.form1.q2[0].checked && btn.name=='a')window.open("./answer1.html", "width=900,height=700"); if(document.form1.q1[0].checked && document.form1.q2[1].checked && btn.name=='a')window.open("./answer2.html", "width=900,height=700"); </script> <form name="form1"> <p> <h1>質問1</h1> <input type="radio" name="q1" value=""> 0 <input type="radio" name="q1" value=""> 1 </p> <p> <h1>質問2</h1> <input type="radio" name="q2" value=""> 0 <input type="radio" name="q2" value=""> 1 </p> <p> <input type="button" class="thickbox" name="a" title=" " value=" a " onclick="Link(this)"> <input type="button" class="thickbox" name="b" title=" " value=" b " onclick="Link(this)"> </p> </form> 見づらいので多少簡易化してありますが、おおよそこのようなソースになっています。 今のソースだと、別窓でリンク先(answer1.htmlなど)が開いてしまい、 元々開いていたページには全く内容のないthickboxが表示されます。 ラジオボタンとフォームで指定したリンク先(answer1.htmlなど)をthickboxで開きたいのですが、 試行錯誤はしてみたもののどうしてもうまくいきません。 どのように直せば良いか、わかる方がいたら教えていただけないでしょうか? よろしくお願い致します。

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.2

そりゃjQueryよりiFrameのほうが簡単に決まってるわwww いちいち回答するほどの内容かよ。 (向き直って)質問者さんへ。 えー、 thickboxは作者が開発サポートを止めてしまっているので、もう使うべきではありません。 もう一方の人気プラグイン、fancyboxは商用利用が有償になったため、これも使いづらいし。。 残る定番となると、colorboxでしょうか。 これあたりを見てインストール http://tototo.grats.jp/jquery_colorbox/ $(要素).colorbox({オプション}); で、colorboxは開きますが、こういうurl固定の使用は「決め打ち」の場合の使い方で、今回の場合は、 var targetUrl; if( document.form1.q1[0].checked && document.form1.q2[0].checked && btn.name=='a') targetUrl = "./answer1.html"; // Called directly, without assignment to an element: // =要素にアサインせず、直に呼び出しするお $.colorbox({ href:targetUrl, 他オプション色々 }); これで一発かと。

oaf1200
質問者

お礼

反応が遅くなって申し訳ありません。締切ギリギリで修羅場でしたが、回答者No.2番様のおかげで何とかなりました。本当にありがとうございました。ベストアンサーとさせていただきます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

iframeを使用して、src値を書き換えましょう。 それが一番楽です。

oaf1200
質問者

補足

申し訳ありません、HTML初心者のためどう説明していいのかわからず、説明不足でした。 インラインフレームを使用する方法も考えたのですが、やはりオーバーレイ表示がしたいと思ったのでこの質問をさせていただきました。 thickboxでなくてはならないということはありませんが、オーバーレイ表示はしたいと思っています。

関連するQ&A

  • ラジオボタンの選択項目によってコメントを表示する方法

    ラジオボタンの「Yes・No」にチェックすると、チェックした項目別に欄外にコメントを表示するページを作成しました。 初心者のため、Q1~Q15までcheckの方法を延々と書いたのですが、もっと簡単に書く方法はありますでしょうか? 参考にQ1・Q2の分を掲載させていただきます。 ぜひ、教えてください。よろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- function check(){ if (document.form1.q1[0].checked){ document.form1.q1com.value="減量しましょう"; } if (document.form1.q1[1].checked){ document.form1.q1com.value="引き続き注意を"; } if (document.form1.q2[0].checked){ document.form1.q2com.value="再検査を受けましょう!"; } if (document.form1.q2[1].checked){ document.form1.q2com.value="チェックしましょう"; } // --> </SCRIPT> <INPUT type="radio" name="q1"> Yes <INPUT type="radio" name="q1"> No <INPUT size="41" type="text" name="q1com"> <INPUT type="radio" name="q2"> Yes <INPUT type="radio" name="q2"> No <INPUT size="44" type="text" name="q2com"> <INPUT type="button" value=" 診断ボタン " onclick="check();>

  • ラジオボタンの選択で解答・点数を表示する

    10問のテストを作成しています。 (1)選択肢はラジオボタンで3択(正解は10点、その他0点) (2)採点をクリックすると、テキストボックスに○×の結果を出し、もう一つ別のテキストボックスに×の場合は正しし解答を表示 (3)アラートで「あなたの点数は~~点」と出す (4)FORM1.2のSCOREに点数を表示 以上のようにしたいと思い、下記のように作りました。 まだ初心者のため、長々と同じことを書くことしか分からないので、もっと簡単にまとめられる方法がありましたら、教えてください。 よろしくお願いいたします。 function dispscore() { var score=0; if (document.form1.q0[0].checked) { score += 10; document.form1.r0.value = "○"; } else{ document.form1.r0.value = "×"; document.form1.a0.value = "ナイル川"; } if (document.form1.q1[2].checked) { score += 10; document.form1.r1.value = "○"; } else{ document.form1.r1.value = "×"; document.form1.a1.value = "バチカン市国"; } alert("点数は " + score + " 点 です "); document.form1.score.value=score document.form2.score.value=score } ------------------------------------------------------------ <INPUT type=radio name="q1" value="10">ナイル川 <INPUT type=radio name="q1" value="0">ミシシッピー川 <INPUT type=radio name="q1 value="0">アマゾン川> <INPUT size="3" name="r1" type="text"> <INPUT size="25" name="a1" type="text"> <INPUT type=radio name="q2" value="0">バルカン市国 <INPUT type=radio name="q2" value="0">バルタン市国 <INPUT type=radio name="q2" value="10">バチカン市国 <INPUT size="3" name="r2" type="text"> <INPUT size="25" name="a2" type="text">

  • Formのラジオボタンリセット方法

    下記のradioボタンのグループr1、r2、r3、r4のうちグループr1とr2だけを同時にリセットする方法はありますか? グループ1つリセットする方法はわかりますが、2つリセットになると方法が分かりません。 良い方法はありませんか?よろしくお願いします。 <form> <p> <input type="radio" name="r1" value="1" checked>1<br> <input type="radio" name="r1" value="2">2<br> <input type="radio" name="r1" value="3">3 </p> <p> <input type="radio" name="r2" value="a" checked>a<br> <input type="radio" name="r2" value="b">b<br> <input type="radio" name="r2" value="c">c </p> <p> <input type="radio" name="r3" value="a" checked>a<br> <input type="radio" name="r3" value="b">b<br> <input type="radio" name="r3" value="c">c </p> <p> <input type="radio" name="r4" value="a" checked>a<br> <input type="radio" name="r4" value="b">b<br> <input type="radio" name="r4" value="c">c </p> </form>

  • ラジオボタン

    <html> <head> <title></title> <script type="text/javascript"> function check() { var s=0; if(document.forms["f2"].elements["stay"].checked) { var radios = document.forms["f2"].elements["aa"]; if(document.forms["f2"].elements["aa"].checked) s += 1800; if(document.forms["f2"].elements["aa"].checked) s += 2800; if(document.forms["f2"].elements["aa"].checked) s += 3800; if(document.forms["f2"].elements["aa"].checked) s += 2000; document.forms["f2"].elements["total"].value = s ; } } </script> </head> <body> <form name="f2" action="#"> <h4>Q1.テーマパークに入りますか?</h4> <p> <input type="checkbox" name="stay" value="">入場する </p> <h4>Q2.年齢は?</h4> <p> <input type="radio" name="aa" value="" checked>6歳未満 <input type="radio" name="aa">6歳以上18歳未満 <input type="radio" name="aa">18歳以上60歳未満 <input type="radio" name="aa">60歳以上 </p> <h4>入場料金は次の通りです。</h4> <p> <input type="button" value="計算" onclick="check();"> <input type="text" name="total" value="" size="18">円です。 </p> </form> </body> </html> これでやると何を選択しても0円になるんですけど、 どうすればいいですか?

  • チェックボタンの受け取り方法

    フォーム作成したチェックボタンの受け取り方法を教えてください。 javaのプログラムを書きたいのですがわかりません。助けてください。 <html> <head> <title>練習</title> <body> <script language="Java Script"> <!-- function send_form(){ for(i=0;i<5;i++){ if(document.form1.Q1[i].checked==true){ int a1=i; return a1; } } } //--> </script> </head> <p> <form action=http://localhost:8080/MyApp/servlet/Param2 method=get> Q1 質問をここに書き込む </p> <form name="form1" action="cgi-bin/formsample.cgi" method="post" onSubmit="return send_form()"> <p> <input type='radio'name='Q1'>思う <input type='radio'name='Q1'>やや思う <input type='radio'name='Q1'checked>どちらでもない <input type='radio'name='Q1'>やや思わない <input type='radio'name='Q1'>思わない </p> <input type="submit" value="送信する"><input type="reset" value"書き直す"> </form> </body> </html>

    • ベストアンサー
    • Java
  • オブジェクト名に変数を使いたい

    <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; } ============================================================ いろいろ調べてみましたが、うまくいかず固まっております。 どなたかご教授いただけませんでしょうか?

  • javascriptでフォーム要素の状態を制御

    いつもお世話様です。 phpでフォームを構成しています。 フォーム内のradioボタンの状態で、以降のラジオボタン、プルダウン、テキスト入力を 制御したいです。 <制御内容(やりたいこと)> situmon.phpで、 q1のラジオボタンが1の場合は、q2は回答しなくていい。 (2の場合だけ回答させる。) q3のチェックボックスが1でない場合は、プルダウンとテキストは入力しなくていい。 (1の場合だけ回答させる。) <現状のソース> ちなみに、該当するjavascript部分は、いろいろなサイトをみて、 いろいろ書き換えて試しましたが、どうもうまくいかず、 断念した段階そのままの状態です。 よって、ご回答はこれをベースにしなくても大丈夫です。 よろしくお願いします。 ---situmon.php--- <script type="text/javascript"> <!-- function Check() { document.form.elements["q2"][1].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2"][2].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2t"].disabled = (!document.form.elements["q1"][2].checked); } // --> </script> <body> <form name="form"> <!-- q1 --> <input type="radio" name="q1" id="q1" value="1" onclick="check();"/>はい <input type="radio" name="q1" id="q1" value="2" onclick="check();"/>いいえ <!-- q2 --> <input type="radio" name="q2" id="q2" value="1" />なぜ1 <input type="radio" name="q2" id="q2" value="1" />なぜ2 (その他: <input type="text" name="q2t" id="q2t" value="<php echo h(@$q2t); ?>" />) <!-- q3 --> <input type="checkbox" name="q3c" value="1" />楽しかった <select name="q3s"> <option value="" />▼選んで <option value="1" />めちゃめちゃ <option value="2" />めっちゃ <option value="3" />めちゃ </select> その他なにかあったら書いて <textarea name="q3t" id="q3t"><?php echo h(@$q3t); ?></textarea> </body>

  • 他フォームの入力データの引継ぎ

    入力フォームを2つ用意し 第1フォームの入力欄の1部を第2フォームの入力欄のデータとして submitさせたいのですが <INPUT TYPE="radio">と<SELECT>の入力値がうまく引継げません。 下記のようなJavaスクリプトとHTMLなのですが Javaスクリプトで「value」を=にすると 「radio」のほうはundefin、 「SELECT」で複数選択した場合は、一つ目の選択肢のみしか 引継げませんでした。 Javaスクリプトでうまくいく方法がありましたら ご教示ください。 ----Javaスクリプト-------------------------------- function aaa() { document.FROM2.A.value = document.FROM1.A.value; document.FROM2.B.value = document.FROM1.B.value; document.FROM2.C.value = document.FROM1.C.value; document.FROM2.submit(); } ----HTML-------------------------------- <FORM NAME="FROM1" METHOD="POST" ACTION="***"> <SELECT NAME="A" MULTIPLE> <OPTION VALUE="aa">セレクトa <OPTION VALUE="bb">セレクトb <OPTION VALUE="cc">セレクトc <OPTION VALUE="dd">セレクトd </SELECT> <INPUT TYPE="radio" NAME="B" VALUE="" CHECKED>選択なし <INPUT TYPE="radio" NAME="B" VALUE="1" CHECKED>ラジオ1 <INPUT TYPE="radio" NAME="B" VALUE="2" CHECKED>ラジオ2 <INPUT TYPE="text" NAME="C"> <INPUT TYPE="text" NAME="D"> <INPUT TYPE="submit" NAME="OK_BTN" VALUE="OK"> </FORM> <FORM NAME="FROM2" METHOD="POST" ACTION="***"> <INPUT TYPE="hidden" NAME="A"> <INPUT TYPE="hidden" NAME="B"> <INPUT TYPE="hidden" NAME="C"> <INPUT type="button" onClick="JavaScript:aaa();" name="OK_BTN" value="OK"> </FORM>

  • ラジオボタンのチェック数に応じて、リンク先のページを切り替えたい

    「yes」か「no」だけを選択できるラジオボタンを10組準備し、 yesが選択された数だけをカウントし、 yesの数:0~2 → 01.htm yesの数:3~5 → 02.htm yesの数:6~8 → 03.htm yesの数:9以上 → 04.htm ラジオボタンをチェックし終えた後、 ボタンをクリックすると目的のページにジャンプする仕組みを造りたいのですが、 JavaScriptが全くわからないため、 本と格闘したものの作ることが出来ませんでした。 formの名前は「test」とし、 各ラジオボタンの名前は「q01」「q02」・・・と番号を振って管理しています。 HTMLのソースを記載します。 <form name="test"> <p> <input type="radio" name="q1" value="1">はい  <input type="radio" name="q1" value="0">いいえ </p> <p> <input type="radio" name="q2" value="1">はい  <input type="radio" name="q2" value="0">いいえ </p> <p> <input type="radio" name="q3" value="1">はい  <input type="radio" name="q3" value="0">いいえ </p> ~以下name="q10"まで続く <input type="button" value="採点"> </form> どなたか是非、お知恵をお貸しください。

  • WEBページのラジオボタンを設定するには??

    WinXP、VB.NET、IEでプログラムを作っています。 <input type=radio name=.a value=p checked> <input type=radio name=.b value=m> <input type=radio name=.c value=g> などとなっているところのラジオボタンを設定するにはどうしたらよいでしょうか? IE.document.Forms(0).Elements(".b").Checked = True IE.document.Forms(0).Elements(".b").value("m") = True など試してみたのですがダメでした。 正しい方法をご教示頂きたくお願い致します。