<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-8 group-container">
<div class="product-group">
<div class="form-group">
<label class="form-label">Naam:</label>
<input type="text" class="form-control group-name"/>
</div>
<div class="product-group-body"></div>
<div class="form-group">
<a href="#" class="new-product btn btn-primary btn-sm">Nieuw product</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mt-5">
<a href="#" class="new-group btn btn-primary btn-sm">Nieuwe Groep</a>
<a href="#" class="submit btn btn-primary btn-sm">Verstuur</a>
</div>
</div>
</div>
<template name="product">
<div class="product">
<a href="#" class="hide btn btn-primary btn-sm">hide/show</a>
<label class="nametext"></label>
<div class="product-specs">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Naam*</label>
<div class="col-sm-4">
<input type="text" name="product-name" required="true" class="form-control product-name" id="inputEmail3">
</div>
<div class="form-check">
<input class="form-check-input vegetarisch" name="vegetarisch" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Vegetarisch
</label>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Omschrijving*</label>
<div class="col-sm-10">
<input type="text" name="omschrijving" required="true" class="form-control omschrijving" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Prijs</label>
<div class="col-sm-10">
<input type="number" name="prijs" class="form-control prijs" id="inputEmail3">
</div>
</div>
</div>
</div>
</template>
<template name="product-group">
<div class="product-group">
<div class="form-group">
<label class="form-label">Naam:</label>
<input type="text" class="form-control group-name" />
</div>
<div class="product-group-body"></div>
<div class="form-group">
<a href="#" class="new-product btn btn-primary btn-sm">Nieuw product</a>
</div>
</div>
</template>
.product-group, .product {
padding: 5px;
border: 1px dashed black;
}
$(document).ready(function() {
var $productTemplate = $("template[name='product']");
var $productGroupTemplate = $("template[name='product-group']");
$(document).on('click', '.new-group', function(ev) {
ev.preventDefault();
$($productGroupTemplate.html()).appendTo(".group-container");
});
$(document).on('click', '.new-product', function(ev) {
ev.preventDefault();
$($productTemplate.html()).appendTo($(this).parents(".product-group").find(".product-group-body"));
});
$(document).on('click', '.submit', function(ev) {
ev.preventDefault();
submit();
});
$(document).on('click', '.hide', function(ev) {
ev.preventDefault();
$(this).parents(".product").find(".product-specs").toggle();
});
$(document).on('keyup', ".product-name", function() {
var value = $( this ).val();
$(".nametext").text( value );
})
});
function submit() {
var data = new FormData();
var groups = [];
$(".product-group").each(function (index, element) {
var $el = $(element);
var group = {naam: $el.find(".group-name").val(), producten: [] }
$el.find(".product").each(function (idxProduct, elProduct) {
var $elP = $(elProduct);
var product = {
naam: $elP.find(".product-name").val(),
omschrijving: $elP.find(".omschrijving").val(),
prijs: $elP.find(".prijs").val(),
isVegetarisch: $elP.find(".vegetarisch").is(":checked")
};
group.producten.push(product);
});
groups.push(group);
});
data.append("groups", groups);
console.log(groups);
//$.post("backend.php", data, function() { alert("Submitted"); });
}
