[英]How to change the id and name of the input fields on cloning
嗨,我正在利用以下克隆示例
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代码
<script type="text/javascript">
// 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));
})
})
});
</script>
输入字段name="fighter_a_id_1"
类似于name="fighter_a_id_1"
,而替换表达式为$this.attr(attr, attr_val.replace(/_\\d+$/, '_' + (idx)))
我想要输入字段名称,例如name="Jobs[0].AssignedTo"
并且我想增加数字,所以如何编写表达式,我需要这样的名称,因为asp.net mvc需要它
所以请帮我...!
尝试这个
您可以使用data- *属性作为名称和ID模板,而在克隆该元素时,可以将其替换为所需的数字
function AddControl(){ var inpt = $(".dummyinput").clone(); var IdCount = 0; $(inpt).addClass("workinginput").removeClass("dummyinput"); IdCount = $(".workinginput").length; $(inpt).attr("id",$(inpt).data("id").replace("__ID__",IdCount)); $(inpt).attr("name",$(inpt).data("name").replace("__NAME__",IdCount)); $("div").append($(inpt)); } AddControl(); AddControl();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' class='dummyinput' data-id='controlId[__ID__]' data-name='controlName[__NAME__]'> <div> </div>
这对我有用
$this.attr(attr, attr_val.replace(/\[\d\]/,'['+(idx)+']'))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.