Wie füge ich ein neues Feld zum HTML-Formular hinzu, ohne die Seite zu aktualisieren

Question

Ich mache ein Formular für meine Website und grundsätzlich möchte ich ein neues Feld zum Formular hinzufügen, wenn der Benutzer auf + Symbol klickt.

Hier ist der Code:

<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> 

Also, wenn Benutzer klicken Sie auf diese kleinen und singen, sollten ein weiteres Feld, ohne die Seite zu aktualisieren zu dem Formular hinzugefügt werden. So wird der Code sein:

<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> 

so, weil ich mit jQuery Sachen nicht vertraut bin, ich diese Frage gestellt hier, hoffentlich jemand half mir mit, dass. Vielen Dank!

Answer 1

lesen jQuery clone und 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

Sie können ein verstecktes Feld erstellen, das die aktuellen Gesamtfelder zählt. Dann benutze die jquery APPEND-Funktion. siehe unten:

$("#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

Ich glaube, Sie an der jQuery-Dokumentation aussehen sollte. Oder Sie sollten wahrscheinlich ein jQuery Tutorial sehen.

In jedem Fall, da ich weiß, dass jQuery zunächst einschüchtern kann, hier ist eine aktualisierte Version, die das tut, was Sie erreichen möchten: https://codepen.io/adelriosantiago/pen/KZaxdG.

Im Grunde habe ich die jQuery-Bibliothek und den Code-Schnipsel:

$('#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 
}) 

Beachten Sie, dass dies nicht ein neues Element nicht anhängen, es zeigt nur ein verborgenes Element. Ich denke, es ist besser, dies zu tun, damit Ihr Code in Ihrem Backend einfacher wird.