>我有一个表单,其中包含以下字段:
<div class="row">
<div class="field">
<input class="" type="text" name="college" id="college"/>
</div>
<div class="field">
<input class="" type="text" name="city" id="city"/>
</div>
<div class="field">
<input class="" type="text" name="zip" id="zip"/>
</div>
</div>
<input type="button" class="buttonWidth" id="btnAddressAdd" value="Add Worksite Addressess"/>
我有一个添加额外地址按钮,可以将div"行"的另一个副本添加到页面。我需要将页面中的所有数据作为请求发送到控制器。如何编写一个脚本,在单击按钮时添加额外的div 副本,并将唯一 id 附加到每个新字段?
参见 Dojo 中的工作示例:http://jsfiddle.net/phusick/PeQCN/
在普通的JavaScript中使用相同的代码:http://jsfiddle.net/phusick/Rceua/
Dojo版本采用了dojo/_base/lang::clone
,正如@Peter Rader提到的:
// var lang = require("dojo/_base/lang");
// var array = require("dojo/_base/array");
// var query = require("dojo/query");
// var domAttr = require("dojo/dom-attr");
var counter = 0;
function duplicate(/*Node*/sourceNode, /*Array*/attributesToBump) {
counter++;
var out = lang.clone(sourceNode);
if (domAttr.has(out, "id")) { out.id = bump(out.id); }
query("*", out).forEach(function(node) {
array.forEach(attributesToBump, function(attribute) {
if (domAttr.has(node, attribute)) {
domAttr.set(node, attribute, bump(domAttr.get(node, attribute)));
}
})
});
function bump(/*String*/str) {
return str + "_" + counter;
}
return out;
}
如何使用上述duplicate
功能:
// var dom = require("dojo/dom");
// var domConstruct = require("dojo/dom-construct");
var sourceNode = dom.byId("fieldset");
var node = duplicate(sourceNode, ["id", "name", "placeholder"]);
domConstruct.place(node, sourceNode, "after");
我已经编写了代码来实现这一点。
逻辑:
1)获取所需父级
的内部HTML2) 替换文本
中的 ID3) 插入新的网页
查看工作代码
请原谅我在JS部分的编码风格不佳。我不习惯直接在 DOM 上编码。我更喜欢JQuery。
尝试
使用此截图(请参阅用法)http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-clone