初めまして。

formのラジオボタンとセレクトボックスで取得した内容を
モーダルウィンドウ内に表示する事はなんとかネット検索で両方出来たのですが、

次にその取得した両方の内容を元にif文を使って
モーダルウィンドウ内にテキストを表示(4パターン)させようと試みていますが
うまくいきません。。。

-----------------------------------------------------------
function(){

if (radio1 == "○○" && check1 == "○○" ){
target.innerHTML = "表示させたいテキスト";

-----------------------------------------------------------

こんな感じでJavascriptを書いています。
初心者なのでメソッドなどネットで検索しても分からず行き詰っています。。

皆様のお力をお貸しください!!!
よろしくお願いします。

質問者からの補足コメント

  • へこむわー

    お二人様回答ありがとうございます。
    ご教授頂いた内容を駆使して進めましたが、またつまづいてしまいました。

    モーダル内にはご教授頂いたテキストの他に
    ラジオボタンから取得した内容のテキストと
    セレクトボックスから取得した内容のテキストをjavascriptで書き出しています。

    この2つをhoge()に合わせるとnodateとなるのです。
    (ラジオボタンとセレクトは取得出来ます)

    コードを持ってきたので見て頂けないでしょうか。。
    甘えてばかりではいけないと昨日よりしておりますが、もう駄目です。
    本当に申し訳ないですが、どうぞよろしくお願いします。

    次の追記に続きます。。

      補足日時:2016/03/01 15:19
  • へこむわー

    CSSはご教授通り使わせてもらってます。

    <style>
    #lean_overlay{position: fixed; z-index:100;top: 0px;left: 0px;height: 100%;width: 100%;
    background: #000;display: none;}
    .modal{display: none;background: none repeat scroll 0 0 #FFC0C0;box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);display: none;padding: 30px;width: 780px;}
    </style>

      補足日時:2016/03/01 15:22
  • へこむわー

    追記文ではコードが入りきれないようなので。。
    新しく質問しなおします。。。

      補足日時:2016/03/01 15:26

A 回答 (5件)

たとえばこんな感じ


<style>
#lean_overlay{
position: fixed; z-index:100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
.modal{
display: none;
background: none repeat scroll 0 0 #FFC0C0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: none;
padding: 30px;
width: 780px;
}
</style>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.leanModal.min.js"></script>
<script>
function hoge(){
var r=$('[name=r]:checked').val();
var s=$('[name=s]').val();
var list={
"1":{"5":"text_1_5","6":"text_1_6","7":"text_1_7"}
,"2":{"5":"text_2_5","6":"text_2_6","7":"text_2_7"}
,"3":{"5":"text_3_5","7":"text_3_7"}//3の6は設定しなければnodata
};
if(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined"){
return list[r][s];
}else{
return "nodata";
}
}
$(function() {
$( 'a[rel*=leanModal]').click(function(){
$('#mymodal').html(hoge());
})
$( 'a[rel*=leanModal]').leanModal({
top: 50, // モーダルウィンドウの縦位置を指定
overlay : 0.5, // 背面の透明度
});
});
</script>

<input type="radio" name="r" value="1">1<br>
<input type="radio" name="r" value="2">2<br>
<input type="radio" name="r" value="3">3<br>
</select>
<select name="s">
<option value="">-</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

<a rel="leanModal" href="#mymodal">Modal</a>
<div id="mymodal" class="modal"></div>
    • good
    • 1
この回答へのお礼

ご教授頂きありがとうございます。
yambejp様のコードを使わせて頂きました。
大変助かりました。
こんなに沢山教えて貰っといて大変申し訳ないのですが

【Javascript】(2)formで取得した内容をif文で使いたい…

という内容でまた質問しましたので見て頂けると助かります。。

よろしくお願いします。

お礼日時:2016/03/01 15:47

こちらをお使いでしょうか


http://leanmodal.finelysliced.com.au/

ならば

$(function() {
$('#モーダルを開くaタグのID').click(選んだ内容でモーダル内を書き換える);
$('#モーダルを開くaタグのID').leanModal();
});
function 選んだ内容でモーダル内を書き換える(){
var message = 選んだ内容からモーダルに表示させる文面を選ぶ();
$('#モーダル内の書き換えたいタグのID').text(message);
}
    • good
    • 1
この回答へのお礼

Ogre7077様
度々の質問だったのにも関わらず、丁寧にご教授頂き大変助かりました。
本当にありがとうございます。

この質問の続きで
【Javascript】(2)formで取得した内容をif文で使いたい…
という内容で再質問させて頂きましたのでよろしければ
見て頂けると助かります。。よろしくお願いします。

お礼日時:2016/03/01 15:51

四パターン程度なら、こんな感じでしょうか



<form name=ab action="javascript:選んだ内容でモーダルを開く()">
<p> <label><input type=radio name=a value=1>alpha-1</label> <label><input type=radio name=a value=2>alpha-2</label>
<p> <select name=b><option value=8>beta-8<option value=9>beta-9</select>
<p> <button type=submit>開く</button>
</form>
<script>
function 選んだ内容でモーダルを開く(){
var e = document.forms['ab'].elements;
var a = e['a'].value, b = e['b'].value;
var message = ''; // パターン外も考慮する
if (a == '1' && b == '8') message = 'はるはあけぼの';
if (a == '1' && b == '9') message = 'なつはよる';
if (a == '2' && b == '8') message = 'あきはゆうぐれ';
if (a == '2' && b == '9') message = 'ふゆはつとめて';
開けモーダル(message);
}
</script>
    • good
    • 1
この回答へのお礼

ありがとうございます。とても参考になります。

こんなのも分からないのか!と言われちゃいそうですが。。
質問させてください。

モーダルはフォームで飛ばす方法でなく、
aで開くように設定しています。(送信は別で設置しています。)
使用しているのはネットから持ってきた
jquery.leanModal.min.jsです。

【選んだ内容でモーダルを開く】は何に変更したら良いでしょうか?
メソッド、js言語でご教授頂ければ助かります。

もうひとつですが、
messageのテキストをモーダル内の所定の場所に表示させるのは
下記のjs(現在表示出来ているラジオとセレクトに使っています)を
追加する事で表示できるでしょうか?

window.onload = function onLoad() {
target = document.getElementById(ID名);
target.innerHTML = 選択してください;
}

どうぞよろしくお願いします。

お礼日時:2016/02/29 15:37

>formのラジオボタンとセレクトボックスで取得した内容



あ、申し訳ない
よく見たらセレクトボックスでしたね
であればこんな感じでリストを作っておけばよいかも

<script>
function hoge(r,s){
var list={
"aaa":{"xxx":"axax","yyy":"ayay"}
,"bbb":{"xxx":"bxbx","yyy":"byby"}
};
if(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined"){
alert(list[r][s]);
}else{
alert("too bad!");
}
}
</script>

<input type="button" value="aaa-xxx" onclick="hoge('aaa','xxx')">
<input type="button" value="aaa-zzz" onclick="hoge('aaa','zzz')">
<input type="button" value="ccc-xxx" onclick="hoge('ccc','xxx')">
    • good
    • 1
この回答へのお礼

ありがとうございます。
丁寧に教えて頂きとても勉強になりました。
今後もっと勉強していこうと改めて思います。
本当にありがとうございました!!

お礼日時:2016/02/29 15:11

ラジオボタンとチェックボックスの組み合わせで処理をするのでしょうけど


チェックボックスは選択肢が一つではないので
>check1 == "○○"
は、さすがにないんじゃないの?
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q!(false && (!false)) このJavaScriptを簡単に説明してもらえませんか?

両方が、FALSEとTRUEであれば、TRUE
その反対、だから、FALSE?

Aベストアンサー

and演算でtrueを返すのはtrue && trueのみです

<script>
console.log(false && false);
console.log(false && true);
console.log(true && false);
console.log(true && true);
</script>

Qモーダルウィンドウの作り方

下記のURLのサイトに様々なモーダルウィンドウが載っています。

項目別に違ったモーダルのアクションが表示されます。
中にNewspaperという項目があります。ウィンドウが回転して表示されるのですが、どのようにしてこの回転を実現しているのでしょうか?

jQuery、javascriptについて知識をお持ちの方、よろしければ質問に答えていただけると幸いです。

http://tympanus.net/Development/ModalWindowEffects/

Aベストアンサー

CSS3のtransformですね。超シンプル。
transform: scale(0) rotate(720deg);

0.5秒で2回転。

QappendChildとinnerHTMLを短く

テーブルのthタグと内容を追加したい
・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです
・どうすれば良いでしょうか?

var tr = document.createElement("tr");
tbody.appendChild(tr);
var th = document.createElement("th");
th.innerHTML = '見出1';
tr.appendChild(th);
var th = document.createElement("th");
th.innerHTML = '見出2';
tr.appendChild(th);
var th = document.createElement("th");
th.innerHTML = '見出3';
tr.appendChild(th);
var th = document.createElement("th");
……

Aベストアンサー

table要素にはAPIが用意されているので活用してみてください。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLTableElement.html
http://jsfiddle.net/6gjfbj9w/

> th.innerHTML = '見出1';
ただの文字列挿入に innerHTML を使用するのは好ましくありません。

# Re: re97さん

Qreturn (A && B) || 0;

下記コードはどういう意味でしょうか?
・piyo[b] と piyo[b][a] または 0を返す?
・条件分岐もないのに?
・もしかして条件式を返す?
・あるいは、piyo[b] と piyo[b][a] を返す。または 0?
・ビット演算子?

hoge = function(a, b) {
 return (piyo[b] && piyo[b][a]) || 0;
};

Aベストアンサー

意味は「piyo[b][a]に入っている数値を安全に返したい」です

もしpiyo[b]が未定義ならpiyo[b][a]にアクセスしようとするとエラーになってしまいます
そのためまず、piyo[b] && piyo[b][a]で、piyo[b]が真、つまりオブジェクトならば、piyo[b][a]を評価します。
つまりpiyo[b] && piyo[b][a]はundefinedか、piyo[b][a]になることが期待できます

次に||0で、偽ならば0を返します
つまり、piyo[b]が未定義のときのundefinedや、piyo[b][a]が未定義のときのundefined、また、piyo[b][a]が0のときは偽と評価されるので0になります。

以上より、piyo[b] && piyo[b][a] || 0はpiyoの構造がある程度しっかりしてなくとも、安全に数値(初期値0)を返すことができます。
ただし、完璧に保証できるわけではありません。
例えば、piyo自体がnullやundefinedになる危険性がある場合はさらなるチェックが必要です。

よってこのコードからは、piyoは二次元数値配列であってほしいのだけど、添字が事前にわからないため、最初は一次元配列としてしか初期化していなくて、あとから追加していく形、でも取得するときは、まだ追加されていないときでも、安全に0を返したいのだと分かります。

意味は「piyo[b][a]に入っている数値を安全に返したい」です

もしpiyo[b]が未定義ならpiyo[b][a]にアクセスしようとするとエラーになってしまいます
そのためまず、piyo[b] && piyo[b][a]で、piyo[b]が真、つまりオブジェクトならば、piyo[b][a]を評価します。
つまりpiyo[b] && piyo[b][a]はundefinedか、piyo[b][a]になることが期待できます

次に||0で、偽ならば0を返します
つまり、piyo[b]が未定義のときのundefinedや、piyo[b][a]が未定義のときのundefined、また、piyo[b][a]が0のときは偽と評価されるの...続きを読む

QappendChildとinnerHTMLの順番?

■質問1
・appendChildしてからinnerHTMLするのでしょうか?
・もしくはその逆?
・あるいはどちらでも良い?

▽案1
tr.appendChild(td);
td.innerHTML = "内容";

▽案2
td.innerHTML = "内容";
tr.appendChild(td);



■質問2
・innerHTMLは「DOM API」とは違うのでしょうか?
・appendChildの仲間だと思っていたのですが…

Aベストアンサー

> 質問1

案1: tr 配下の td の内容を書き換える
案2: 内容を書き換えた td を tr 配下に加える
なので、結果的にはほぼ同じ意味になります。
ブラウザによる画面描画タイミングは、スクリプトの実行が終わった後が多いため、
表示に差異が出ることも無いでしょう。

> 質問2

マイクロソフト社が独自実装した機能なので、いわゆる "DOM Level 0" に分類されます。
標準仕様とされている "W3C DOM API" ではありませんので、
厳密にやるなら以下の様になるでしょう。

tr.appendChild(td).appendChild(document.createTextNode("内容"));

ただ innerHTML は、互換性のために各社のブラウザにも搭載されているので、
あまり気にせずともよい気がします。


人気Q&Aランキング

おすすめ情報