先程関連質問の回答をいただいた者なのですが、ラジオボタンの内容によってsubmitボタンの色を変えるところまで実現したいのですが、東京ならsubmitボタンはピンク、大阪ならsubmitボタンはブルーにしたいと思います。この場合は、submitボタンのところでIF文で分岐させればいいものでしょうか。

<html>
<head>
<script Language="JavaScript">
<!--
function set( n ) {
document.myFORM.Submit.value = document.myFORM.elements[n].value;
}
// -->
</script>
</head>
<body onLoad="set(0);">
<FORM ACTION="add.cgi" METHOD="POST" name="myFORM">
<INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onClick="set(0);" STYLE="background-color:pink" checked>
<INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪" onClick="set(1);" STYLE="background-color:blue">
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★" STYLE="background-color:pink">
</form>
</body>
</html>

このQ&Aに関連する最新のQ&A

A 回答 (1件)

ラジオボタンの色を参照してよいのでしたら、set関数に


document.myFORM.Submit.style.backgroundColor = document.myFORM.elements[n].style.backgroundColor;

この1行を追加すればできますよ。

実際にはラジオボタンの色を参照できないのでしたら、
if ( n == 0 )
{
 document.myFORM.Submit.style.backgroundColor = "pink";
}
else if ( n == 1 )
{
 document.myFORM.Submit.style.backgroundColor = "blue";
}

こうなります。
    • good
    • 0
この回答へのお礼

今回やりたい内容はラジオボタンの色参照できる形なので、前者で無事目的の動作ができました。
フォームボタンの体裁等の設定のしかたも勉強になりました。ありがとうございました。

#これで、わが職場のスタッフのミスも少しは減るのではと期待しています。

お礼日時:2001/04/23 12:09

このQ&Aに関連する人気のQ&A

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

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

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

Qページ間で変数を保持したい

いつもお世話になっております。

今回はhtml間での値渡しについてお聞きしたいです。

現在ある二つのページA,Bを作成していまして、お互いにリンクが張ってあります。
AからBに行く時、Aの中にあるフォームの内容をBに表示したく外部jsファイルでグローバル変数に保持したりなどやってみましたがだめでした。

そもそもこのようなことをjavascriptのみでできるのでしょうか?
また可能ならばどのようにすればよいでしょうか?
ご教授お願いします。

Aベストアンサー

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</body>
</html>
------------------------------------------------------------
fB.html
------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
<!--
function init() {
var arr=Array();

var ss = "";
var querys=location.search;
if(querys) {
var q = querys.replace(/^\?/,'').split('&');
for(i=0 ; i<q.length ; i++){
var pair=q[i].split('=');
// arr[pair[0]]=pair[1];
ss += pair[0] + " = " + pair[1] + "\n";
}
}
alert(ss);
}

window.onload= init;

//--></script>
</head>
<body>
</body>
</html>

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</b...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

QHTMLボタンの文字色を変えられますか

よろしくお願いします。

HTMLで作成したボタンの文字の色は
デフォルトで黒ですが、これを白ぬきしたいと思って
います。実現可能でしょうか?

Aベストアンサー

formで作ったボタン(butoon,submit,reset等)だと仮定してお答えしますが、
スタイルシートを使えばできます。
ついでにボタンの色自体も変えたいとして書いておきますね。

<input TYPE="button" VALUE="button">
<input TYPE="submit" VALUE="submit">
<input TYPE="reset" VALUE="reset">

だと普通のボタンになりますが、
style="background:red;color:white;"
というのをinputタグの中に書けばボタンの色と文字の色が変わります。
今の例では、ボタンそのものは赤色になり、
文字の色は白色になります。
色を変えたい場合は、red、whiteの部分を好きなように変えてください。
文字色だけならbackground:red;はなくしてください。
実際には、以下の様に書いてください。

<input TYPE="button" VALUE="button" style="background:red;color:white;">
<input TYPE="submit" VALUE="submit" style="background:red;color:white;" >
<input TYPE="reset" VALUE="reset" style="background:red;color:white;" >

もしスタイルシートがわからない、同じようにやったけど変わらないというなら補足してください。

