1

そのdivにフォームフィールドが含まれている場合、httpリクエストペイロードに対するdivコンテナのinnerHTMLを変更するとどのような影響がありますか?

これはfirst.htmlです

<html>
<body>
        <script type="text/javascript">

        function changeDropdown(){
            document.getElementById('divId').innerHTML="";
            var options = "<select name='suffix' id='suffix'></select>";
            document.getElementById('divId').innerHTML=options;         

        }
    </script>
    <br><br>
    <p>testing http header issue</p>
    <a href="javascript:changeDropdown()">Change dropdown</a>
    <form name="test" action="second.html" method="post">
        <table align="center">
            <tr>
                <td>
                    <label for="name">Name</label>
                </td>
                <td>
                    <input type="text" name="name"/>
                </td>
            </tr>       
            <tr>
                <td>
                    <label for="suffix">Suffix</label>
                </td>
                <td>
                    <div id="divId">
                        <select name="suffix" id="suffix">
                            <option value="Mr" selected=selected>Mr</option>
                            <option value="Mrs" selected=selected>Mrs</option>
                            <option value="Ms" selected=selected>Ms</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="submit"</td>
            </tr>
        </table>
    </form>
</body>

2つのフィールドに値を入力し、[送信]をクリックすると、これがchromeのリクエストフィールドに表示された値になります。(ネットワーク->ヘッダー)

**Request Payload**
      name=Batman&suffix=Mr

ここでfirst.htmlをもう一度開きます。今回は「ドロップダウンの変更」リンクをクリックします。これにより、すべてのオプションが削除されます。次に、名前を入力して[送信]をクリックします。

これはChromeのヘッダーの値です

 **Request Payload**
      name=Batman

パラメータ「サフィックス」がhttp(?)パラメータリストから消えました。innerHTMLを使用して、完全なselect要素をフォームに明確に追加しました。しかし、何らかの理由で認識されていません。

興味深いことに、選択フィールドに空のオプションを追加すると、それが選択されます。つまり、javascript関数をに変更します

 document.getElementById('divId').innerHTML="";
 var options = "<select name='suffix' id='suffix'><option value=''></option></select>";
 document.getElementById('divId').innerHTML=options;

これが発生する理由と、上記のダミーオプションを追加せずにこの問題を修正するために何ができるかを誰かが知っている場合は、共有してください。ありがとう!

4

1 に答える 1

0

これは完全に事実と関係があると思います。再追加する<select>と、可能なオプションなしで追加します。したがって、chromeは変数を省略しています(設定できないため)。

<option>これは、ブランクが再び必要な結果を生成するという事実によって確認されます。

于 2012-06-11T21:57:59.710 に答える