javascript - jQuery .clone() 整个 HTML 表单及其所有值

Question

我正在使用 jQuery 和 $.ajax()调用通过 POST 将一些复杂的 HTML 发布到我的数据库。我可以通过 .html() 获取表单的结构，但用户的选择在此过程中丢失。我想我可以使用 .clone()相反，但我得到了这个错误:

Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

// Cloning my form
var myFormHTML = $("#myForm").clone();

console.log(myFormHTML);

var inputData = {
  advancedSearchHTML: myFormHTML,
  otherParam: otherVar
};

console.log(inputData);

// JS ERROR is down here in the $.ajax() call:
$.ajax({
    type: "POST",
    url: 'serverSideScript.php',
    dataType: 'html',
    data: inputData,
    success: function (response) {
        console.log(response);
    }
});

这些表格非常复杂，包括 100 多个 <input type="hidden">是根据用户的选择而变化的。我无法改变它的工作方式。所以我的问题是，我有复杂的表单，其中包含用户生成的 HTML，我需要复制 HTML 及其所有值，以便可以将其插入到我的数据库中，并最终重新加载回 DOM(可能是几个月后)。有什么想法吗？

编辑:我已经尝试了我能想到的所有方法，但我似乎无法从 HTML 中获取用户输入值，这很令人沮丧，因为我习惯于只点击“复制” Chrome 的检查器中的“HTML”，所以对我来说，应该很容易从 <form> 中获取相同的 HTML作为字符串。我尝试过的一些事情:

$myFormHTML.html()
$myFormHTML.innerHTML
$myFormHTML.outerHTML
$myFormHTML.get(0).innerHTML
$myFormHTML.get(0).outerHTML
JSON.stringify($myFormHTML.html())

我已经得到了一个完整的 jQuery 对象，当附加到 DOM 时，它包含所有用户的输入(:选定状态、:检查状态、输入值等) 。我需要获取这个 jQuery 对象并将其所有 HTML 内容吐出到一个可以传输到服务器的字符串中。有人知道该怎么做吗？也许有一种方法可以完成与 $.append() 期间完成的相同循环。所以我可以从头开始构建一个字符串？还有其他想法吗？

Answer 1

http://api.jquery.com/serialize/

这正是您想要的，除了因为您的表单是由用户输入构建的，您无法验证它是否是有效的表单。如果表单标记不正确，则无法序列化数据。

示例如下:

http://jsfiddle.net/jyc30nxz/1/

$('#myForm').serialize();

其中一个重要方面是，如果您的表单输入没有“name”属性，那么您无法在序列化期间返回它的值，这就是为什么您最终会得到一个空字符串。

编辑:

这也有效:

console.log($(this).clone().html())

我的猜测是您的表单标记无效