現在 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">どちらも
No.1
1422
226
35pt
「CGI側は変えることが出来ない事情があるが、フォーム側だけを弄ってラジオボタンのその３択にしたい」ということですね。
だとするとマルチセレクトは複数の同名パラメータを送信する必要がある為、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>
No.1
1422226
ここでベストアンサー
35pt
「CGI側は変えることが出来ない事情があるが、フォーム側だけを弄ってラジオボタンのその３択にしたい」ということですね。
だとするとマルチセレクトは複数の同名パラメータを送信する必要がある為、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>
HTMLだけでは実現できないということ、了解しました。
ありがとうございます。
教えていただいたjavascript、シンプルなので是非試してみようと思います。
No.2
337
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エレメントを追加する例です。
185
171
<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はダミーです。
ありがとうございます。
私はjavascriptが良く分かっていないので「y-kawazさん」のコードと見比べて、
試してみようと思います。
1
1
2
2
1
1
5
HTMLだけでは実現できないということ、了解しました。
ありがとうございます。
教えていただいたjavascript、シンプルなので是非試してみようと思います。