javascript - 尝试使用 jQuery 清除表单输入，以便我可以将其添加回表单

Question

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

我以前这样做的方法是获取我的 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;
}

这是行不通的。我也不确定这是否是解决问题的最佳方法。

有什么想法吗？

Answer 1

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

我想我会做的一件事是创建一个 .clone()，无论您是否正在“清理”输入。那么您就不会包装和展开 DOM 中的元素。只需使用 if() 语句来决定是否清理它。

像这样:

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;
}

或者更多的 jQuery 和更少的代码:

function getHTML($obj) {
    return $obj.clone().find('input').val('').end().wrap('<div/>').parent().html();
}

效率稍低，但如果它只在页面加载时运行一次，那么可能不是问题。

或者，如果它最终要变成一个 jQuery 对象，为什么不直接返回它呢？

function getHTML($obj) {
    return $obj.clone().find('input').val('').end();
}

现在您已经返回了原始文件的干净克隆，随时可以插入。

---

编辑:

现在无法弄清楚为什么我们无法获取新字符串。

这是一个将返回 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","") 而不是 this.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;
}