javascript - 追加のフォーム フィールドを追加/表示する最良の方法

Question

以下を達成するための最良の方法についての洞察を期待しています。+またはaddボタンがクリックされたときにフィールドを追加できるフォームを作成したいと考えています。たとえば、ユーザーはテキスト フィールドに入力し、それを「説明」と呼び、その隣に「ユニット番号」と呼ばれる別のフィールドを入力します。各エントリの後にフォームを送信せずに複数の「説明」および「ユニット番号」フィールドを許可したいのですが、サイトを「クリーン」に保つために、ユーザーがそれらのいずれかに情報を入力する必要があります。JavaScriptを使用して、設定するだけで追加フィールドを非表示にすることを考えていましたdisplay:none. これは良い/効率的な解決策ですか? より良い解決策はありますか？私はプログラミングに慣れていないので、これがばかげた質問だと感じたら、気楽にやってください。

Answer 1

The best way to do this is to make your fields and put them in a div and then hide it. Use jQuery to .clone your first row and then update the field names any time the user clicks an add link.

Answer 2

You can use a templating library like mustache or handlebars. You can also do this using jQuery. My approach would be to generate new elements on the fly. I won't hide it so that the user can see if he is already inputting duplicate. But if you want to make your markup cleaner, you can also hide the field once the user has already inputted something. So when the user clicks on the add button, you will need to check if the user has actually inputted something, if there is an input, then hide it and then generate a new input again.

If you need a code sample, feel free to ask.

Answer 3

少し前に自分のサイトに書いた JavaScript を次に示します。

 var SITE = SITE || {};

SITE.fileInputs = function() {
  var $this = $(this),
      $val = $this.val(),
      valArray = $val.split('\\'),
      newVal = valArray[valArray.length-1],
      $button = $this.siblings('.button'),
      $fakeFile = $this.siblings('.file-holder');
  if(newVal !== '') {
    $button.text('File Chosen');
    if($fakeFile.length === 0) {
      $button.after('<span class="file-holder">' + newVal + '</span>');
    } else {
      $fakeFile.text(newVal);
    }
  }
};
var counter = 1;
var limit = 5;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<span class=\"file-wrapper\"><input type=\"file\" name=\"screenshot[]\" id=\"screenshot\" /><span class=\"button\">Choose a screenshot</span></span>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
          $('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
     }
}
$(document).ready(function(){
    $("#addss").click(function(){
        addInput("screenshots");
    });
});

次に、php の名前またはデータを処理するために使用している他のものに配列を使用できます。

HTML:

<div id="screenshots">
     <span class="file-wrapper">
           <input type="file" name="screenshot[]" class="screenshot" />
           <span class="button">Choose a screenshot</span>
     </span>
</div>
<input type="button" id="addss" value="+Screenshot" class="btn" />