春の動的フォーム

Question

Springフォームを使用して動的フォームを作成しようとしています。基本的に、フォームは学習アクティビティのタイトルを取得し、その下に<！> quot;もう1つの学習アクティビティ<！> quot;というボタンがあります。これにより、ユーザーはもう1つの学習アクティビティを追加できます。私は彼が好きなだけ追加できるようにしたい。

これを試したことはないので、明らかに最初に考えた解決策でエラーが発生しました。私は本当に自分がやったことを実行するとエラーを生成するという気持ちがありましたが、私がやろうとしていることを家に追いやるだけです、ここにコードがあります：

<script language="javascript">
 fields = 0;
 function addInput() {
      document.getElementById('text').innerHTML += "<form:input path='activity[fields++].activity'/><br />";
 }

<div id="text">
  <form:form commandName="course">
   Learning Activity 1 
   <form:input path="activity[0].activity"/>
    <input type="button" value="add activity" onclick="addInput()"/>
    <br/><br/>
   <input type="submit"/>
  </form:form>  
  <br/><br/>
 </div>

Answer 1

サーバー側で実行されるjspタグであるため、javascript内では<！> lt; form:input>を使用できません。

ただし、HTML入力がSpringコマンドオブジェクトのフィールドにバインドされる方法について、魔法のようなことは何もありません。名前に基づいています。あなたのjavascriptで、新しいを追加します <input type="text" name="activity[1].activity"> （たとえば、明らかにインデックスをインクリメントします）。

より複雑なコントロールに使用した別のオプションは、既存のコントロール（Spring form：inputタグを使用して作成された）のHTMLを取得し、それを複製して、インデックスをインクリメントされた番号に置き換えます。 jQueryを使用すると、これが非常に簡単になります。

追加の編集： 問題を引き起こす可能性のある問題の1つは、外側のdivの最後に新しい入力ボックスを追加することです（<！> quot; text <！> quot;）。これは、フォームタグ内にないことを意味します。それは機能しません。

Answer 2

<form:input>はJSPタグですか？その場合、<input>ノードをDOMに追加するクライアント側のJavascriptは効果がありません-サーバー側のJSPエンジンがそれらを解釈しないためです。

Javascriptは、<=>要素の追加など、生のHTMLおよびDOMで動作する必要があります。