初めまして。

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利は「りっとう」ですか「のぎへん」ですか?

タイトルそのままなのですが、いつも迷います。
確か「りっとう」だったとおもいますが、なぜ「のぎへん」では
ないのですか?おしえてください。

Aベストアンサー

「りっとう」です
「リ」は「刀」と同じ意味を持ちます。「利」は「禾束(稲束)を刃物で切る」ことを表します。
漢字の意味の主体が「刀で切る」ことなので「禾」ではなく「刀」が部首になるのでしょう。

ちなみに「禾」は穂が垂れ下がった植物の形を表します。ですから「稲」など植物を表す漢字では「のぎへん」になります。

(漢字源第四版より)

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

前回も同じタイトルで質問させて頂いております。
追記でも入りきれなかったので新しくあげました。
長くなりますが見て頂けると助かります。
コードがこちらです。

<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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.leanModal.min.js"></script>
<script>//ラジオ--------------------------------------------
function onRadioButtonChange() {
check1 = document.form1.Radio1.checked;
check2 = document.form1.Radio2.checked;
check3 = document.form1.Radio3.checked;
target = document.getElementById("output");

if (check1 == true) {
target.innerHTML = "ラジオ1";
}
else if (check2 == true) {
target.innerHTML = "ラジオ2";
}
else if (check3 == true) {
target.innerHTML = "ラジオ3";
}
}
window.onload = function onLoad() {
target = document.getElementById("output");
target.innerHTML = "選択してください";
}
</script>
<script>//セレクト--------------------------------------------
function onButtonClick() {
selindex = document.form1.Select1.selectedIndex;
target = document.getElementById("output1");

switch (selindex) {
case 0:
target.innerHTML = "セレクト1";
break;
case 1:
target.innerHTML = "セレクト2";
break;
case 2:
target.innerHTML = "セレクト3";
break;
}
}
window.onload = function onLoad() {
target = document.getElementById("output1");
target.innerHTML = "選択してください";
}
</script>
<script>
function hoge(){
var r=$('[name=r]:checked').val();
var s=$('[name=s]').val();
var target = document.getElementById("output3");
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"}};
if(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined"){
return list[r][s];
}else{
return "nodata";
}}
window.onload = function onLoad() {
target = document.getElementById("output3");
target.innerHTML = hoge();
}
$(function() {
$( 'a[rel*=leanModal]').leanModal({
top: 100, // モーダルウィンドウの縦位置を指定
overlay : 0.5, // 背面の透明度
});
});
</script>

<form name="form1">
<input type="radio" name="r" value="1" id="Radio1" onchange="onRadioButtonChange();">1<br>
<input type="radio" name="r" value="2" id="Radio2" onchange="onRadioButtonChange();">2<br>
<input type="radio" name="r" value="3" id="Radio3" onchange="onRadioButtonChange();">3<br>
</select>
<select name="s" id="Select1">
<option value="">-</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</form>
<br>
<a rel="leanModal" href="#mymodal" onClick="onButtonClick()">Modal</a>
<div id="mymodal" class="modal">
<p id="output"></p>
<p id="output1"></p>
<p id="output3"></p>
</div>

モーダルウインドウ内に
①ラジオボタンから取得した内容のテキスト
②セレクトボックスから取得した内容のテキスト
③ラジオボタンとセレクトボックス2つ情報を取得してテキストを書き出す方法
この3つをjavascriptで設定しています。
(③は前回の質問でご教授頂いた内容を少し変えています。)

ここからが質問なんですが
①と②の内容は問題なく表示出来るのですが、③の内容がnodateとなってしまうのは何故でしょうか?
私の推測では記述方法を間違えていると思うのですが、まだまだ勉強不足でつまづいています。

皆様のお力を貸してください。どうぞよろしくお願いします。

前回も同じタイトルで質問させて頂いております。
追記でも入りきれなかったので新しくあげました。
長くなりますが見て頂けると助かります。
コードがこちらです。

<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>
...続きを読む

Aベストアンサー

>window.onload = function onLoad() {

jQueryのライブラリ使っているのだからonload処理はこの書式ではできない
そもそもやっていることもonload処理じゃないし
実際にはこんな感じ?

<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 onRadioButtonChange() {
var r=$('[name=r]:checked').val();
var list={"1":"ラジオ1","2":"ラジオ2","3":"ラジオ3"};
var str=(typeof list[r]!=="undefined")?list[r]:"選択してください";
$('#output').text(str);
}
function onButtonClick() {
var s=$('[name=s]').val();
var list={"5":"セレクト5","6":"セレクト6","7":"セレクト7"};
var str=(typeof list[s]!=="undefined")?list[s]:"選択してください";
$('#output1').text(str);
}
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"}
};
var str=(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined")?list[r][s]:"選択してください";
$('#output3').text(str);
}

