jQueryをハックして、<input>と<select>の要素がフォーム内にないものをシリアル化する

Question

この回答はstackoverflowや他の場所で多くの投稿を見てきましたが、私のアプリケーションの境界。

私は、既存のプラグイン（http://johnny.github.com/jquery-sortable/）をビルドして、小学生用のドラッグ＆ドロップのHTMLエディタを作成しています。このプラグインは、jQueryを使用して出力をHTMLソースコードに似た形式にシリアル化します。その結果、Webページのプレビューウィンドウが自動的に更新されます。 Contenteditableスパンは、ユーザーが誤ってHTMLタグ自体を編集することなく値を入力できるようにするうえでうまく機能します。

ただし、シリアル化された出力に含めるinput要素またはselect要素の値を取得できません。 serializeするためのjQuery APIを見た後、それは< input>要素がフォーム内にあり、name属性も持っている必要があることを示しているようです。これは私のプロジェクトの本質と連動するものではないので、私はハック/回避策を模索しています。

入力と選択要素の値がシリアル化された出力に含まれていることを誰かが知っているなら、私はそれを高く評価します！

編集：ここに私がそれを得ることができる最もデモ可能な状態へのリンクがあります：http://tinker.io/5bdab/5。 私のコード（jsbin、tinkerbin、jsfiddle）を置くためにいくつかの場所を試した後、彼らはすべて、iframeを表示する問題を抱えているようですね？だから、途中の列に要素をドラッグ＆ドロップすると最終的にライブHTMLページのプレビューがその横に変更されるという素晴らしい事実を見ることはできません...しかし、以下の生成されたソースコードの結果が（入力と選択要素をシリアライズしてその値がテキストエリアに表示されるようにする方法を理解するために必要な部分）がシリアル化されて変更されました。

しかし、ファイル全体は、外部のjsファイルにリンクし、内部スタイルを定義しているので、標準的な方法ではなく、このような場合に便利です。あなたのコンピュータにhtmlファイルを保存してチェックアウトするだけで済みます。私は、サポートされているのiframeでライブデモを表示するためのより良いオプションを認識していないです：/

Answer 1

がdiv

<div id="wrapper"> 
    <input type="text" value="text text" name="text"> <br> 
    <select name="single"> 
     <option>Single</option> 
     <option>Single2</option> 
    </select> 
    <textarea name="textarea">textarea text</textarea> 
</div> 

の内側にあなたのすべての内容をラップしてみてから、このdiv

内のすべての要素をシリアル化

$("#wrapper").find("select,textarea, input").serialize(); 

Demo