Javascript 尝试使用jQuery清除表单输入，以便将其添加回表单中

我有一个非常简单的HTML表单，用户可以在其中输入关于一个人的信息。表格下方是一个按钮，允许他们“添加更多”。单击时，将复制“person”表单并将其附加到页面

我使用的方法是获取HTML文件，复制出相关部分（“添加更多”的部分），然后将其保存到Javascript中的变量中。当我必须对表单进行更改时，这变得相当烦人，因为我必须对Javascript变量进行相同的更改

我的新方法是在Javascript中动态创建变量。当页面加载时，我使用jQuery提取代码的“添加更多”部分，并将HTML缓存到变量中。然后单击“添加更多”按钮时，我会将缓存的HTML附加到页面中

问题在于表单输入。服务器端代码使用数据库中的用户数据自动填充表单。我想缓存没有表单输入的HTML数据

我当前的函数如下所示：

function getHTML($obj, clean)
{
    if (clean)
    {
        var $html = $obj.clone();

        $html.find('input').each(function() { $(this)[0].value = ''; });
    }
    else
    {
        var $html = $obj;
    }

    var html = $html.wrap('<div></div>').parent()[0].innerHTML;
    $html.unwrap();

    return html;
}

function getHTML($obj, clean) {
    var $clone = $obj.clone();
    if (clean) {
        $clone.find('input').each(function() { this.value = ''; });
    }
    return $clone.wrap('<div></div>').parent()[0].innerHTML;
}

函数getHTML（$obj，clean） { 如果（清洁） { var$html=$obj.clone（）； $html.find（'input'）。每个（函数（）{$（this）[0]。值=“”；}）； } 其他的 { var$html=$obj； } var html=$html.wrap（“”）.parent（）[0].innerHTML； $html.unwrap（）； 返回html； } 它不起作用。我也不确定这是否是解决问题的最佳方法

---

有什么想法吗？

我不知道为什么这样不行。我看不出函数是如何调用的，或者传递给它的是什么

我想我会做一件不同的事情，那就是创建一个

.clone（）

，无论您是否在“清理”输入。这样就不会对DOM中的元素进行包装和展开。只需使用

if（）

语句来决定是否清洁它

大概是这样的：

function getHTML($obj, clean)
{
    if (clean)
    {
        var $html = $obj.clone();

        $html.find('input').each(function() { $(this)[0].value = ''; });
    }
    else
    {
        var $html = $obj;
    }

    var html = $html.wrap('<div></div>').parent()[0].innerHTML;
    $html.unwrap();

    return html;
}

function getHTML($obj, clean) {
    var $clone = $obj.clone();
    if (clean) {
        $clone.find('input').each(function() { this.value = ''; });
    }
    return $clone.wrap('<div></div>').parent()[0].innerHTML;
}

现在，您已经返回了一个已清理的原始克隆，可以随时插入

---

编辑：

现在不明白为什么我们不能得到一个新的字符串

下面是一个返回DOM元素的函数。除此之外，我被难住了

function getHTML($obj, clean) {
    var $clone = $obj.clone();
    if (clean) {
        $clone.find('input').each(function() {
            this.value = '';
        });
    }
    return $clone.get();  // Return Array of DOM Elements
}

编辑：现在可以工作了

我放弃了大部分jQuery，使用了

.setAttribute（“value”，而不是
这个.value
）

试一试：

function getHTML($obj, clean) {
    var clone = $obj[0].cloneNode(true);
    var inputs = clone.getElementsByTagName('input');
    console.log(inputs);
    for(var i = 0, len = inputs.length; i < len; i++) {
        inputs[i].setAttribute('value','');
    }
    return $('<div></div>').append(clone)[0].innerHTML;
}

函数getHTML（$obj，clean）{
var clone=$obj[0]。cloneNode（true）；
var inputs=clone.getElementsByTagName（'input'）；
控制台日志（输入）；
对于（变量i=0，len=inputs.length；i

我将表单中需要克隆的部分包装在

中：

这不仅会克隆和清理输入字段集，还会设置新的ID和名称，以便表单发布后，它们的值不会被最后一组字段覆盖

此外，如果您还想添加删除集的选项（可能是由于错误或其他原因添加了太多集），将它们包装在具有唯一ID的

中将有助于访问它并对其执行

.remove（）

---

希望这能有所帮助。

不是解决方案，只是一个提示，这样做真的没有意义。

$（此）[0]。值

。在

.each（）

回调中，

this

已经引用了DOM元素，所以只需执行

this.value

。当您添加

[0]

时，您直接引用了刚才用jQuery包装的普通DOM元素。啊，这更干净了。谢谢你的提示。我尝试了你的第一个功能，但它没有清除输入-我不明白为什么。。。我使用

document.write（getHTML（$（'fieldset'），true））调用函数作为一个测试，并将其正确写入字段集。但它是在输入数据仍在其中的情况下这样做的：/如果我用
$（this.css（'border'，'1px solid red'）替换
this.value
，它会更改它-因此我知道输入受到影响。如果我在更改后附加一个
警报（this.value）
，它将显示为空。看起来innerHTML/.html（）方法返回的是实际的html，而不是当前的DOMHTML@stan-真奇怪。似乎和
.wrap（）
有关，但还不确定是什么。我的最后一个示例（没有
.wrap（）
）确实有效。我会继续修补看看发生了什么。我有一种感觉，
.parent（）
不知何故把我们带回了DOM而不是克隆。也许我们包装的
在成为DOM的一部分之前是不可遍历的。根据我的测试，似乎问题在于写回innerHTML。请参阅：-对DOM进行更改，但该数据不能作为字符串返回。这很烦人…@斯坦-是的，这让我有点发疯。我只是不明白为什么它又给了我们旧元素。无论如何，我将更新我的答案，它将返回DOM元素数组而不是字符串。很抱歉，我帮不上什么忙。我正试图想出一种增加输入名称的好方法，谢谢。
<form id="my_form">
    <fieldset id="clone_1">
        <input name="field_1_1">
        <input name="field_2_1">
        <input name="field_3_1">
    </fieldset>
</form>
<a href="#" id="fieldset_clone">Add one more</a>

$("#fieldset_clone").click(function(event) {
    // Get the number of current clones and set the new count ...
    var cloneCount = parseInt($("fieldset[id^=clone_]").size());
    var newCloneCount = cloneCount++;

    // ... then create new clone based on the first fieldset ...
    var newClone = $("#clone_1").clone();

    // .. and do the cleanup, make sure it has
    // unique IDs and name for server-side parsing
    newClone.attr('id', 'clone_' + newCloneCount);
    newClone.find("input[id^=clone_]").each(function() {
        $(this).val('').attr('name', ($(this).attr('name').substr(0,7)) + newCloneCount);
    });

    // .. and finally insert it after the last fieldset
    newClone.insertAfter("#clone_" + cloneCount);
    event.preventDefault();
});