ページを更新せずにhtmlフォームに新しいフィールドを追加する方法

Question

私は自分のサイトのフォームを作成していますが、ユーザーが+アイコンをクリックすると基本的にフォームに新しいフィールドを追加します。ここで

はコードです：

<div class='form-group'> 
    <div class='form-group'> 
     <label>Product Image 1:</label> 
     <input type='file' name='product_img1' class='form-control my-colorpicker1'> 
    </div> 
</div> 
<div class='form-group'> 
    <div class='form-group'> 
     <label>Product Image 2:</label> 
     <input type='file' name='product_img2' class='form-control my-colorpicker1'> 
    </div> 
</div> 
<div class='form-group'> 
    <div class='form-group'> 
     <label>Product Image 3:</label> 
     <input type='file' name='product_img3' class='form-control my-colorpicker1'> 
    </div> 
</div> 

<p>Add more images: <a href='' title='click this icon in order to add more images'><span class='glyphicon glyphicon-plus'></span></a></p> 

ユーザーがこの小さなをクリックしてプラスを歌うのであれば、別のフィールドにはページを更新せずにフォームに追加する必要があります。だから、コードは、これを次のようになります。

<div class='form-group'> 
     <div class='form-group'> 
      <label>Product Image 1:</label> 
      <input type='file' name='product_img1' class='form-control my-colorpicker1'> 
     </div> 
    </div> 
    <div class='form-group'> 
     <div class='form-group'> 
      <label>Product Image 2:</label> 
      <input type='file' name='product_img2' class='form-control my-colorpicker1'> 
     </div> 
    </div> 
    <div class='form-group'> 
     <div class='form-group'> 
      <label>Product Image 3:</label> 
      <input type='file' name='product_img3' class='form-control my-colorpicker1'> 
     </div> 
    </div> 
    <div class='form-group'> 
     <div class='form-group'> 
      <label>Product Image 4:</label> 
      <input type='file' name='product_img1' class='form-control my-colorpicker1'> 
     </div> 
    </div> 
    <p>Add more images: <a href='' title='click this icon in order to add more images'><span class='glyphicon glyphicon-plus'></span></a></p> 

をだから私はjQueryのものに慣れていないよので、私はここにこの質問をし、うまくいけば、誰かがそれで私を助けました。ありがとう！

Answer 1

読むjQueryのcloneとappend

$('#add').click(function() { 
 
    $('#clone-field').clone().appendTo('#form'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="form"> 
 
    <div id="clone-field"> 
 
    <input type='file' name='product_img[]'> 
 
    </div> 
 
</div> 
 

 
<br> 
 

 
<button id="add">Add more images</button>

Answer 2

現在の合計フィールドを数える非表示フィールドを作成することができます。次に、jquery APPEND関数を使用します。以下を参照：

$("#addbtn").click(function(){ 
 
\t \t var next = parseInt($('#counter').val()) + 1; 
 
\t \t $("#group1").append("<div class='form-group'><div class='form-group'><label>Product Image "+next+":</label><input type='file' name='product_img"+next+"' class='form-control my-colorpicker1'></div></div>"); 
 
\t \t $('#counter').val(next); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="group1"> 
 

 
\t <div class='form-group'> 
 
\t  <div class='form-group'> 
 
\t   <label>Product Image 1:</label> 
 
\t   <input type='file' name='product_img1' class='form-control my-colorpicker1'> 
 
\t  </div> 
 
\t </div> 
 
\t <div class='form-group'> 
 
\t  <div class='form-group'> 
 
\t   <label>Product Image 2:</label> 
 
\t   <input type='file' name='product_img2' class='form-control my-colorpicker1'> 
 
\t  </div> 
 
\t </div> 
 
\t <div class='form-group'> 
 
\t  <div class='form-group'> 
 
\t   <label>Product Image 3:</label> 
 
\t   <input type='file' name='product_img3' class='form-control my-colorpicker1'> 
 
\t  </div> 
 
\t </div> 
 

 
</div> 
 
<input type="hidden" name="counter" id="counter" value="3"> 
 
<p>Add more images: <a href='#' title='click this icon in order to add more images' id="addbtn">test<span class='glyphicon glyphicon-plus'></span></a></p>

Answer 3

私はあなたがjQueryのドキュメントを見てすべきだと思います。または、おそらくいくつかのjQueryチュートリアルが表示されます。

いずれにしても、私はjQueryが最初は威圧することができることを知っているので、ここでは達成したい更新されたバージョンがあります：https://codepen.io/adelriosantiago/pen/KZaxdG。

基本的に私はjQueryライブラリと、このコードスニペットを追加しました：これは新しい要素を追加していないこと

$('#extra-q').hide(0); //Hide the extra question 

$('#add-more').off().on('click', function() { //Set the plus button click trigger 
    $('#extra-q').show(0); //Show the extra question 
}) 

は注意が、それだけで隠し要素を示しています。私はこれを行う方が良いと思います。バックエンドのコードがより簡単になります。