jquery - jQuery: html() 関数はフォーム内の古いデータを取得します

Question

jQuery を使用して HTML ページのデータを読み取っています。そのページには、ユーザーが値を入力するためのタグ<form>を含む要素があります。初期化されると、このフォームにはこれらの要素 のデフォルト値がいくつかあります。このフォームを送信すると、メソッドを使用してこのページの現在の状態の HTML 文字列を取得しますが、この結果文字列に新しい値ではなく古い値 (デフォルトの入力値) が含まれている理由がわかりません。を呼び出す前に 、ユーザーが入力した値をこれらの要素に更新または永続化する方法はありますか? jQueryメソッドを使用して最新の値を含む文字列を取得するにはどうすればよいですか? どうもありがとう！<input>
<input>html()
<input>html()

Answer 1

ただし、何をしようとしているのかは奇妙ですが、必要なのはフォーム要素のvalue属性を更新することだけです。これは、次のコードで実行できます（フォームsubmitハンドラーに配置します）。

$("form input").attr("value", function() {
    return this.value;
});

デモ：http： //jsfiddle.net/BXha6/

Answer 2

デフォルトでは、jQueryhtml()関数は現在の値/選択を使用するのではなく、defaultValueおよびプロパティを保持します (JavaScript と同様)。これを回避するには、最初に jQuery を使用する必要があります。 prop() のドキュメントを読んでください。defaultCheckedinnerHTMLprop()

たとえば、次のコードがあるとします。

<form action='/'>
   <input type='radio' value='1' checked name='first' />
   <input type='radio' value='2' name='first' />

   <input type='checkbox' value='yes' />

   <input type='text' value='Start Text' name='second' />
</form>

それから

   $('form').html()

追加/選択/変更した値に関係なく、常に正確なコードを出力します。

これを解決するには、要素の値をプロパティに変換する関数を実行するだけです:

$("form input[type='radio']").each(function(){
   if (this.checked){
      $(this).prop("defaultChecked",true);
   } else {
      $(this).prop("defaultChecked",false);
   }
});
$("form input[type='checkbox']").each(function(){
   if (this.checked){
      $(this).prop("defaultChecked",true);
   } else {
      $(this).prop("defaultChecked",false);
   }
});
$("form input[type='text']").each(function(){
   $(this).prop("defaultValue",$(this).val());
});

alert( $(form).html() ); //or var the_code = $(form).html();

現在のページの状態が HTML を表示しているため、HTML が表示されます。

Answer 3

その要素タイプを実行する方法を探していた場合、textarea ビットは少し異なります。

 $("textarea").html( function() {
    return this.value;
});

http://jsfiddle.net/BXha6/7/