メンバーのフォームに行を追加しますか？

Question

私はユーザーがメンバーを追加できるサインアップフォームを作成しようとしています。これをすばやく行うために、私は1つの入力を持つ基本的なフォームを作成し、キーボードのEnterキーがヒットすると新しい行が作成されます。

私は入力でeキーを試しましたが、私は重複ではなく警告するようにしかできません。ここに私のフォームがあります。

<form id="contactForm" novalidate> 
    <table id="members" style="width:100%"> 
     <tr> 
      <td> 
       <div class="row control-group"> 
        <div class="form-group col-xs-12 floating-label-form-group controls"> 
         <label>Member Name</label> 
         <input type="text" class="form-control" placeholder="Member Name" id="member"> 
         <p class="help-block text-danger"></p> 
        </div> 
       </div> 
      </td>  
     </tr>  
    </table>  
    <br> 
    <div id="success"></div> 
    <div class="row"> 
     <div class="form-group col-xs-12"> 
      <button type="submit" class="btn btn-success btn-lg pull-right">Next</button> 
     </div> 
    </div> 
</form> 

Answer 1

このためには、JavaScriptのフレームワークを使用することをおすすめします。

Ember: Adding input fields dynamically on click and reading the new data

：Embers.jsフレームワークのコンテキストを除いて、あなたと同じ質問ですこのSO質問が、あり得ることをいくつかがありますが、私はEmber.js

クロスリファレンスをお勧めします

ボタンをクリックして新しいフィールドを表示することについて説明していますが、フィールドの塗りつぶしでも同じことができます。

これが役に立つと願っています。

Answer 2

追加のJavaScriptフレームワークは必要ありません。現代のブラウザでは、HTML5とネイティブのJavascriptでこれを解決できます。ここに小さな例があります。

<template id="my-row"> 
    <div> 
     <label>Member Name</label> 
     <input type="text" placeholder="Member Name" name="member[]" required> 
    </div> 
</template> 

HTML5では、テンプレートタグを使用できます。それはあなたの目的のために作られました。テンプレートの内容は画面に表示されません。それは目に見えないマークアップです。だから、見てみましょう、何がjavascriptのようになります。

<script> 
    var template = document.getElementById('my-row'); 
    var parent = document.querySelector('#members td'); 
    document.addEventListener('keyup', function(event) { 
     event.preventDefault(); 
     if (event.key == 'Enter') { 
      var clone = document.importNode(template.content, true); 
      parent.appendChild(clone); 
     }  
    }); 
</script> 

例えば、このjavascriptコードは、必要なものすべてを実行します。 HTML5テンプレートは、Enterキーを押すと子として挿入されます。

対処しなければならないこと：HTML5テンプレートタグは古いブラウザではサポートされていません。最終的には、Internet Explorer 11のような古いブラウザでHTML5テンプレートタグを処理するための多形体を扱わなければなりません。