チェックONによるiframe有効

解決済みの質問

チェックONによるiframe有効

私は、今HP作成を行っているのですが以下で困っています。
タグの勉強から始めた素人です。
よろしくお願いいたします。

やりたいことは、
チェックボックスが4つありすべてのチェックが入るとiframe内のメールフォームに記入可能になる
というものです。

私なりに調べたところ、JavaScriptというものを使って、最初はiframe内に画像などを表示させておき、チェックがすべて入るとiframe内にメールフォームのURLへWebToするという方法です。

しかし、上記をどのように書けばいいかわかりません。
どなたかご教授お願いいたします。
※出来れば、これをコピーして、URLを変更すればOK!というものが欲しいです。。。

投稿日時 - 2008-11-09 14:01:43

QNo.4465068

すぐに回答ほしいです

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

yambejpさんの回答でも問題はありませんが、次のソースでは、ダミーページが必要ありません。
いかがでしょう。
仕組みとしては、はじめにiframeを表示しない状態にしておいて、チェックボックスがクリックされた際に毎回各チェックボックスの状態(ONorOFF)を確認し、すべてのチェックボックスがチェックされていたらiframeを表示するようにしています。
if((cc0 == 1) && (cc1 == 1) && (cc2 == 1) && (cc3 == 1))
この部分を変更すると「1つ目と3つ目がonになっていてそれ以外がOFFのときに表示する」といったこともできます。

<html><head>
<script type="text/javascript">
<!--
function flame(){
cc0 = this.f0.c0.checked;
cc1 = this.f0.c1.checked;
cc2 = this.f0.c2.checked;
cc3 = this.f0.c3.checked;
ifst = document.all["iframe0"].style;
if((cc0 == 1) && (cc1 == 1) && (cc2 == 1) && (cc3 == 1)){
ifst.display = "block";
} else {
ifst.display = "none";
}
}
-->
</script>
</head>
<body>
<form id="f0">
<input type="checkbox" name="c0" onClick="flame()">
<input type="checkbox" name="c1" onClick="flame()">
<input type="checkbox" name="c2" onClick="flame()">
<input type="checkbox" name="c3" onClick="flame()">
</form>
<span id=iframe0 style="DISPLAY: none">
<iframe id="if0" src="fuga.htm">
</iframe>
</span>
</body>
</html>

fuga.htmにはメールフォームを書いてください。

投稿日時 - 2008-12-04 22:30:43

ANo.2

0人が「このQ&Aが役に立った」と投票しています

[  前へ  |  次へ ]

ベストアンサー以外の回答(1件中 1~1件目)

ANo.1

>出来れば、これをコピーして、URLを変更すればOK!というものが欲しい

丸ナゲは禁止されています、理解していますか?
とりあえずこんな方法でどうでしょう?

//hoge.htm
<script>
window.onload=function(){
var f=document.getElementById("f0");
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox") f[i].onclick=function(){
var if0=document.getElementById("if0");
if(!this.checked){ if0.src="fuga.htm"; return true;}
var flg=true;
var f=this.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" & !f[i].checked){flg=false;break;}
}
if(flg) if0.src="piyo.htm";
return true;
}
}
}
</script>
<form id="f0">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</form>
<iframe id="if0" src="fuga.htm">
</iframe>

//fuga.htm
fuga

//piyo.htm
piyo

fuga.htmにはダミーページを、piyo.htmにはメールフォームを書いてください

投稿日時 - 2008-11-10 00:44:26

あわせてチェックしたい
  • メールフォーム チェックボックス ...
  • メールフォーム チェックボックス ...
  • Javascript? チェックボックスと・・・・ ...
PR
【回答募集中】花粉にひと言、物申す![ 詳細 ]

OKWaveのオススメ

教えて弁護士さん!

お金の悩みQ&A特集はこちら