Javascript und der Eintrag in die Datenbank

Hallo,

ich habe ein Problem: Ich weiß leider nicht wie ich die Daten, welche im Warenkorb via addItem hinzugefügt werden auslesen kann, sodass Sie in eine MySQL Datenbank geschrieben werden können. Ich habe es versucht mit nicht sichtbaren input feldern, aber leider funktioniert das ganze leider nicht so wie es sein soll.

Benötige Hilfe also:
-> Alle Produkte aus addItem holen sprich aus der Itemliste
-> Eintrag in die Datenbank

Ich danke euch jetzt schon mal.

<script type="text/javascript">  
function popup(URL) {
w = window.open(URL, "", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=1,resizable=1,width=800,height=600,left = 283,top = 284");  
}
</script>
<style>
body, table, tr, td {
font-size: 9pt; COLOR: #444; FONT-FAMILY: "Lucida Grande", Verdana, Arial, Sans-Serif; TEXT-DECORATION: none  
}
</style>






<?php
cbox_auf();
 if(isset($_POST['submit'])) {  
 for($i=0;$i<=500;$i++) {
echo $_POST[$i+'_name'];  
}
}else {
?>
<div style="float: right;">  
<input type="button" onclick="javascript:popup('karte/index.php?id=<?php echo $_GET['kid']; ?>');" value="Route anzeigen" style="float: right;"/>  
<input type="button" onclick="location.href='index.php?site=customer&action=change&id=<?php echo $_GET['kid']; ?>';" value="Kundendaten aktualisieren" style="float: right;"/></div>  
<?php
$ausle = mysql_query("SELECT * FROM `kunden` WHERE id = '$_GET[kid]'");  
$out_kunde = mysql_fetch_array($ausle);


echo '<table  style="table-layout:fixed" width="100%">';  
echo '<tr><td style="width: 15%;"><b>Vorname:</b></td><td style="width: 15%;"><b>Nachname:</b></td><td style="width: 25%;"><b>Stra?e:</b></td><td style="width: 15%;"><b>PLZ:</b></td><td style="width: 15%;"><b>Ort:</b></td><td style="width: 15%;"><b>Telefon:</b></td></tr></table>';  

echo '<table  style="table-layout:fixed" width="100%">';  
echo '<tr><td style="width: 15%;"><b>'.$out_kunde['vorname'].'</b></td><td style="width: 15%;"><b>'.$out_kunde['nachname'].'</b></td><td style="width: 25%;"><b>'.$out_kunde['strasse'].'</b></td><td style="width: 15%;"><b>'.$out_kunde['plz'].'</b></td><td style="width: 15%;"><b>'.$out_kunde['ort'].'</b></td><td style="width: 15%;"><b>'.$out_kunde['telefon'].'</b></td></tr></table><br>';  

$alles = $out_kunde['plz'].', '.$out_kunde['strasse'];  
echo route($alles);

	 


cbox_zu();

cbox_auf();
?>

<style type="text/css">  
#korb #template {
	display: none;
}
.quantity {
	border: 1px solid lightgray;
	width: 2em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script type="text/javascript">  
var data_provider = "data.php";  
// Wenn DOM geladen wurde
$(document).ready(function(e) {

	var itemTemplate = document.getElementById("template");  
	itemTemplate.parentNode.removeChild(itemTemplate);
	itemTemplate.id = "";  
	function Item(name, desc, price, zusatz){
		var This = this;
		this.name = name;
		this.price = price;
		var quantity = 1;
    this.zusatz = zusatz;
		Object.defineProperty(this, "quantity", {  
			get: function(){return quantity;},
			set: function(value){
				quantity = value;
				quantityInput.value = value;
				korb.update();
			}
		});
		
		this.node = itemTemplate.cloneNode(true);
		var quantityInput = this.node.querySelector(".quantity");  
		quantityInput.value = quantity;
		quantityInput.name = name;
		quantityInput.addEventListener("input", function(){  
			This.quantity = parseInt(this.value, 10) || 0;
			this.value = This.quantity;
		}, false);
		Array.prototype.slice.call(this.node.childNodes)
			.filter(function(node){return node.nodeType === 3;})
			.forEach(function(node){
				node.nodeValue = node.nodeValue
					.replace(/\{desc\}/g, desc)
          					.replace(/\{zusatz\}/g, zusatz)
					.replace(/\{price\}/g, price.toFixed(2).replace(".", ","));  
			}
		);
	}
	var korb = {
		node: document.getElementById("korb"),  
		sum: document.getElementById("sum"),  
		items: ,
		addItem: function(name, desc, price, zusatz){
			if (!this.items.some(function(item){
				if (item.name === name && item.zusatz == zusatz){
					item.quantity += 1;
					return true;
				}
				return false;
			})){
				var item = new Item(name, desc, price, zusatz);
				this.items.push(item);
				this.node.appendChild(item.node);
				this.update();
			}
		},
		update: function(){
			this.sum.innerHTML = this.items.reduce(function(value, item){
				return value + item.price * item.quantity;
			}, 0).toFixed(2).replace(".", ",");  
		}
	};

  
	$('#categories').html("<p>Lade Kategorien ...</p>");  
	// Hole Kategorien via Ajax Get-Request
	$.get(data_provider,{catlist : ''}).done(function(data){  
		// erstelle Buttons mit den zurückgelieferten Daten
		var cat_buttons = "";  
		for(i = 0;i < data.length;i++){
			cat_buttons += '<button class="btn" cat_id="' + data[i].category_id + '">' + data[i].name + '</button>';  
		}
		//F?ge Buttons ins DOM ein
		$('#categories').html(cat_buttons);  
		// registriere f?r jeden Kategorie-Button einen OnClick-Handler
		$('#categories button').click(function(){  
			$('#products').html("<p>Lade Produkte ...</p>");  
			// Rufe Produkte der jeweiligen Kategorie ab (die ID der Kategorie haben wir in einem Attribut 'cat_id' des Buttons gespeichert) 
			$.get(data_provider,{cat:$(this).attr('cat_id')}).done(function(data){  
				// erstelle Buttons f?r jedes Product
				var cat_products = "";  
				for(var i = 0;i < data.length;i++){
				cat_products += '<button class="new Position btn" prod_id="' + data[i].id + '" data-name="' + data[i].name + '" data-price="' + data[i].preis + '" data-desc="' + data[i].name + '">' + data[i].name + '</button>';  
       //  echo '<button type="button" class="newPosition btn" data-price="0.15" prod_id="' + data[i].id + '" data-name="' + data[i].name + '" data-desc="' + data[i].name + '">' + data[i].name + '</button>'; 
				}
				//F?ge Buttons ins DOM ein
				$('#products').html(cat_products);  
				// registriere f?r jeden Produkt-Button einen OnClick-Handler und mache drin etwas
				$('#products button').click(function(){  
        
var abfrage = prompt('Soll auf '+this.dataset.name+' drauf oder etwas weggelassen werden?');  
var abfrage2 = prompt('Was soll der Zusatz von '+this.dataset.name+' kosten?');  
 
korb.addItem(this.dataset.name, this.dataset.desc, parseFloat(this.dataset.price) || 0, abfrage);

$('#werte').html += '<input name="' + data[i].id + '_name" type="text" value="' + this.dataset.name + '">';  
$('#werte').html += '<input name="' + data[i].id + '_preis" type="text" value="' + this.dataset.preis + '">';  
   });     
        
			}).fail(function(data){alert('Error:' + data.responseText)});  
		});
	}).fail(function(data){alert('Error:' + data.responseText)});  
});


</script>
</head>
<style type="text/css">  
.btn { padding: 10px; margin: 5px}
</style>
<body>
<h2>Kategorie w?hlen</h2>
<div id="categories"></div>  
<h2>Produkte</h2>
<div id="products"></div>  
<hr style="color: black;">  
<form action="" method="POST">  
<ul id="korb">  
	<li id="template"><input type="number" min="0" step="1" class="quantity"></input>{pid} {desc} € {price}&nbsp;&euro; Zusatz: {zusatz} Zusatzpreis {zpreis}</li>  
</ul>
Gesamtpreis: <span id="sum">-,--</span>&nbsp;&euro;  
<div id="werte">  

</div>
<input name="submit" type="submit" value="Los">  
</form>
</body>
</html>
<?php

cbox_zu();
}
?>