$(function() {
$( 'a[rel*=leanModal]').leanModal({
top: 100,
overlay : 0.5,
});
$( 'a[rel*=leanModal]').click(function(){
onButtonClick();
onRadioButtonChange();
hoge();
});

});
</script>

<form name="form1">
<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" id="Select1">
<option value="">-</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</form>
<br>
<a rel="leanModal" href="#mymodal">Modal</a>
<div id="mymodal" class="modal">
<p id="output"></p>
<p id="output1"></p>
<p id="output3"></p>
</div>

>window.onload = function onLoad() {

jQueryのライブラリ使っているのだからonload処理はこの書式ではできない
そもそもやっていることもonload処理じゃないし
実際にはこんな感じ?

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

<sc...続きを読む

Q基本5文型と文の種類

文の種類は,平叙文,疑問文,命令文,感嘆文以外に本当にないですか?(他に思いつきませんが、これで全てといえるか否かがいまいちよく分りません)

肯定文・否定文とは上の各文の種類に対して、更に分けることができるのでしょうか?

基本文型はなぜ、各文の型と完全には一致しているわけでないのに、その様に分類して考えているのでしょうか?

Aベストアンサー

失礼しました。
一応確認だけさせて頂きました。

>Vを動詞と捉えるよりも動詞区と捉える方がいいと思います。でないと例えば、助動詞を使った文などについては考えることができなくなりますから。

それでいいように思います。助動詞が付いても完了形や進行形などになっても動詞のタイプ自体は変わりないのですから、文型は変わりません。

>また例えば、SVOなどの文は同時にVO自体が一つの動詞句と理解することもできると思いました。そんなことを考えたわけです。

面白そうな考え方です。特に「VO自体が1つの動詞句と理解する」という所は少し興味があります。

ただ、一応僕にとっては、「動詞句」っていえば、例えば make fun of ~(~をからかう)とか、speak ill of ~(~の悪口を言う)などのように、特別な組み合わせだけを思い浮かべますね。

VOの組み合わせで「動詞句」と考えられそうな例を教えて頂けませんか。ちょっとイメージをつかんでみたいので。

Q【JavaScript】ラジオボタンにより、formのaction内容

【JavaScript】ラジオボタンにより、formのaction内容を変更したいのですが・・・。

どのラジオボタン(ここでは『A』と『B』とします)をチェックされたかにより、

<form action="(ここの部分)">

(ここの部分)と書かれたformのactionの内容を変えたいのです。

例)
『A』のラジオボタンをチェック → <form action="a.php">になる
『B』のラジオボタンをチェック → <form action="b.php">になる

このようにしたいのです。

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

Aベストアンサー

function gamenchange(){
if (document.myform.radio01.value=="1"){
document.myform.action="a.php";
}else{
document.myform.action="b.php";
}
document.myform.submit();
}

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

<form action="#" method="post">
<input type="radio" name="radio01" value="1">ラジオボタンA
<input type="radio" name="radio01" value="2">ラジオボタンB
<input type="submit" onclick="gamenchange()">
</form>

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

submitボタンを押したときにfunctionでaction先をセットする・・・のはいかがでしょう?

Q否定文、疑問文について

次の問題を否定文と疑問文にしなさい。
She went to school yesterday.
否定文→
疑問文→
It was a very interesting movie.
否定文→
疑問文→
よろしくお願いしますm(__)m

Aベストアンサー

She went to school yesterday.

否定文→ She didn't go to school yesterday.
疑問文→ Did she go to school yeaterday?

It was a very interesting movie.

否定文→ It wasn't a very interesting movie.
疑問文→ Was it a very interesting movie?

Q【Javascript】Cookie値の取得

"K16.ver=test"のtestを取得する方法を分かりやすく教えて下さい!

できれば値だけ取得する方法を教えて下さい。

Aベストアンサー

