QA@IT

動的にHTMLを変更させているが、ラジオボタンが複数あると動かなくなる。

10390 PV

JavaScriptで条件によって動的に入力項目を作成しています。

以下ソースのように プラン_JPとプラン_USをラジオボタンで選択することで
入力項目が変わるようにしていますが、
同じくラジオボタンでプランJPとプランUSの値と連動し、
Aの条件で抽出、Mの条件で抽出でまったく動かず途方にくれています。

Formタグが入れ子になっていると動かないようなのですが、
どのようなテクニックが必要なのかわからず詰んでいます。。

ソースは以下になります。汚いですが。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
  <script type="text/javascript" language="javascript">
  // 起動時の設定
    function Startup() {
        target = document.getElementById("output");
        target.innerHTML = '<textarea name="TargetArea1" style="font-size:small;height:100px; width: 377px" placeholder="入力1"></textarea>';
        target = document.getElementById("linkbtn");
        target.innerHTML = '';
    }

    //AとMの選択
    function onRadioButtonChange() {
        check1 = document.form1.Radio1.checked;
        check2 = document.form1.Radio2.checked;
        chk_poi = document.form2.req_type_point.checked;
        chk_rin = document.form2.req_type_rin.checked;

        if (check1 == true) {
            target = document.getElementById("linkbtn");
            target.innerHTML = '';
            target = document.getElementById("output");
            target.innerHTML = '<textarea name="TargetArea1" style="font-size:small;height:100px; width: 377px" placeholder="例)・・"></textarea>';
            //プラン_US
            if (chk_rin == true) {
                target = document.getElementById("output2");
                target.innerHTML = '<textarea name="TargetArea2" id="Target2" style="font-size:small;height:100px; width: 377px" placeholder="B選択時に指定可"></textarea>';
            }
        }
        //Mの条件で抽出を選択
        else if (check2 == true) {
            target = document.getElementById("linkbtn");
            target.innerHTML = '<button class="button4" type="button" onclick="window.open(&quot;http:www.yahoo.co.jp&quot;,&quot;mywindow6&quot;, &quot;width=1020, height=580, menubar=no, toolbar=no, scrollbars=yes&quot;); return false;">サブ画面表示</button>'
            target = document.getElementById("output");
            target.innerHTML = '<input name="file_1" type="file" >';
            //プラン_US
            if (chk_rin == true) {
                target = document.getElementById("output2");
                target.innerHTML = '<input name="file_2" id="Target2" type="file" >';
            }
        }
    }

    //プランJPを選択した場合
    function sel_point() {
        check1 = document.form1.Radio1.checked;
        check2 = document.form1.Radio2.checked;
        //Aで抽出の場合
        if (check1 == true) {
            target = document.getElementById("linkbtn");
            target.innerHTML = '';
            target = document.getElementById("output");
            target.innerHTML = '<textarea name="TargetArea1" style="font-size:small;height:100px; width: 377px" placeholder="例)・・・"></textarea>';
        }
        //Mで抽出の場合
        else if (check2 == true) {
            target = document.getElementById("linkbtn");
            target.innerHTML = '<button class="button4" type="button" onclick="window.open(&quot;http://www.yahoo.co.jp&quot;,&quot;mywindow6&quot;, &quot;width=1020, height=580, menubar=no, toolbar=no, scrollbars=yes&quot;); return false;">サブ画面表示</button>'
            target = document.getElementById("output");
            target.innerHTML = '<input name="file_1" type="file" >';
        }
        target = document.getElementById("output2");
        target.innerHTML = '';
    }

    //プラン_USを選択した場合
    function sel_rin() {
        check1 = document.form1.Radio1.checked;
        check2 = document.form1.Radio2.checked;

        //市区町村で抽出の場合
        if (check1 == true) {
            target = document.getElementById("linkbtn");
            target.innerHTML = '';
            target = document.getElementById("output");
            target.innerHTML = '<textarea name="TargetArea1" style="font-size:small;height:100px; width: 377px" placeholder="例)・・・・"></textarea>';
            target = document.getElementById("output2");
            target.innerHTML = '<textarea name="TargetArea2" id="Target2" style="font-size:small;height:100px; width: 377px" placeholder="プラン_US選択時に指定可"></textarea>';
        }
        //Mの条件で抽出の場合
        else if (check2 == true) {
            target = document.getElementById("linkbtn");
            target.innerHTML = '<button class="button4" type="button" onclick="window.open(&quot;http://www.yahoo.co.jp&quot;,&quot;mywindow6&quot;, &quot;width=1020, height=580, menubar=no, toolbar=no, scrollbars=yes&quot;); return false;">サブ画面表示</button>'
            target = document.getElementById("output");
            target.innerHTML = '<input name="file_1" type="file" >';
            target = document.getElementById("output2");
            target.innerHTML = '<input name="file_2" id="Target2" type="file" >';
        }
    }
  </script>