formで作ったボタン(butoon,submit,reset等)だと仮定してお答えしますが、
スタイルシートを使えばできます。
ついでにボタンの色自体も変えたいとして書いておきますね。

<input TYPE="button" VALUE="button">
<input TYPE="submit" VALUE="submit">
<input TYPE="reset" VALUE="reset">

だと普通のボタンになりますが、
style="background:red;color:white;"
というのをinputタグの中に書けばボタンの色と文字の色が変わります。
今の例では、ボタンそのものは赤色になり、
文字の色は白色にな...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q複数のsubmitボタンで押されたボタンを取得する方法

form内の、submitボタンの値が拾えません。
1つだけsubmitボタンを設置すると値が拾えますが、
2つ以上submitボタンを設置すると拾えません。
仕様上、無理なのでしょうか?

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.btn.value);
}
</SCRIPT>

<FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()">
<INPUT type="submit" name="btn" value="テスト1">
<INPUT type="submit" name="btn" value="テスト2">
<INPUT type="submit" name="btn" value="テスト3">
</form>

Aベストアンサー

> alert(document.frmMvPost.btn.value);

btnというオブジェクトが複数あるため、btnは配列になってしまうため、
document.frmMvPost.btn.valueでは値が取れません。

回避策はonClickイベントにて値をHiddenへ格納すればOKです。

_____________________________________________________________

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.onbtn.value);
}

function set_value(s_val)
{
document.frmMvPost.onbtn.value = s_val;
}

</SCRIPT>

<FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()">
<INPUT type="submit" name="btn" value="テスト1" onClick="set_value('テスト1')">
<INPUT type="submit" name="btn" value="テスト2" onClick="set_value('テスト2')">
<INPUT type="submit" name="btn" value="テスト3" onClick="set_value('テスト3')">
<INPUT type="hidden" name="onbtn">
</form>

_____________________________________________________________


※テストしていないため動作は保証しません。問題ある場合にはお手数ですが何かしら手を加えてください。

> alert(document.frmMvPost.btn.value);

btnというオブジェクトが複数あるため、btnは配列になってしまうため、
document.frmMvPost.btn.valueでは値が取れません。

回避策はonClickイベントにて値をHiddenへ格納すればOKです。

_____________________________________________________________

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.onbtn.value);
}

function set_value(s_val)
{
document.frmMvPost.onbtn.value = s_val;
}

</SCRIPT...続きを読む

QJavascriptでのbuttonのname属性、もしくはid属性を取得

押されたボタンのname属性、もしくはid属性を取得し、処理を分けるプログラムを考えています。
<form>タグ自体にid属性は存在しますが、name属性はありません。
その状況で、押されたボタンのid、もしくはnameを取得するにはどうしたらいいでしょうか?

Aベストアンサー

<input type="button" onclick="ckBtn(this)" (その他のパラメーター)>

の様に書けば、呼ばれた関数で

function ckBtn(button) {
alert('id=' + button.id);
alert('name=' + button.getAttribute('name');
}

の様に元の inputタグの属性を得られます。

# 上のコードはチェックしてないのでスペルミスとかあるかも知れません。

参考URL の 「DOM-HTMLを操作するための仕組み」を見てください。

参考URL:http://javascriptist.net/docs/js_ref_ext.html

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

QPHPのif文でその処理を途中で抜けるにはどうすればよいでしょうか?

PHPのif文でその処理を途中で抜けるにはどうすればよいでしょうか?
for文やwhile文ではbreakやcontinueなどが使えるようですが、if文にはないのでしょうか?

条件分岐がいくつかあって、その一つを途中で抜けて次の条件分岐へと移行したいのですが、
exitを使ってしまうと、次へ行かずに処理が中止されてしまいますし、
どのようにすればよいのか分からず困っています。何かよい方法はないでしょうか?

Aベストアンサー

例えば「goto 演算子」を使うとかですね。
http://php.net/manual/ja/control-structures.goto.php
(参考URL)

「if文を強制終了」というより「ステップの強制移動」と言った感じです。

ただ、あまりgoto演算子はお勧めできません。
複雑な処理になればなるほど、バグが発生した際にバグ元を発見し難くなります。

本来は細かく制御文を入れていけば、あまり必要ないと思いますが・・・


人気Q&Aランキング