3

我有一个非常简单的 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;
}

它不起作用。我也不确定这是否是解决问题的最佳方法。

有任何想法吗？

4

2 回答 2

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;
}
于 2010-08-30T01:54:02.393 回答
0

我会将需要克隆的表单部分包装在<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 和名称，因此一旦发布表单，它们的值就不会被最后一组覆盖。

此外，如果您还想添加删除集合的选项（可能会错误地添加太多，或任何其他原因），将它们包装在<fieldset>具有唯一 ID 的 a 中将有助于访问它并对其进行.remove()操作.

希望这可以帮助。

于 2010-08-30T02:12:40.300 回答