【问题标题】:Create repeating form section, remove field values创建重复表单部分,删除字段值
【发布时间】:2014-08-19 08:32:32
【问题描述】:

我有一个带有重复部分的表格。为了创建重复部分,我使用了这段代码的一个轻微变体:

// Add a new repeating section
var attrs = ['for', 'id', 'name'];
function resetAttributeNames(section) { 
    var tags = section.find('input, label'), idx = section.index();
    tags.each(function() {
      var $this = $(this);
      $.each(attrs, function(i, attr) {
        var attr_val = $this.attr(attr);
        if (attr_val) {
            $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1)))
        }
      })
    })
}

$('.addFight').click(function(e){
        e.preventDefault();
        var lastRepeatingGroup = $('.repeatingSection').last();
        var cloned = lastRepeatingGroup.clone(true)  
        cloned.insertAfter(lastRepeatingGroup);
        resetAttributeNames(cloned)
    });

// Delete a repeating section
$('.deleteFight').click(function(e){
        e.preventDefault();
        var current_fight = $(this).parent('div');
        var other_fights = current_fight.siblings('.repeatingSection');
        if (other_fights.length === 0) {
            alert("You should atleast have one fight");
            return;
        }
        current_fight.slideUp('slow', function() {
            current_fight.remove();

            // reset fight indexes
            other_fights.each(function() {
               resetAttributeNames($(this)); 
            })            
        })   
    });

JSF 搞砸了 - http://jsfiddle.net/Unfxn/27/

我最初从这个线程中找到了代码: Repeating div with form fields

但是,这段代码有一个问题:如果你填写表单域,然后点击“添加战斗”,新的重复部分不仅复制了表单域,还复制了它们的值。我想我需要使用这样的东西来清除新表单部分的值:

$(this).closest('form').find("input[type=text], textarea").val("");

但我不确定如何将其整合到我已有的功能中。那么,一旦创建了新的表单部分,如何清除字段的值呢?

【问题讨论】:

    标签: javascript jquery forms repeat


    【解决方案1】:

    您可以从新克隆的所有输入字段中删除所有值:

    cloned.find("input").val("");
    

    jsfiddle

    编辑:

    要重置无线电组,您可以将其选中的值设置为 false:

    cloned.find("input:radio").attr("checked", false);
    

    Updated jsfiddle

    【讨论】:

    • 我知道这很简单。谢谢!
    • 好的,额外的问题......我希望我能弄清楚这部分,但还没有运气。我还想清除单选按钮和下拉选择的值。我该怎么做?
    • cloned.find("select").val("");适用于选择,仍然没有弄清楚单选按钮....
    • 您需要将它们的检查值设置为 false。编辑了答案。
    • 做到了!非常感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-26
    • 1970-01-01
    • 1970-01-01
    • 2017-03-01
    • 2021-12-25
    相关资源
    最近更新 更多