JavaScript pour afficher les champs de formulaire supplémentaires

Question

J'ai un formulaire qui a un bloc appelé "Produit", contenant des entrées de texte. A l'intérieur de ce bloc, l'utilisateur peut appuyer sur "ajouter un élément" et demander au JS d'afficher un champ de plus. Jusqu'à maintenant tout fonctionne.

J'ai essayé d'ajouter une fonction pour ajouter un nouveau bloc "Produit" mais pas de chance. Avez-vous des indices pour moi?

Product 
Item: <input> Price: <input> 
Item: <input> Price: <input> 
       <a>add item</a> <- this works 

<a>add Product</a>    <- this is the part that I can't figure out :(

Toute aide sera appréciée.

Merci!

Mise à jour: Voici la JS pour les champs de l'objet et Prix:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var counter = 2; 
    $("b.add-item").click(function() { 
    if(counter>5){ alert("Max 6 items allowed"); return false; } 
    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 
    newTextBoxDiv.after().html(
      '<span class="item">' + 
      '<label>Item:</label>'+ 
      '<input type="text" name="item1[]" id="textbox' + counter + '" value="" >' + 
      '<label>&nbsp;&nbsp;&nbsp;Price:</label>'+ 
      '<input type="text" name="price1[]" id="textbox' + counter + '" value="" >' +  
      '</span>' 
      ); 
    newTextBoxDiv.appendTo(".items"); 
    counter++; 
    }); 
    $("b.remove-item").click(function() { 
    if(counter==1){alert("No more textbox to remove"); 
    return false; }  counter--; 
    $("#TextBoxDiv" + counter).remove();}); 
    $("#getButtonValue").click(function() { var msg = ''; for(i=1; i<counter; i++){ msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); }alert(msg); }); 
    }); 
</script> 

Answer 1

Peut-être faire une table et ajouter de nouvelles lignes?

HTML:

<table id="myTable"> 
    <tr> 
    <th>Item</th> 
    <td><input /></td> 
    <th>Price</th> 
    <td><input /></td> 
    </tr> 
    <tr> 
    <th>Item</th> 
    <td><input /></td> 
    <th>Price</th> 
    <td><input /></td> 
    </tr> 
</table> 
<a onclick="add_row(); return false;">Add Product</a> 

JavaScript:

function add_row() 
{ 
    var table = document.getElementById('myTable'); 
    if(!table) return; 
    // Table row 
    var row = document.createElement('row'); 
    table.appendChild(row); 
    // "Item:" 
    var th1 = document.createElement('th'); 
    th1.innerText = 'Item:' 
    row.appendChild(th1); 
    // Item input 
    var td1 = document.createElement('td'); 
    row.appendChild(td1); 
    var input1 = document.createElement('input'); 
    td1.appendChild(input1); 
    // "Price:" 
    var th2 = document.createElement('th'); 
    th2.innerText = 'Price:' 
    row.appendChild(th2); 
    // Price input 
    var td2 = document.createElement('td'); 
    row.appendChild(td2); 
    var input2 = document.createElement('input'); 
    td1.appendChild(input2); 
} 

Je pense que cela devrait fonctionner ...