初めまして。
formのラジオボタンとセレクトボックスで取得した内容を
モーダルウィンドウ内に表示する事はなんとかネット検索で両方出来たのですが、
次にその取得した両方の内容を元にif文を使って
モーダルウィンドウ内にテキストを表示(4パターン)させようと試みていますが
うまくいきません。。。
-----------------------------------------------------------
function(){
if (radio1 == "○○" && check1 == "○○" ){
target.innerHTML = "表示させたいテキスト";
-----------------------------------------------------------
こんな感じでJavascriptを書いています。
初心者なのでメソッドなどネットで検索しても分からず行き詰っています。。
皆様のお力をお貸しください!!!
よろしくお願いします。
No.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>
ご教授頂きありがとうございます。
yambejp様のコードを使わせて頂きました。
大変助かりました。
こんなに沢山教えて貰っといて大変申し訳ないのですが
【Javascript】(2)formで取得した内容をif文で使いたい…
という内容でまた質問しましたので見て頂けると助かります。。
よろしくお願いします。
No.4
- 回答日時:
こちらをお使いでしょうか
http://leanmodal.finelysliced.com.au/
ならば
$(function() {
$('#モーダルを開くaタグのID').click(選んだ内容でモーダル内を書き換える);
$('#モーダルを開くaタグのID').leanModal();
});
function 選んだ内容でモーダル内を書き換える(){
var message = 選んだ内容からモーダルに表示させる文面を選ぶ();
$('#モーダル内の書き換えたいタグのID').text(message);
}
Ogre7077様
度々の質問だったのにも関わらず、丁寧にご教授頂き大変助かりました。
本当にありがとうございます。
この質問の続きで
【Javascript】(2)formで取得した内容をif文で使いたい…
という内容で再質問させて頂きましたのでよろしければ
見て頂けると助かります。。よろしくお願いします。
No.3
- 回答日時:
四パターン程度なら、こんな感じでしょうか
<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 = 選択してください;
}
どうぞよろしくお願いします。
No.2
- 回答日時:
>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')">
ありがとうございます。
丁寧に教えて頂きとても勉強になりました。
今後もっと勉強していこうと改めて思います。
本当にありがとうございました!!
No.1
- 回答日時:
ラジオボタンとチェックボックスの組み合わせで処理をするのでしょうけど
チェックボックスは選択肢が一つではないので
>check1 == "○○"
は、さすがにないんじゃないの?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- Visual Basic(VBA) VBA 改行コードの取り方 1 2022/03/22 14:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Visual Basic(VBA) ファイル全てを .xlsm に変更したところ、プログラムが途中で落ちてしまっています 17 2022/12/07 12:03
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
value内に変数を入れたい
-
hiddenのvalueの値を変えたい
-
javascriptでhiddenに二次元配...
-
他フォームの入力データの引継ぎ
-
VBAをJavaScriptに変換したいです
-
setIntervalの間隔を途中で変更...
-
フォームで入力した値を別のフ...
-
【Javascript】formで取得した...
-
ラジオボタンの選択で解答・点...
-
JavaScriptによる自動計算フォ...
-
値を初期化したい。
-
複数のsubmitボタンで押された...
-
フォーカスすると初期値が消去...
-
JAVASCRIPTで、ボタンを押した...
-
ラジオボタンと連動して文字列...
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
【jQuery】input nameの文字列...
-
onchangeイベントを強制的に発...
-
javascriptでASPにデータを渡す
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
value内に変数を入れたい
-
hiddenのvalueの値を変えたい
-
javascriptでhiddenに二次元配...
-
複数のsubmitボタンで押された...
-
テキストボックスに入力された...
-
switchを使って四則演算のプロ...
-
VB.NET DateTimeの型について
-
クイズ作成:15個の問題から5個...
-
C言語クイックソートの比較総回...
-
セレクトボックスの初期選択状...
-
ラジオボタンの選択で解答・点...
-
子から親へチェックボックスの...
-
ラジオボタンと連動して文字列...
-
setIntervalの間隔を途中で変更...
-
JAVASCRIPTで、ボタンを押した...
-
sessionStorageを調べています。
-
クリックの度に加算していくには?
-
マクロ オブジェクト変数With...
-
3桁区切りのカンマをつけたい...
-
selectboxのoptionタグのvalue...
おすすめ情報
お二人様回答ありがとうございます。
ご教授頂いた内容を駆使して進めましたが、またつまづいてしまいました。
モーダル内にはご教授頂いたテキストの他に
ラジオボタンから取得した内容のテキストと
セレクトボックスから取得した内容のテキストをjavascriptで書き出しています。
この2つをhoge()に合わせるとnodateとなるのです。
(ラジオボタンとセレクトは取得出来ます)
コードを持ってきたので見て頂けないでしょうか。。
甘えてばかりではいけないと昨日よりしておりますが、もう駄目です。
本当に申し訳ないですが、どうぞよろしくお願いします。
次の追記に続きます。。
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>
追記文ではコードが入りきれないようなので。。
新しく質問しなおします。。。