Dynamisch formulier met Javascript berekeningen

Status
Niet open voor verdere reacties.

ClaudiaWD

Gebruiker
Lid geworden
21 jul 2011
Berichten
109
Goedemiddag,

Ik wil eigenlijk een formulier maken waarmee verschillende soorten producten besteld kunnen worden. Denk hierbij aan meubels, elektriciteit en afbeeldingen. Deze producten hebben elk een eigen naam, prijs en afbeelding en worden uitgelezen vanaf de database. Dit kunnen bij wijze van spreke zo'n 150 producten zijn. Vandaar dat ik deze wil uitlezen middels een MySQL database. Ik wil echter ook dat onderaan het formulier een berekening gemaakt word per categorie, met behulp van Javascript. Een soort real-time kassabon. A la:

Totaal meubels: € 5400,-
Totaal elektriciteit: € 350,-
Totaal afbeeldingen: € 150,-
Totaal: € 5900,-

Mijn formulier ziet er momenteel (ongeveer) zo uit:
PHP:
<form action="" method="post">
<strong>Furniture:</strong><br>
<?php
$getfurniture = $dbh->prepare("SELECT * FROM products WHERE category = 'furniture'");
$getfurniture->execute();
$furnitures = $getfurniture->findAll();
$getfurniture->closeCursor();
foreach ($furnitures as $furtniture) {
?>
<select name="qty" onchange="function()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="hidden" name="price" value="<?php echo $furtniture['price']; ?>">
<?php
}
?>
<br><br>
<strong>Graphics:</strong><br>
<?php
$getgraphics= $dbh->prepare("SELECT * FROM products WHERE category = 'graphics'");
$getgraphics->execute();
$graphics = $getgraphics->findAll();
$getgraphics->closeCursor();
foreach ($graphics as $graphic) {
?>
<select name="qty" onchange="function()">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="hidden" name="price" value="<?php echo $graphics['price']; ?>">
<?php
}
?>
</form>
<script>
var furtnitureTotal = 0;
var graphicTotal = 0;
var grandeTotal = 0;

function function() {
// I have no clue
}
</script>

Kan iemand mij hierin een duwtje in de juiste richting sturen? Of bijv. een klein voorbeeld-scriptje maken? Ik kan dit wel met een statisch formulier, maar hoe ik dit moet doen met een formulier waarbij velden worden gegenereerd uit een database heb ik eigenlijk geen idee. Ik loop zo bijv. al tegen het probleem 'input namen' aan. Hoe noem ik deze selects en inputs? Niet allemaal hetzelfde lijkt me.

Alvast bedankt.
 
Kan je hiermee verder?
Code:
[B]html[/B]

<form action="" method="post">
    <p><br><strong>Furniture:</strong></p>
    <select class="furniture" name="qty">
        <option value="0">Kies aantal</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input type="hidden" name="price" value="145.00">
    <p><br><strong>Graphics:</strong></p>
    <select class="graphics" name="qty">
        <option value="0">Kies aantal</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input type="hidden" name="price" value="88.30">
</form>
<br>Totaal furniture is &euro; <span class="total-furniture">0.00</span>
<br>Totaal graphics  is &euro; <span class="total-graphics">0.00</span>

[B]JS[/B]

$(document).ready(function() {
    // calculate total price
    function calcTotalPrice(selCategory) {
        var itemQty, itemPrice, subTotal=0;
        $(selCategory).each(function(index) {
            itemQty   = $(this).val();
            itemPrice = $(this).next("input").val();
            subTotal += parseFloat(itemQty) * parseFloat(itemPrice);
        });
        return subTotal;
    }
    // show total price
    function showTotalPrice(selTotalPrice, selCategory) {
        $(selTotalPrice).html(calcTotalPrice(selCategory).toFixed(2));
    }
    // furniture
    $(".furniture").on("change", function() {
        showTotalPrice(".total-furniture", ".furniture");
    });
    showTotalPrice(".total-furniture", ".furniture");
    // graphics
    $(".graphics").on("change", function() {
        showTotalPrice(".total-graphics", ".graphics");
    });
    showTotalPrice(".total-graphics", ".graphics");
});
Zoals je ziet heb ik jQuery gebruikt om het makkelijk te houden.
onclick, onchange, etc. kan je met event handlers afhandelen, zie bij .on("change" ....)

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan