jQueryフォーム入力を含むHTMLページ全体を取得する - 保存するためにPHPに送る

Question

私は、ajaxを使用して、ユーザーからの入力に埋め込まれたフォームデータでHTMLページ全体を複製しようとしています。 、入力値が含まれています。私はこのデータを複製することはできますが、送信することはできません。これどうやってするの？ .html（）を追加してhtmlを送信することはできますが、htmlでデータを送信することはできません。私がそれを複製すれば、フォームのデータが得られます...しかし、私はそれを送ることはできません。

$(document).ready(function() 
    { 

$('.ClickMe').click(function(event) 
{ 
event.preventDefault(); 
var TheClone = $('.TheBody').clone(); 
console.log("Cloned"); 
//$('.TheBody').append(TheClone); 

$.ajax({ 
type: 'POST', 
url: "SaveForm.php", 
data: { 
    MyData: TheClone 
}, 
success: function (data) { 
    // 
}, 
error: function (req, status, error) {} 
}); 

がここで働く、救うために私のPHPですが、データはjQueryのそこから取得されていません。私は、このイメージにjQueryのからエラーを取得しています。

<?php 
$Data = $_POST['MyData']; 
file_put_contents('SavedForms/saved.php', $Data); 

?> 

Answer 1

あなたが最初にそのオブジェクトからHTMLを抽出する必要があり、サーバーに文字列として（HTML）をjQueryオブジェクトを送信する場合：

var TheClone = $('.TheBody').clone().html(); 

第二（既にコメントとして）、PHP内部ます$_POST['MyData'];を使用する必要があります（キーは定数ではなく、文字列MyDataである必要があります）。決議

Answer 2

ISSUE：

私はそれは難しいが、その後、AJAX経由でHTMLを送信するDOMの変更のHTMLにユーザー入力を符号化することによって動作するようになりました。私はこのアイデアが他人を助けることを期待して共有しています。私はhtmlページをうまくクローンすることができましたが、私はこのクローンをAjax経由でデータと共に送ることができませんでした。私は上記のDekelのようにhtmlを保存することができましたが、これにはデータがありませんでした。

回避策として、ユーザーがjQueryを使用して変更したときにデータをhtmlに保存しました。私は入力とチェックボックスの両方を使用しました。私はすべてのチェックボックスにMyCheckのクラスを与え、すべてのテキストはMyInputのクラスを入力しました。ここに私が使用したコードがあります。

$('.MyInput').on("change paste keyup", function() 
    { 
    var MyVal = $(this).val(); 
    $(this).attr('value', MyVal); 
    }); 

    $('.MyCheck').on("change paste keyup", function() 
    { 
    if($(this).attr("checked")) 
    $(this).removeAttr("checked"); 
    else 
    $(this).attr('checked', 'checked'); 

    }); 


    $('.ClickMe').click(function(event) 
    { 
    event.preventDefault(); 

    var TheClone = $(".TheBody").html(); 

    $.ajax({ 
    type: 'POST', 
    url: "SaveEnrollment.php", 
    data: { 
     MyData: TheClone 
    }, 
    success: function (data) { 
     window.location = "/thank-you"; 
    }, 
    error: function (req, status, error) {} 
});