doubi8512 2016-07-21 20:27 采纳率: 0%
浏览 53

修复jQuery插件以处理具有唯一ID的重复嵌套字段

I have a quick question for you guys here. I was handed a set of lead generation pages and asked to get them up and running. The forms are great, expect for one small issue... they use the jQuery below to allow users to submit multiple instances of a data set by clicking an "Add another item" button. The problem is that the duplicated items are duplicated EXACTLY. Same name, id, etc. Obviously, this doesn't work when attempting to process the data via PHP, as only the first set is used.

I'm still learning jQuery, so I was hoping that someone could point me in the right direction for how to modify the plugin below to assign each duplicated field an incremental integer on the end of the ID and name assigned. So, the fields in each dataset are Role, Description, Age. Each additional dataset will use the ID & name syntax of fieldname#, where # represents numbers increasing by 1.

Thanks in advance for any advice!

/** https://github.com/ReallyGood/jQuery.duplicate */
$.duplicate = function(){
  var body = $('body');
  body.off('duplicate');
  var templates = {};
  var settings = {};
  var init = function(){
    $('[data-duplicate]').each(function(){
      var name = $(this).data('duplicate');
      var template = $('<div>').html( $(this).clone(true) ).html();
      var options = {};
      var min = +$(this).data('duplicate-min');
      options.minimum = isNaN(min) ? 1 : min;
      options.maximum = +$(this).data('duplicate-max') || Infinity;
      options.parent = $(this).parent();

      settings[name] = options;
      templates[name] = template;
    });
    
    body.on('click.duplicate', '[data-duplicate-add]', add);
    body.on('click.duplicate', '[data-duplicate-remove]', remove);
  };
  
  function add(){
    var targetName = $(this).data('duplicate-add');
    var selector = $('[data-duplicate=' + targetName + ']');
    var target = $(selector).last();
    if(!target.length) target = $(settings[targetName].parent);
    var newElement = $(templates[targetName]).clone(true);
    
    if($(selector).length >= settings[targetName].maximum) {
      $(this).trigger('duplicate.error');
      return;
    }
    target.after(newElement);
    $(this).trigger('duplicate.add');
  }
  
  function remove(){
    var targetName = $(this).data('duplicate-remove');
    var selector = '[data-duplicate=' + targetName + ']';
    var target = $(this).closest(selector);
    if(!target.length) target = $(this).siblings(selector).eq(0);
    if(!target.length) target = $(selector).last();
    
    if($(selector).length <= settings[targetName].minimum) {
      $(this).trigger('duplicate.error');
      return;
    }
    target.remove();
    $(this).trigger('duplicate.remove');
  }
  
  $(init);
};

$.duplicate();

</div>
  • 写回答

1条回答

  • dousi8931 2016-07-21 21:16
    关注

    Add [] to the end of the NAME attribute of the input field so for example:

    <input type ="text" name="name[]"

    This way your $POST['name'] will hold an array of strings. For that element. It will be an array with keys that are numbers from 0 to however many items it holds.

    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)