xhtmlとCGIについて。


現在 select を使って、下記①の様なコードを書いています。

それを下記②のような radio で実現することは可能でしょうか?
実現できるならどのようなコードを書けばよいでしょうか?

radioの値を配列のようにしてあげることで、
multipleで複数選択したのと同じ状態を実現できるのかなと期待しています。

※送信情報を受け取るCGIは、PHPです。
※★CGIの方は書き直さないとします。★
※PHPの事はあまり分かっていません。
※選択できる項目は2つのみで、最低1つは選択されるとします。


<select multiple size="2" name="day[]">
<option value="Sunday">日曜日</option>
<option value="Monday">月曜日</option>  
</select>


<input type="radio" value="day[Sunday]" name="day">日曜日
<input type="radio" value="day[Monday]" name="day">月曜日
<input type="radio" value="day[Sunday,Monday]" name="day">どちらも

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/04/03 14:31:54
  • 終了:2008/04/09 09:37:30

ベストアンサー

id:y-kawaz No.1

y-kawaz回答回数1421ベストアンサー獲得回数2262008/04/03 15:12:29

ポイント35pt

「CGI側は変えることが出来ない事情があるが、フォーム側だけを弄ってラジオボタンのその3択にしたい」ということですね。

だとするとマルチセレクトは複数の同名パラメータを送信する必要がある為、HTMLの書き方だけではそれを実現するのは不可能です。

ですがJavascriptを使って良ければマルチセレクトと同じようなリクエストを送ることが出来ます。

例えばこんなんでどうでしょうか?

<script type="text/javascript">
function make_day(days) {
    var hiddens = '';
    for(var i = 0; i < days.length; i++) {
        hiddens += '<input type="hidden" name="day[]" value="' + days[i] + '"/>';
    }
    document.getElementById('day_hiddens').innerHTML = hiddens;
}
</script>
<form>
    <span id="day_hiddens"></span>
    <input type="radio" name="day_dummy" onclick="make_day(['Sunday'])"/>日曜日
    <input type="radio" name="day_dummy" onclick="make_day(['Monday'])"/>月曜日
    <input type="radio" name="day_dummy" onclick="make_day(['Sunday','Monday'])"/>どちらも
    <input type="submit"/>
</form>

http://q.hatena.ne.jp/answer

id:tetlis

HTMLだけでは実現できないということ、了解しました。

ありがとうございます。


教えていただいたjavascript、シンプルなので是非試してみようと思います。

2008/04/09 09:35:17

その他の回答(1件)

id:y-kawaz No.1

y-kawaz回答回数1421ベストアンサー獲得回数2262008/04/03 15:12:29ここでベストアンサー

ポイント35pt

「CGI側は変えることが出来ない事情があるが、フォーム側だけを弄ってラジオボタンのその3択にしたい」ということですね。

だとするとマルチセレクトは複数の同名パラメータを送信する必要がある為、HTMLの書き方だけではそれを実現するのは不可能です。

ですがJavascriptを使って良ければマルチセレクトと同じようなリクエストを送ることが出来ます。

例えばこんなんでどうでしょうか?

<script type="text/javascript">
function make_day(days) {
    var hiddens = '';
    for(var i = 0; i < days.length; i++) {
        hiddens += '<input type="hidden" name="day[]" value="' + days[i] + '"/>';
    }
    document.getElementById('day_hiddens').innerHTML = hiddens;
}
</script>
<form>
    <span id="day_hiddens"></span>
    <input type="radio" name="day_dummy" onclick="make_day(['Sunday'])"/>日曜日
    <input type="radio" name="day_dummy" onclick="make_day(['Monday'])"/>月曜日
    <input type="radio" name="day_dummy" onclick="make_day(['Sunday','Monday'])"/>どちらも
    <input type="submit"/>
</form>

http://q.hatena.ne.jp/answer

id:tetlis

HTMLだけでは実現できないということ、了解しました。

ありがとうございます。


教えていただいたjavascript、シンプルなので是非試してみようと思います。

2008/04/09 09:35:17
id:tawazou No.2

tawazou回答回数33ベストアンサー獲得回数72008/04/03 16:26:26

ポイント35pt

質問文中の①では以下のようにCGIにリクエストパラメータが渡されます。

日曜日選択:day[]=Sunday
月曜日選択:day[]=Monday
両方選択 :day[]=Sunday&day[]=Monday

質問文中の②では以下のようにCGIにリクエストパラメータが渡されます。

日曜日選択:day=day[Sunday]
月曜日選択:day=day[Monday]
どちらも選択:day=day[Sunday,Monday]

※CGIは①の形式でリクエストパラメータを受け取っているため、②のリクエストパラメータを受け取るにCGIを変更する必要があります。


CGIを書き直さない前提となると、radioを使用して①のリクエストパラメータと同じ形式でCGIに渡るようにすればよいわけですが、これを実現するにはJavaScriptを使用して一工夫する必要があります。

以下はradio選択時にhiddenエレメントを追加する例です。

<script>
function changeRadio(val) {
	// Sundayエレメントを作成
	var sunday = document.createElement('input');
	sunday.type = "hidden";
	sunday.name = "day[]";
	sunday.value = "Sunday";
	// Mondayエレメントを作成
	var monday = document.createElement('input');
	monday.type = "hidden";
	monday.name = "day[]";
	monday.value = "Monday";
	// エレメントを削除
	var hid = document.getElementById("hid");
	while (hid.childNodes.length > 0) {
		hid.removeChild(hid.childNodes.item(0));
	}
	if (val == "1") {
		// Sundayエレメントを追加
		hid.appendChild(sunday);
	} else if (val == "2") {
		// Mondayエレメントを追加
		hid.appendChild(monday);
	} else if (val == "3") {
		// Sunday、Mondayエレメントを追加
		hid.appendChild(sunday);
		hid.appendChild(monday);
	}
}
</script>
<span id="hid"></span>
<input type="radio" value="1" name="dum_day" onclick="changeRadio(this.value);">日曜日
<input type="radio" value="2" name="dum_day" onclick="changeRadio(this.value);">月曜日
<input type="radio" value="3" name="dum_day" onclick="changeRadio(this.value);">どちらも

チェックボックスだと以下のようにするだけですので、radioに拘る理由がないようでしたらチェックボックスの方が良いように思います。

<input type="checkbox" value="Sunday" name="day[]">日曜日
<input type="checkbox" value="Monday" name="day[]">月曜日

URLはダミーです。

http://q.hatena.ne.jp/1207200713

id:tetlis

ありがとうございます。

私はjavascriptが良く分かっていないので「y-kawazさん」のコードと見比べて、

試してみようと思います。

2008/04/09 09:37:16

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません