2

次のようなフィールドを持つフォームがあります。

<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 "row" の別のコピーを追加する Add extra address ボタンがあります。ページからのすべてのデータをコントローラーへのリクエストとして送信する必要があります。ボタンの追加の div コピー onclick を追加し、新しいフィールドのそれぞれに一意の ID を追加するスクリプトを作成するにはどうすればよいですか?

4

3 に答える 3

1

Dojoの作業例を参照してください：http ：//jsfiddle.net/phusick/PeQCN/

そして、プレーンバニラJavaScriptの同じコード：http ：//jsfiddle.net/phusick/Rceua/

Dojoバージョンはdojo/_base/lang::clone、@PeterRaderが述べたように採用しています。

// 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");
于 2012-12-14T14:20:13.777 に答える
0

これを達成するためのコードを書きました。

ロジック:
1) 目的の親の innerHTML を取得する
2) テキスト内の id を置き換える
3) 新しい html を挿入する

実際のコードを見る

JS 部分のコーディング スタイルが悪いことをお許しください。私は DOM で直接コーディングすることに慣れていません。私はJQueryを好みます。

于 2012-12-14T12:38:40.547 に答える
0

試す

このスニペットを使用するには (使用法を参照) http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-clone

于 2012-12-14T13:17:44.957 に答える