Generate and submit multi-item order

by alano

HTML

<form name="order" action="submit.php">
    <table id="order"></table>
      <button id="submit" type="submit">Submit Order</button>
</form>

JavaScript

//ITEMS TO ADD (JSON format)...
var items = [{
    "name": "Toaster",
    "code": "1234567ABC",
    "price": "80.66",
    "quantity": "1"
}, {
    "name": "Spoon",
    "code": "12332567ABC",
    "price": "8.11",
    "quantity": "4"
}, {
    "name": "Fork",
    "code": "1989567ABC",
    "price": "5.98",
    "quantity": "6"
}];

$(document).ready(function() {
    var $form = $("form[name=order]");
    var $order = $("table#order"); //cache for speed
    $.each(items, function(i, item) {
        $("<tr>")
            .append($("<td>")
                .append($("<input>", {
                    name: "name[]",
                    val: item.name })))
            .append($("<td>")
                .append($("<input>", {
                    name: "code[]",
                    val: item.code })))
            .append($("<td>")
                .append($("<input>", {
                    name: "price[]",
                    val: item.price })))
            .append($("<td>")
                .append($("<input>", {
                    name: "quantity[]",
                    val: item.quantity })))
            .appendTo($order);
    });
                    

    //FOR DIAGNOSTIC PURPOSES, PREVENT SUBMIT
    $form.submit(function() {
        alert("Submitting: " + $form.serialize());
        return false; //completely prevent submit
    });
});