ラジオとセレクトメニューが親子の送信フォーム

質問

前回の質問でラジオとプルダウンが親子になってるモノが複数項目あるフォームを作ることができたのですが、
それぞれが、formでくくってあり、送信がうまくいきません。どうすればいいでしょうか？なにかいい方法がありましたら教えて下さい。

前回の質問
http://okwave.jp/qa/q6912949.html

<m(__)m>どうか宜しくお願い致します。

回答No.4

Chaire

<script type="text/javascript">

function handleRadioGroup (e) {
　var t = e.target || e.srcElement, c = e.currentTarget || this;
　var d, fgroup, f, rgroup, r, s;
　var i, j;

　switch (e.type) {

　case 'focus':
　case 'focusin':
　　d = t.ownerDocument;
　　if (t.nodeType === 1 && t.tagName === 'INPUT' && t.type === 'radio')
　　　if ((f = t.form) && (s = t.name))
　　　　for (rgroup = f.elements[s], i = 0; r = rgroup[i++]; ) {
　　　　　r.checked = (r === t);
　　　　　if ((s = r.getAttribute('aria-controls')))
　　　　　　if ((s = d.getElementById(s)))
　　　　　　　if (! (s.disabled = !r.checked)) s.focus();
　　　　}
　　return;

　case 'mousedown' :
　　if (t.nodeType === 1) {
　　　if (t.tagName === 'LABEL')
　　　　if (! (t = t.getElementsByTagName('INPUT')[0]))
　　　　　return;
　　　if (t.tagName === 'INPUT' && t.type === 'radio')
　　　　t.focus (), e.preventDefault();
　　}
　　return;

　case 'load':
　　for (fgroup = c.document.forms, i = fgroup.length; i > 0; )
　　　for (rgroup = fgroup[i -= 1].elements, j = rgroup.length; j > 0; ) {
　　　　r = rgroup[j -= 1];
　　　　if (r.nodeType === 1 && r.tagName === 'INPUT' && r.type === 'radio')
　　　　　if (r.checked) r.focus();
　　　}
　}
}

try {
　document.addEventListener('focus', handleRadioGroup, true);
　document.addEventListener('mousedown', handleRadioGroup, true);
　window.addEventListener('load', handleRadioGroup, false);
}
catch (err) {
　document.attachEvent('onfocusin', handleRadioGroup);
　document.attachEvent('mousedown', handleRadioGroup);
　window.attachEvent('onload', handleRadioGroup);
}
</script>

<form action="#">
　<fieldset>
　　<legend>用紙の種類</legend>
　　<label>
　　　<input type="radio" name="r1" value="1" tabindex="0" aria-controls="design1">
　　　<select name="design[1]" id="design1">
　　　　<option value="A">デザインＡ</option>
　　　　<option value="B">デザインＢ</option>
　　　　<option value="C">デザインＣ</option>
　　　</select>
　　</label>
　　<label><input type="radio" name="r1" value="2" tabindex="0" checked>選択しない</label>
　　<label><input type="radio" name="r1" value="3" tabindex="0" aria-controls="other1">その他</label>
　　<input type="text" name="other[1]" id="other1" value="">
　</fieldset>

　<fieldset>
　　<legend>色数</legend>
　　<label>
　　　<input type="radio" name="r2" value="1" tabindex="0" aria-controls="design2">
　　　<select name="design[2]" id="design2">
　　　　<option value="A">デザインＡ</option>
　　　　<option value="B">デザインＢ</option>
　　　　<option value="C">デザインＣ</option>
　　　</select>
　　</label>
　　<label><input type="radio" name="r2" value="2" tabindex="0" checked>選択しない</label>
　　<label><input type="radio" name="r2" value="3" tabindex="0" aria-controls="other2">その他</label>
　　<input type="text" name="other[2]" id="other2" value="">
　</fieldset>

　<fieldset>
　　<legend>その他</legend>
　　<label>
　　　<input type="radio" name="r3" value="1" tabindex="0" aria-controls="design3">
　　　<select name="design[3]" id="design3">
　　　　<option value="A">デザインＡ</option>
　　　　<option value="B">デザインＢ</option>
　　　　<option value="C">デザインＣ</option>
　　　</select>
　　</label>
　　<label><input type="radio" name="r3" value="2" tabindex="0" checked>選択しない</label>
　　<label><input type="radio" name="r3" value="3" tabindex="0" aria-controls="other3">その他</label>
　　<input type="text" name="other[3]" id="other3" value="">
　</fieldset>
</form>

補足

Chaireさん、お忙しい中、ご親切に回答有難うございます。

土日のうちにChaireさんに教えて頂いたコードで試してみますね！
必ず土日のうちに結果報告としてご連絡差し上げます。

当方、はじめてフォーム作成に取り掛かっているもので色々とご迷惑おかけしまして申し訳ない限りです。。皆様のアドバイス本当に感謝しております。。

明日あたりにまたご質問させて頂くことがありましたら宜しくお願い致します。
失礼します。

回答No.3

yambejp

ちなみに、条件が特定のclass(今回でいうとnodisbledクラス)の中にある
input要素をdisabledしなければよければこんな感じ

<style>
table{border-collapse:collapse;}
td{ border:solid 1px #000000;}
td:first-child{background-Color:aqua;}
</style>
<script type="text/javascript">
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //NOT IE
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="radio"){
setDisabled(t);
}
}

