用表单域重复div [英] Repeating div with form fields

问题描述

我有一个表格，希望可以将一组字段重复多次.而且我还希望这些新字段组的字段id，name和label的for属性增加1.到目前为止，我已经使用jQuery进行了尝试，并至少复制了该组字段，但删除不起作用.而且我不确定如何为这3个属性中的每个属性执行+1.感谢您能提供的任何帮助.

I have a form where I want to be able to duplicate a group of fields as many times as I want. And I also want to have field id, name, and label's for attributes of those new group of fields increase by 1. I've tried this so far with jQuery, and got it to at least duplicate the group of fields, but remove doesn't work. And I'm not sure how to do +1 for each of those 3 attributes. I appreciate any help I can get.

这是它的一个小提琴， http://jsfiddle.net/Unfxn/

Here's a jsfiddle of it, http://jsfiddle.net/Unfxn/

HTML

<form method="post" action="#" class="inlineForm" enctype="multipart/form-data">
    <div class="repeatingSection">
        <a href="#" class="buttonGray buttonRight deleteFight">Delete</a>
        <input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" />
        <input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" />
        <input type="hidden" name="winner_id_1" id="winner_id_1" value="" />
        <div class="formRow">
            <label for="fighter_a_1">Fighters</label>
            <input type="text" name="fighter_a_1" id="fighter_a_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_1" id="fighter_b_1" value="" />
        </div>
        <div class="formRow">
            <label for="fighter_a_pay_1">Fighter Pay $</label>
            <input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" />
        </div>
        <div class="formRow">
            <label for="winner_1">Winner</label>
            <input type="text" name="winner_1" id="winner_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_1">Method</label>
            <input type="text" name="method_1" id="method_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_type_1">Method Type</label>
            <input type="text" name="method_type_1" id="method_type_1" value="" />
        </div>
        <div class="formRow">
            <label for="round_1">Round</label>
            <input type="text" name="round_1" id="round_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="time_1">Time</label>
            <input type="text" name="time_1" id="time_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="fight_number_1">Fight #</label>
            <input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" />
        </div>
    </div>
    <div class="formRowRepeatingSection">
            <a href="#" class="buttonGray buttonRight addFight">Add Fight</a>
        </div>
    <div class="formRow">
        <input type="submit" class="submitButton" value="Save Fights" />
    </div>
</form>

JS

// Add a new repeating section
$('.addFight').click(function(){
    var lastRepeatingGroup = $('.repeatingSection').last();
    lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);
    return false;
});
// Delete a repeating section
$('.deleteFight').click(function(){
    $(this).parent('div').remove();
    return false;
});

推荐答案

这应根据所有三个元素自动重命名:

This should automatically rename according all three elements:

// Add a new repeating section
$('.addFight').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    newSection.insertAfter(lastRepeatingGroup);
    newSection.find("input").each(function (index, input) {
        input.id = input.id.replace("_" + currentCount, "_" + newCount);
        input.name = input.name.replace("_" + currentCount, "_" + newCount);
    });
    newSection.find("label").each(function (index, label) {
        var l = $(label);
        l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
    });
    return false;
});

// Delete a repeating section
$('.deleteFight').live('click',function(){
    $(this).parent('div').remove();
    return false;
});​

我更改了删除处理程序，改为使用 .live()，这样该处理程序也将被新附加到创建了该按钮的副本.现在，如果您使用的是jQuery> 1.7，则应使用 .on()

I changed the delete handler, to use .live() instead, so that the handler would also be attached to newly created copies of that button. Now, if you're using jquery > 1.7 you should use .on()

on()版本为:

// Delete a repeating section
$(document).on('click','.deleteFight',function(){
    $(this).parent('div').remove();
    return false;
});

这篇关于用表单域重复div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！