Generieren von Formularfeldern mit jquery

Question

Ich habe eine ziemlich einfache Form, die es Benutzern ermöglicht, einfache Kleinanzeigen zu posten. Es sieht wie folgt aus:

<form action=""> 
    <fieldset> 
     <h3>Personal Informations</h3> 
     <input type="text" placeholder="Your Name"> 
     <input type="text" placeholder="Your Address"> 
    </fieldset> 

    <fieldset> 
     <h3>Car Informations</h3> 

     <input type="text" placeholder="Manufacturer"> 
     <input type="text" placeholder="Model">  
     <input type="text" placeholder="Year"> 

     <a href="#">Add More Ads</a> 

    </fieldset> 
</form> 

Ich mag würde der Besucher ermöglichen, um mehr Anzeigen dann schreiben Sie eine über die Taste/link „Mehr Anzeigen hinzufügen“ die gleichen 3 Felder wie viel mal erzeugen würden als Besucher Anzeigen benötigt.

Was wäre die einfachste Lösung, dies zu tun? Jede Hilfe/Anleitung wäre großartig! Danke!

P.S Auch wäre es toll, wenn der Benutzer auch die Felder entfernen kann, wenn er sich

Answer 1

brauchen tut Sie input s einstellen können in <div class="row"> dann erste row Klasse kopieren.

$("#addAdsFiels").click(function(){ 
 
    var clone = $(this).siblings(".row:first").clone(); 
 
    $(clone).find("input").val(""); 
 
    $(this).before(clone); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <fieldset> 
 
     <h3>Personal Informations</h3> 
 
     <input type="text" placeholder="Your Name"> 
 
     <input type="text" placeholder="Your Address"> 
 
    </fieldset> 
 

 
    <fieldset> 
 
     <h3>Car Informations</h3> 
 
     <div class="row"> 
 
      <input type="text" placeholder="Manufacturer"> 
 
      <input type="text" placeholder="Model">  
 
      <input type="text" placeholder="Year"> 
 
     </div> 
 
     <a href="#" id="addAdsFiels">Add More Ads</a> 
 
    </fieldset> 
 
</form>

Answer 2

bereits.

$('#addMOre').on('click',function(){ 
 
    var self = $('.apendable').first().clone().insertAfter(".apendable:last"); 
 
    $('.apendable:last input').val(''); 
 
    self.append('<button class="close-info">close</button>'); 
 
    $('.close-info').on('click', function(){ 
 
    $(this).parent().remove(); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <form action=""> 
 
      <fieldset> 
 
       <h3>Personal Informations</h3> 
 
       <input type="text" placeholder="Your Name"> 
 
       <input type="text" placeholder="Your Address"> 
 
      </fieldset> 
 
     
 
      <fieldset id="info"> 
 
       <h3>Car Informations</h3> 
 
       <div class="apendable"> 
 
       <input type="text" placeholder="Manufacturer"> 
 
       <input type="text" placeholder="Model">  
 
       <input type="text" placeholder="Year"> 
 
       </div> 
 
       <a href="#" id="addMOre">Add More Ads</a> 
 
     
 
      </fieldset> 
 
     </form>