0

次のようなフォームがあり、ユーザーが入力テキストを入力してから、別の入力テキストを自動的に追加すると、このアクションが続行されます。

html の例は次のとおりです。

<form method="post" action="http://localhost/save" class="save">
 <fieldset>

  <div>
   <label>Text 1:</label><br>
   <input type="text" value="" name="text1" id="text" class="input-tags">
  </div>

  <div>
   <label>Text 2:</label><br>
   <input type="text" value="" name="text2" id="text" class="input-tags">
  </div>

  <div>
   <input type="submit" value="Save" class="elgg-button elgg-button-submit">
  </div><!-- developers:end forms/application_description/save -->
 </fieldset>
</form>

jQueryでこれを行うにはどうすればよいですか?

だから、より少ない言葉での質問は次のとおりtext2ですtext1。

4

2 に答える 2

2

このようなものが機能します。かなりラフですが、テスト済みで、正常に動作します

$(document).ready(function(){
    $("#testForm").append($("<input type='text'/>"));

    $("#testForm").on("blur", 'input', function(){
        $("#testForm").append($("<input type='text'/>"));
    });
});

ここに私のフィドルへのリンクがあります。分岐して遊ぶことができます。

http://jsfiddle.net/ricobano/bxEAb/

于 2013-10-03T13:19:42.607 に答える
1

はい、選択したフォームまたは HTML の全体にフィールドを動的に追加できます。確認する必要がある jQuery 関数は、prepend、prependTo、append、または appendTo です。それらはすべて、基本的に同じことをわずかに異なる方法で行います。

作成されたテキスト フィールドの数を含む変数を保持し、追加するたびに増加させることができます。id 属性を div に追加すると、より簡単になります。たとえば、送信ボタンを囲む div に、次のような ID を追加しました。

<div id="submit-div">

次のように言えます。

function addField() {
    n++;
    '<div><label>Text ' + n + ': </label><input type="text" name="text' + n + '" class="input-tags"></div>'.prependTo('#submit-div');
}

この関数をいつどのように呼び出すかは自由ですが、最後の入力フィールドのぼかしイベントにアタッチすることもできます。次に、新しいものを作成するときに、前の入力フィールドからイベント ハンドラーを削除できます。

于 2013-10-03T13:26:02.867 に答える