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

Answer 2

我会将需要克隆的表单部分包装在<fieldset>：

中

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

然后是jQuery脚本：

$("#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();
});

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

此外，如果你想添加删除集合的选项（可能会错误添加太多，或者其他任何原因），将它们包含在具有唯一ID的<fieldset>中会有所帮助在访问它并对其进行.remove()时。

希望这有帮助。

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

2 个答案: