人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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">どちらも

●質問者: tetlis
●カテゴリ:インターネット ウェブ制作
✍キーワード:CGI PHP SELECT XHTML コード
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● y-kawaz
●35ポイント ベストアンサー

「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

◎質問者からの返答

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

ありがとうございます。


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


2 ● tawazou
●35ポイント

質問文中の?では以下のように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

◎質問者からの返答

ありがとうございます。

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