2

小グループに人を追加するためのフォームが記載されたphpページがあります。

追加される人ごとに、複数のフォーム要素を持つがあり、それぞれが人の番号に従って名前が付けられています。例えば： 

<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>

データベース内の各人について、phpページがフォームセクションに入力されます。

ユーザーを追加するには、ユーザーは「+」アイコンをクリックします。その時点で、ページはjQueryを使用して新しいを動的に入力します。これを行うには、既存のフォームに新しいdivhtmlを追加するだけです。これは、javascriptページにphpページと同じhtmlマークアップ（追加される）がすべて含まれていることを意味します。

これは、コードの不要な重複のようです。phpページで何かを変更するときはいつでも、javascriptコードでも変更する必要があります。

このようなコードの重複を回避するための一般的な方法はありますか？私が考えることができる唯一のことは、jQueryを使用して既存のdivからhtmlを取得することです。ただし、この場合、ユーザーnのフォームフィールドの値は、ユーザーn+1の新しいコードに表示されます。

ありがとう。

4

2 に答える 2

1

Capisci :)？

<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>

<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>

今、別のフィールドを追加するとき...

<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>

次に、トラフを繰り返し$_POST[]て、やりたいことを実行します。

.userにユーザーIDがあるので、ユーザーを削除すると、HTMLのその部分を削除できます（これはUX用です）。さらに重要なのは、数百の変数ではなく、1つで反復できる少数の配列だけです。ループ。あなたがポイントを得ることを願っています。乾杯。

于 2011-04-03T23:17:34.587 に答える
0

phpコードは、javascriptに「プロトタイプ」を与える必要があります。これは、javascriptを使用して変更できます。そうすれば、ユーザーがいない場合でも、JavaScriptは機能します。この例には明らかに多くのコード（フォームなど）がありませんが、アイデアが得られるはずです。とにかくたくさんの変更を加える必要があると思うので、私はそれをテストしていません。

 <script type="application/x-javascript">
  addEventListener("load",function(){
   document.getElementById("add-user").addEventListener("click",function(){
    var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
    document.getElementById("user-list").appendChild(node);
    node.id="users_"+(n+1);
    for(var i=0;i<list.length;++i)
     list[i].name&&(list[i].name+="["+n+"]");
   },false);
  },false);
 </script>
</head>
<body>
 <div id="prototype-container">
  <? /* print out a div without any information in it */ ?>
 </div>
 <div id="user-list">
  <? /* print out divs with some infomation in them */ ?>
 </div>
 <button id="add-user">add a user</button>
于 2011-04-04T01:30:16.000 に答える