Javascript,在克隆后修改元素
Javascript, amend elements after clone
我试图发布表单的克隆部分,但由于元素名称相同,它没有提交所有内容。
有谁知道在克隆期间更改输入名称属性的最佳过程?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
if (checkMACAddress()==true) {
$("#test").clone().insertAfter("div.test-row:last");
}
});
});
function checkMACAddress() {
var valid = true;
for ( var i = 0, l = document.getElementsByName("mac").length; i < l; i++ ) {
var macAddress=document.getElementsByName("mac")[i].value;
var macAddressRegExp=/^(?:[0-9A-F]{2}[:]?){5}(?:[0-9A-F]{2}?)$/i;
if (macAddressRegExp.test(macAddress)==false) { //if match failed
alert("MAC Invalid - Must be IEEE.802 example 00:3F:00:10:00:2C");
valid=false;
}
}
return valid;
}
</script>
<h3>Account Details</h3>
<div class="row">
<div class="columns small-4">
<label>Destination Account Number*</label>
[[input||type=text||name=Account||name_literal=Account||placeholder=12345||required=required]]
</div>
</div>
<hr>
<h3>Device Details</h3>
<h5>
<button type='button'>Add Device</button>
</h5>
<div id="test" class="test-row">
<div class="columns small-3">
<label>MAC - IEEE.802 Format Only</label>
[[input||type=text||name=mac||name_literal=mac||placeholder=54781A139264||required=required]]
</div>
<div class="columns small-3">
<label>Extension/Seat Number</label>
[[input||type=text||name=seat||name_literal=seat||placeholder=200]]
</div>
<div class="columns small-3">
<label>Display Name</label>
[[input||type=text||name=station||name_literal=station||placeholder=reception desk]]
</div>
一种方法是使用数组语法作为字段名称,例如:data[identifier][]
.否则,您需要在克隆后修改 name 属性:
var c = 0;
// each time you click on the button...
$(".clone").on('click',function(){
// generate a new clone of complete test div..
var klon = $( '#test').clone();
// append it to parent element (or after existing, as you like)
$('#test').parent().append(klon);
// increase global counter...
c++;
// inside clone find all inputs
// (if you other form elements, you must add them in selector)
klon.find('input').each(function() {
var $this = $(this),
name = $this.attr('name');
// update name attribute
$this.attr('name', name + '_' + (c));
});
});
在这里看到一个小提琴。我仍然更喜欢名称/数组解决方案,它更容易处理服务器端,因为您可以遍历字段而不是要求大量新字段。
相关文章:
- 复制和修改元素,以便在html文档的另一部分使用它们
- 如何修改元素中的现有<内容>
- jQuery 在 ajax 调用后修改元素
- 如何使用带有 % 符号值的 ERB 和 JQuery 修改元素样式属性
- Javascript,在克隆后修改元素
- 当键关闭事件(TAB 键)修改元素值时不触发更改事件
- 修改元素属性后,Jquery 选择器不起作用
- 根据选择选项修改元素
- 文本框的保留值,修改元素后选择
- 如何临时修改元素的CSS
- 使用jQuery拆分和修改元素
- 修改元素'事件函数的参数
- 修改元素的CSS
- 使用jQuery通过ID动态修改元素属性
- 如何修改元素的部分,当它在一个变量
- 使用php修改元素'
- 在Angular.js中,如何在点击时使用ng-repeat迭代对象列表中修改元素的属性?
- javascript修改元素的样式
- 使用jQuery修改元素内容
- 不能使用jquery .on()修改元素的属性