window.onload=function(){
setDisabled(null);
}
function setDisabled(t){
var e=(t==null)?document.getElementsByTagName("*"):t.parentNode.parentNode.getElementsByTagName("*");
for(var i=0;i<e.length;i++){
var n=e[i].nodeName;
if((n=="INPUT" && e[i].type!="submit" && e[i].type!="radio") || n=="SELECT" || n=="TEXTAREA" || n=="BUTTON" ){
e[i].disabled = (t==null || t.parentNode!=e[i].parentNode ) && !e[i].parentNode.className.match(/(^|\s)nodisabled(\s|$)/);
}
}
}

</script>
<form>
<table>
<tbody>
<tr><td>用紙の種類</td>
<td>
<div>
<div><input type="radio" name="r1" value="1">
<select name="design[1]">
<option value="A">デザインＡ</option>
<option value="B">デザインＢ</option>
<option value="C">デザインＣ</option>
</select>
</div>
<div><input type="radio" name="r1" value="2" checked>選択しない</div>
<div><input type="radio" name="r1" value="3">その他
<input type="text" name="other[1]" value=""></div>
</div>
</td></tr>
<tr>
<td>色数</td>
<td>
<div>
<div><input type="radio" name="r2" value="1">
<select name="design[2]">
<option value="A">デザインＡ</option>
<option value="B">デザインＢ</option>
<option value="C">デザインＣ</option>
</select></div>
<div><input type="radio" name="r2" value="2" checked>選択しない</div>
<div><input type="radio" name="r2" value="3">その他
<input type="text" name="other[2]" value="">
</div>
</div>
</td>
</tr>
<tr><td>その他</td>
<td>
<div>
<div><input type="radio" name="r3" value="1">
<select name="design[3]">
<option value="A">デザインＡ</option>
<option value="B">デザインＢ</option>
<option value="C">デザインＣ</option>
</select></div>
<div><input type="radio" name="r3" value="2" checked>選択しない</div>
<div><input type="radio" name="r3" value="3">その他
<input type="text" name="other[3]" value="">
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="nodisabled">
<input type="text" name="hoge1" value="">
<input type="text" name="hoge2" value="">
<input type="text" name="hoge3" value="">
<input type="submit" value="go">
</div>
</form>

補足

yambejpさん、お忙しい中、何度もご教授して頂き有難うございます。

yambejpさんのご回答を参考に、土日に挑戦してみます。
必ず結果のご連絡させて頂きます、本当に何度も質問しまして申し訳ない限りです。。

皆様プロのご意見、本当に感謝しております。
また素人ながらに質問させて頂くことが御座いましたらご教授のほど宜しくお願いいたします。

それでは今週土日にまたご連絡差し上げます。
本当に色々とありがとうございます。。

回答No.2

yambejp

何か書くたびに仕様を変更されると非常にやりにくい・・・
こういうものはある程度仕様を固めてから作りこんでいくものです。

で、今回の仕様ですが
ラジオボタンで解放されるテキストボックスがあって、
そのほかに一般的なテキストボックスがあるのですか？
そのテキストボックスは同じフォーム内にあるのですか？
同じフォーム内にあったらなにを基準に解放されているとか使用不可を
調整するのですか？

とりあえずこれ以上仕様の追加はないですか？
（あれこれやってるとつぎはぎだらけで最悪のコードになる可能性があるので）

回答No.1

yambejp

こうしてみるとよいでしょう。

<style>
table{border-collapse:collapse;}
td{ border:solid 1px #000000;}
td:first-child{background-Color:aqua;}
</style>
<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //NOT IE
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="radio"){
setDisabled(t);
}
}

window.onload=function(){
setDisabled(null);
}
function setDisabled(t){
var e=(t==null)?document.getElementsByTagName("*"):t.parentNode.parentNode.getElementsByTagName("*");
for(var i=0;i<e.length;i++){
var n=e[i].nodeName;
if((n=="INPUT" && e[i].type!="submit" && e[i].type!="radio") || n=="SELECT" || n=="TEXTAREA" || n=="BUTTON" ){
e[i].disabled = (t==null || t.parentNode!=e[i].parentNode );
}
}
}

</script>
<form>
<table>
<tbody>
<tr><td>用紙の種類</td>
<td>
<div>
<div><input type="radio" name="r1" value="1">
<select name="design[1]">
<option value="A">デザインＡ</option>
<option value="B">デザインＢ</option>
<option value="C">デザインＣ</option>
</select>
</div>
<div><input type="radio" name="r1" value="2" checked>選択しない</div>
<div><input type="radio" name="r1" value="3">その他
<input type="text" name="other[1]" value=""></div>
</div>
</td></tr>
<tr>
<td>色数</td>
<td>
<div>
<div><input type="radio" name="r2" value="1">
<select name="design[2]">
<option value="A">デザインＡ</option>
<option value="B">デザインＢ</option>
<option value="C">デザインＣ</option>
</select></div>
<div><input type="radio" name="r2" value="2" checked>選択しない</div>
<div><input type="radio" name="r2" value="3">その他
<input type="text" name="other[2]" value="">
</div>
</div>
</td>
</tr>
<tr><td>その他</td>
<td>
<div>
<div><input type="radio" name="r3" value="1">
<select name="design[3]">
<option value="A">デザインＡ</option>
<option value="B">デザインＢ</option>
<option value="C">デザインＣ</option>
</select></div>
<div><input type="radio" name="r3" value="2" checked>選択しない</div>
<div><input type="radio" name="r3" value="3">その他
<input type="text" name="other[3]" value="">
</div>
</div>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="go">
</form>

お礼

yambejp様

早々のご回答ありがとうございます。試してみた所ばっちり出来ました。ありがとうございます。

このフォームの中にただのテキストボックスを入れてみると、それも入力できないようになってしまうのですが、どうしたらいいでしょうか？？

度々申し訳ありません。お時間ありましたらよろしくお願いします。