xvilo
Gebruiker
- Lid geworden
- 14 dec 2008
- Berichten
- 492
Hallo,
Ik ben bezig met een form array. Hier in kunnen producten toegevoegd worden, maar de extra input velden worden dynamisch ingeladen met de
Mijn JS code:
En mijn html code:
Helaas gaat het nu mis bij het toevoegen, dit wil wel. Allen de
Wat gaat hier mis?
//xvilo
Ik ben bezig met een form array. Hier in kunnen producten toegevoegd worden, maar de extra input velden worden dynamisch ingeladen met de
t<template> HTML5 tag. Nu moet er wel elke keer een nieuwe array beginnen en dat doe ik door de array in de template tag aan te passen en dan toe te voegen aan de form. Mijn JS code:
Code:
function prepareButton() {
var count = 0;
$('#add').click(function() {
event.preventDefault();
var content = document.querySelector('#tempproduct').content;
// Update something in the template DOM.
count++;
console.log('products['+count+'][]');
console.log(content);
$(content).find('input').attr("name", 'products['+count+'][]');
document.querySelector('#products').appendChild(
document.importNode(content, true));
});
}
prepareButton();En mijn html code:
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<template id="tempproduct">
<!-- product begin -->
<div class="row">
<div class="six columns">
<input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
</div>
<div class="three columns">
<input type="text" name="products[0][]" class="product" placeholder="Aantal">
</div>
<div class="three columns">
<input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
</div>
</div>
<!-- product eind -->
</template>
<div id="products" class="eight columns product-group">
<div class="row">
<div class="six columns">
<h6>Naam</h6>
</div>
<div class="three columns">
<h6>Aantal</h6>
</div>
<div class="three columns">
<h6>Prijs</h6>
</div>
</div>
<!-- product begin -->
<div class="row">
<div class="six columns">
<input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
</div>
<div class="three columns">
<input type="text" name="products[0][]" class="product" placeholder="Aantal">
</div>
<div class="three columns">
<input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
</div>
</div>
</div>
<button type="button" class="button-primary" id="add">Add product</button>
</body>Helaas gaat het nu mis bij het toevoegen, dit wil wel. Allen de
find gaat mis en update products[0][] niet naar products[1][].... Wat gaat hier mis?
//xvilo