ライブラリをつかわずにcookieを利用するなら、set、get、del用の
関数を独自で用意した方がよいでしょう
ざっと書くとこんな感じです。
(setCookieについては生存期間を任意に設定したいなら適当に拡張してください)
<script>
function setCookie(key,val,url){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
if(url){
tmp += "domain="+getDomain(url)+";";
tmp += "path="+getDomainPath(url)+";";
}
document.cookie = tmp;
};
function getCookie(key){
tmp = document.cookie+";";
tmp1 = tmp.indexOf(key,0);
if(tmp1 != -1){
tmp = tmp.substring(tmp1,tmp.length);
start = tmp.indexOf("=",0);
end = tmp.indexOf(";",start);
return(unescape(tmp.substring(start+1,end)));
}
return("");
};

function delCookie(key){
expiredate = new Date();
expiredate.setYear(expiredate.getYear()-1);
tmp = key+"=;";
tmp += "expires="+expiredate.toGMTString();
document.cookie = tmp;
};
</script>
<input type="text" name="hoge" id="hoge">
<input type="button" value="set" onclick="setCookie('K16.ver',document.getElementById('hoge').value)"><br>
<input type="button" value="check" onclick="console.log(getCookie('K16.ver'))">
<input type="button" value="del" onclick="delCookie('K16.ver')"><br>

ライブラリをつかわずにcookieを利用するなら、set、get、del用の
関数を独自で用意した方がよいでしょう
ざっと書くとこんな感じです。
(setCookieについては生存期間を任意に設定したいなら適当に拡張してください)
<script>
function setCookie(key,val,url){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
if(url){
tmp += "domain="+getDomain(url)+";";
tmp += "path="+getDomainPath(url)+";";
}
document.cookie = tmp;
};
function getCo...続きを読む

QVHDLで、case文とwhen文のどちらを使おうか迷っています。

VHDLで、case文とwhen文のどちらを使おうか迷っています。

以下のようなプログラムを作ろうと思っています。
//ここからcase文もしくはwhen文
SWの値を読み込み、
1の時signalに10を代入
2の時signalに20を代入



10の時signalに100を代入
//ここまでcase文もしくはwhen文

process(clk)
clkが立ち上がる回数をカウントしていき、signalと同じ数になった時に1を出力
それ以外は0を出力
end process

case文はprocess文で、when文は同時処理文で記述することは知っていますが、このような場合、どちらを使ったらいいのでしょうか?

Aベストアンサー

case文の方が良いでしょう。というか、私ならcase文にします。合成結果が良さそうだからです。(実際は同じかも知れませんが)どんな文でもあまり深い記述にしない方がいいかなと思います。

Q【Javascript】(テキストボックスの)テキストの末尾にフォーカスを置きたい【フォーム】

onLoad時にテキストボックスにフォーカスをあてるのですが、
質問タイトルのようなことができません。

前ページからPOSTで持ってきた文字列を入れたテキストボックスなのですが、
BODYタグ部分にonLoad="frm.elm.focus();"と書くと、
そのテキストボックス内の文字列の先頭にフォーカスが行きます。

文字列の続きを入力する項目なので
文字列の末尾にフォーカスを置きたいのですが
方法はありますでしょうか。

ご存知の方いらっしゃいましたらご教示願います。
質問が解りづらかったらすみません。
宜しくお願い致します。

Aベストアンサー

これでどうでしょう?
<html>
<body onLoad=document.F1.I2.focus();document.F1.I2.value="テスト">
<form name="F1">
<input type="text" name="I1"><br><input type="text" name="I2">
</form>
</body>
</html>

Q100文ざし「

銭の100文ざしって1文銭じゃなく4文銭で束ねてる事も結構あるのですか?24枚の96文だけど。

Aベストアンサー

100文ざし自体が、さす手間賃をさっ引いて96文しか無いそうです。^^;

4文銭ざし96文もあり得ますが、
重さで100文ざしを正しい枚数か計ったとすると、
4文銭ざし96文では1枚抜いて4文儲けの不正がし易いですね。

専門家さんに後は御任せします。m(__)m

Q【正規表現】【javascript】CR、CR・LF、LF改行コードをLFにしたい

CR、CR+LF、LFのシステムによって異なる3種類の改行コードを
LFに置換したいです。

変数hogeに置換対象の文字列が入っているとして、
hoge.replace(/\r\n/g,"\n").replace(/\r|\n/g,"\n");
とreplaceを使って置換してみました。

うまくいってるようですが、replaceを二度使ってるところが、カッコ悪いなぁと思います。

replace一回ですむような方法がありましたら教えてください。

Aベストアンサー

hoge.replace(/\r\n?/g,"\n");


人気Q&Aランキング

おすすめ情報