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

初めまして。

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

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

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

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

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

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

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

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

• 

  お二人様回答ありがとうございます。
  ご教授頂いた内容を駆使して進めましたが、またつまづいてしまいました。
  
  モーダル内にはご教授頂いたテキストの他に
  ラジオボタンから取得した内容のテキストと
  セレクトボックスから取得した内容のテキストをjavascriptで書き出しています。
  
  この２つを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

No.5 ベストアンサー 回答者： yambejp 回答日時： 2016/02/29 18:36

たとえばこんな感じ

<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>

この回答へのお礼

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

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

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

よろしくお願いします。

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

No.4 回答者： Ogre7077 回答日時： 2016/02/29 18:19

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

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

ならば

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

この回答へのお礼

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

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

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

No.3 回答者： Ogre7077 回答日時： 2016/02/29 14:22

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

<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>

この回答へのお礼

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

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

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

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

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

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

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

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

No.2 回答者： yambejp 回答日時： 2016/02/29 12:08

>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')">

この回答へのお礼

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

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

No.1 回答者： yambejp 回答日時： 2016/02/29 09:59

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

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