解決済みの質問
私は、今HP作成を行っているのですが以下で困っています。
タグの勉強から始めた素人です。
よろしくお願いいたします。
やりたいことは、
チェックボックスが4つありすべてのチェックが入るとiframe内のメールフォームに記入可能になる
というものです。
私なりに調べたところ、JavaScriptというものを使って、最初はiframe内に画像などを表示させておき、チェックがすべて入るとiframe内にメールフォームのURLへWebToするという方法です。
しかし、上記をどのように書けばいいかわかりません。
どなたかご教授お願いいたします。
※出来れば、これをコピーして、URLを変更すればOK!というものが欲しいです。。。
投稿日時 - 2008-11-09 14:01:43
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
0人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答(1件中 1~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