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