jjzjj

javascript - 克隆表单和增量 ID

coder 2024-07-27 原文

考虑以下形式:

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" id="file"/>
    <input type="hidden" id="hidden"/>
    <input type="image" id="image" />

    <input type="password" id="password" />
    <input type="radio" id="radio" />
    <input type="reset" id="reset" />
</form>

利用 Javascript(和 jQuery)，克隆整个表单并递增其中的每个单独 ID 以确保唯一性的最简单方法是什么。

使用 jQuery 我假设您最初会通过 clone() 克隆表单并遍历克隆的对象 id 并添加新的 id fieldname1、fieldname2 等。但是，我对 jQuery 的了解不是很多，这个项目几乎要了我的命。

任何帮助都会很棒!

最佳答案

你会 clone()它，并且在将克隆的元素附加到 DOM 之前，您将遍历并将数字添加到每个 id 属性。

(function() {
    var count = 0;

    window.duplicateForm = function()

        var source = $('form:first'),
            clone = source.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + count;
        });

        clone.appendTo('body');

        count++;
    };

})();

jsFiddle .

这个以 0 开始，但您可以轻松地以 1 开始 count。

你也可以使用 closure如果你想要，即

var cloneForm = function(form, start) {
   start = start || 0;

   return function() {
        var clone = form.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + start;
        });
        start++;

        return clone;
    };
};

然后你会做...

var cloneContactForm = cloneForm($('#contact-form'), 5);

// Now I want to clone it and put it somewhere.
$(cloneContactForm()).appendTo('body');

jsFiddle .

关于javascript - 克隆表单和增量 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5297876/

javascriptIDcode34clonejquery

有关javascript - 克隆表单和增量 ID的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  3. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

  4. ruby - Rails -- :id attribute? 所需的数据库索引 - 2

    因此，当我遵循MichaelHartl的RubyonRails教程时，我注意到在用户表中，我们为:email属性添加了一个唯一索引，以提高find的效率方法，因此它不会逐行搜索。到目前为止，我们一直在根据情况使用find_by_email和find_by_id进行搜索。然而，我们从未为:id属性设置索引。:id是否自动索引，因为它在默认情况下是唯一的并且本质上是顺序的？或者情况并非如此，我应该为:id搜索添加索引吗？ 最佳答案 大多数数据库(包括sqlite，这是RoR中的默认数据库)会自动索引主键，对于RailsMigration

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - Grit 的克隆方法未定义？ - 2

    我最近开始从事一个项目，该项目使用git进行存储并使用ruby​​作为前端。我的脚本的第一个版本使用了ruby​​-git，虽然非常简单，但还不错。当我需要对我的提交和日志做更具体的工作时，建议我转向砂砾。然而，我在早期遇到了障碍——grit似乎无法克隆远程存储库。我发现使用Repository类的所有示例都创建了一个本地存储库并搜索了我发现Grit的clone方法未定义的源代码。给了什么？这是我的第一个StackOverflow问题，在此先感谢您的帮助。 最佳答案 由于Git结构良好，Grit使用缺少的方法(Grit::Git#m

  7. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  8. ruby - capybara 无法通过 id 找到元素 - 2

    capybara找不到在我的cucumber测试中用它的id标记。当我save_and_open_page时，我能够看到该元素.但我无法通过has_css?找到它或find:pry(#)>page.html.scan(/notice_sent/).count=>1pry(#)>page.html.scan(/id=\"notice_sent\"/).count=>1pry(#)>page.find('#notice_sent')Capybara::ElementNotFound:Unabletofindcss"#notice_sent"from/Users/me/.gem/ruby/2

  9. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