</head>

<body onload="Startup();">
<form action="./cgi-bin/sendform.py" method="POST" enctype="multipart/form-data">
<table class="header">
    <tbody>
        <tr>
            <td><Div Align="right"><span class="fontbold">メールアドレス</span></Div></td>
            <td><input name="EMail" style="font-size:small;height:19px; width: 300px" placeholder="例) aaa@aaa.co.jp"/></td>
        </tr>
        <tr>
            <td><Div Align="right"><span class="fontbold">件名</span></Div></td>
            <td><input name="Title" style="font-size:small;height:19px; width: 400px" placeholder="件名"/></td>
        </tr>
    </tbody>
</table>

<table class="select">
    <tbody>
        <tr>
            <th>担当部署</th>
            <td>            
                <input name="provide_com" style="font-size:small;height:19px; width: 377px" placeholder="提供先名" />
            </td>
        </tr>
        <tr>
            <th>選択してください</th>
            <td>
                <form name="form2" action="" id="f1">
                <input class="radio" type="radio" name="req_type" id="req_type_point" value="POINT" checked onchange="sel_point()"/><label for="req_type_point">プラン_JP</label>
                <input class="radio" type="radio" name="req_type" id="req_type_rin" value="RIN" onchange="sel_rin()"/><label for="req_type_rin">プラン_US</label>                
                </form>
            </td>
        </tr>
    </tbody>
</table>

<table class="select2">
    <tbody>
    <tr>
    <td>
        <table class="subselect">
            <tbody>
                <tr>
                    <th rowspan=2>抽出対象</th>
                    <td style="border-style: none;">
                          <form name="form1" action="">             
                            <input id="Radio1" name="picup" type="radio" value="A" checked onchange="onRadioButtonChange();" />
                              <label for="Radio1">Aの条件で抽出</label>
                            <input id="Radio2" name="picup" type="radio" value="M" onchange="onRadioButtonChange();" />
                              <label for="Radio2">Mの条件で抽出</label><br />
                          </form>
                    </td>
                </tr>
                <tr>
                    <td style="border-style: none;"><div id="linkbtn"></div></td>
                </tr>
                <tr>
                    <th>入力1(必須)</th>
                    <td style="border-style: none;"><div id="output"></div></td>
                </tr>
                <tr>
                    <th>入力2<br>「プラン_US」のみ</th>
                    <td style="border-style: none;"><div id="output2"></div></td>
                </tr>
            </tbody>
        </table>
    </tr>
    </td>
</tbody>

<table>
        <center>
            <br>
            <button class="button5" type="submit">データ送信</button>
            <br>
            <br>
            <br>
            <br>                                    
        </center>
</table>
</form>
</body>
</html>


回答

jqueryを読み込んでいるので、ソースの22行目を以下の通り書き換えたらいかがでしょうか。

    //chk_poi = document.form2.req_type_point.checked;
    chk_poi = $("#Radio1").val();
    //chk_rin = document.form2.req_type_rin.checked;
    chk_rin = $("Radio2").val();
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。