jQuerymobile ページに 2 つの入力テキスト フィールドを持つフォームを作成しました。しかし、このフォームの外側にあるボタンをクリックすると、div「ratingInfo」内のこのフォームにさらに2つの入力フィールドを動的に追加しています。
<form id="rate" method="GET" action="Ratings" data-ajax="false" onsubmit="return getRating();">
<label for="regid">Enter Registration ID : </label>
<input type="text" placeholder="regid" id="regid" name="regid" data-mini="true" data-ajax="false" style="width:240px;"/>
<fieldset style="margin-top:30px;" data-role="controlgroup" data-type="horizontal" >
<legend>Rate the session our of 5 :</legend>
<input type="radio" name="radio" id="rating1" value="1" checked="checked">
<label for="rating1">1</label>
<input type="radio" name="radio" id="rating2" value="2">
<label for="rating2">2</label>
<input type="radio" name="radio" id="rating3" value="3">
<label for="rating3">3</label>
<input type="radio" name="radio" id="rating4" value="4">
<label for="rating4">4</label>
<input type="radio" name="radio" id="rating5" value="5">
<label for="rating5">5</label>
</fieldset>
<div id="ratingInfo" style="margin-top:20px; margin-bottom:20px; color:rgb(177, 175, 175);"></div>
<button data-inline="true" data-rel="back" data-theme="c" type="reset" >Reset</button>
<button data-inline="true" data-transition="flow" type="submit" name="submit" id="submit" data-ajax="false" data-theme="b">Submit</button>
</form>
動的要素を追加するために getRating() メソッドで使用した jQuery は次のとおりです。
$( "#ratingInfo" ).empty();
$( "#ratingInfo" ).append( "<span >Session ID - </span><input type='text' style='width:240px; color:rgb(177, 175, 175);' name='eventId' id='eventId' disabled='true'>" );
$("#eventId").val(eventId);
$( "#ratingInfo" ).append( "<br/><span>Session Description - </span><input type='text' style='width:240px; color:rgb(177, 175, 175);' name='eventDesc' disabled='true' id='eventDesc'>" );
$("#eventDesc").val(eventDesc);
フォームを送信すると、(URL 内の) クエリ文字列には "regId" と "radio" の 2 つのパラメーターしかありません。残りの 2 つの入力フィールド「eventId」と「eventDesc」も URL に追加されません。ただし、リセット ボタンをクリックすると、動的に追加されたフィールドを含むすべてのフィールドもリセットされます。
この問題の原因は何ですか?