input felter, udregning og submit

skal lige nævnes at jeg helst så dataerne udskrives til input felter da det gøre det lettere for mig at submitte dem videre så jeg kan bruge dem til php scriptet.

Det kan sagtens være en fin tanke at benytte javascript til at vise udregningerne til kunden - men da inputfelterne let kan manipuleres med bør du altid validere og/eller lave den endelige udregning i PHP.

Hvad ligger budgettet på for sådan en opgave?

Alle data skal godkendes efterfølgende så validering foretages senere i processen.

Budget - har søgt her på siden og kunnet se at andre har kunne få "bikset" noget lignede sammen så havde ikke forventet andet end en venlig sjæl brugte 3 min på at kaste noget sammen.

_TROR_ såfremt man kan sit kram er det hurtig lavet.

så vil jeg sige held og lykke med din tro (:

Jeg har lige lavet noget helt fra bunden og jeg vil mene at indbøbskurv/ordrebekræftelse/faktura har taget 2 - 3 dage.

<ole>

@codeadmin: Du er tvunget til også at lave beregningerne på serveren. Ellers vil du ikke kunne stole på regnestykket  =)

Du kan sagtens lave et interface, som af hensyn til brugeren foretager en 'serviceberegning' af subtotal, moms, rabat og total, men når tallet rammer serveren, kan du ikke se, om det er JS, der har lavet beregningen.

Tallet kan ligeså godt være et, brugeren har fusket sig frem til og indtastet. Der er absolut ingen sikkerhed i en beregning, foretaget med JavaScript i browseren  =)

/mvh
</bole>

Sherlock - Det er kun "interfacet" - det bagved liggende kan jeg håndtere.

Kunne godt lave det med input felterne som jeg ønsker det "simpelt" nok. Men hvis jeg skal bruge en faktura linje mere, så jeg nødt til at bruge andet end php eller html. Ligeledes hvis jeg skal have den til at udragne dataøerne.


Ole - et readonly input felt er et godt sted og starte og igen så skal de valideres senere i processen så derfor vil det blive opsnappet hvis nogle synes de skal være morsomme.





Er det så "urimeligt" det jeg spørg om hjælp til? - lyder det jo til.

@codeadmin: Du tager fejl. Et readonly felt er et præcis ligeså dårligt sted at begynde, som noget andet  =)

Enhver noob med bare en smule kendskab til JavaScript kan med største lethed sætte værdien på et felt med lidt JavaScript i browserens adresselinje - eller for den sags skyld slette felter helt eller skrive nye felter ind i formen.

Der er som sagt ingen sikkerhed i JavaScript - og du vil intet kunne 'opsnappe' på serveren. Udregningen skal under alle omstændigheder foretages på serveren. Udregningen i JS må kun udføres af hensyn til brugeren. Den må aldrig danne grundlag for noget seriøst.

Det er ikke spor urimeligt, at du spørger, men det er nok heller ikke urimeligt at gøre dig opmærksom på, at der er noget, du fundamentalt har misforståt ... vel?  =)

At køre et check om dataerne matcher inden det indsættes i databasen er ikke den største udfordring så det bestemt værd at overveje.
Var faktisk ikke klar over at det er så nemt at ændre på sådanne oplysninger.


Det ikke urimeligt at gøre opmærksom på der noget jeg ikke har styr på - tværtimod.

Er det en hjælp jeg stiller det om som jeg ønsker det så ud?

Dersom du også laver udregning/sammentælling på serveren, kan du sagtens lave en 'serviceberegning' af hensyn til brugeren i JS - men løsningen afhænger af formens HTML, som vi ikke kender

Nu er det jo ikke helt klart beskrevet hvordan din samlede løsning er, så det er spændende hvordan du tilføjer en ny linie til fakturaen.

Hvis du gør det i en postback, så kan du jo lige så godt også beregne dine totaler der.

Hvis ikke, så skal du vel lave noget Javascript/Ajax, og så er det jo ikke så simpelt, som at lægge lidt tal sammen mere.

Må der bruges jQuery? Personligt laver jeg intet med DOM uden jQuery mere.

Sherlock - har intet så der frit slag til at gøre som du vil ;) så hvis du vil bruge jquery så det det du gør ;) Eneste "krav" (kan jeg tillade mig at stille det) er at alle tal er i input felter så kan jeg selv finde ud af at bruge dem når jeg kommer videre.

Se om det her giver lidt inspiration:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.count, .price, #discount, #freight').blur(function () {
                recalc();
            });

            function recalc() {
                var sub1 = 0;
                $('.line').each(function (ix, rw) {
                    var count = $('.count', rw).val();
                    var price = $('.price', rw).val();
                    var itemTotal = count * price;
                    $('.total', rw).val(itemTotal);
                    sub1 += itemTotal;
                });
                var discount = $('#discount').val() * 1;
                var freight = $('#freight').val() * 1;

                var sub2 = sub1 - discount;
                var tax = sub2 * 25 / 100;
                var sub3 = sub2 + tax;
                var total = sub3 + freight;

                $('#sub1').val(sub1);
                $('#sub2').val(sub2);
                $('#tax').val(tax);
                $('#sub3').val(sub3);
                $('#total').val(total);
            }
        });


    </script>
    <style type="text/css">
        .row
        {
            clear: both;
            padding: 3px;
        }
        .item
        {
            width: 300px;
        }
        .itemcount
        {
            width: 100px;
        }
        .itemprice
        {
            width: 100px;
        }
        .itemtotal
        {
            width: 100px;
        }
        .inline
        {
            display: inline;
            float: left;
            margin: 0;
            padding: 0;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="item inline">
            Vare</div>
        <div class="itemcount inline">
            Antal</div>
        <div class="itemprice inline">
            á</div>
        <div class="itemtotal inline">
            Pris</div>
    </div>
    <div class="row line">
        <input type="text" class="item" />
        <input type="text" class="itemcount count" />
        <input type="text" class="itemprice price" />
        <input type="text" class="itemtotal total" />
    </div>
    <div class="row line">
        <input type="text" class="item" />
        <input type="text" class="itemcount count" />
        <input type="text" class="itemprice price" />
        <input type="text" class="itemtotal total" />
    </div>
    <div class="row line">
        <input type="text" class="item" />
        <input type="text" class="itemcount count" />
        <input type="text" class="itemprice price" />
        <input type="text" class="itemtotal total" />
    </div>
    <div class="row">
        <div class="item inline">
             </div>
        <div class="itemcount inline">
             </div>
        <div class="itemprice inline">
            Sub 1</div>
        <input type="text" id="sub1" class="itemtotal" />
    </div>
    <div class="row">
        <div class="item inline">
             </div>
        <div class="itemcount inline">
             </div>
        <div class="itemprice inline">
            Rabat</div>
        <input type="text" id="discount" class="itemtotal" value="0"/>
    </div>
    <div class="row">
        <div class="item inline">
             </div>
        <div class="itemcount inline">
             </div>
        <div class="itemprice inline">
            Sub 2</div>
        <input type="text" id="sub2" class="itemtotal" />
    </div>
    <div class="row">
        <div class="item inline">
             </div>
        <div class="itemcount inline">
             </div>
        <div class="itemprice inline">
            Moms</div>
        <input type="text" id="tax" class="itemtotal" />
    </div>
    <div class="row">
        <div class="item inline">
             </div>
        <div class="itemcount inline">
             </div>
        <div class="itemprice inline">
            Sub 3</div>
        <input type="text" id="sub3" class="itemtotal" value="0" />
    </div>
    <div class="row">
        <div class="item inline">
             </div>
        <div class="itemcount inline">
             </div>
        <div class="itemprice inline">
            Forsendelse</div>
        <input type="text" id="freight" class="itemtotal" value="0" />
    </div>
    <div class="row">
        <div class="item inline">
             </div>
        <div class="itemcount inline">
             </div>
        <div class="itemprice inline">
            Total</div>
        <input type="text" id="total" class="itemtotal" />
    </div>
</body>
</html>

@sherlock: Umiddelbart ser koden ret sær ud. Kunne du ikke prøve at forklare/begrunde den?

Det er forhåbentlig bare jquery der ser sær ud. Det skal man vænne sig til. Og hvis du vil bruge det, er du nødt til at studere det.

En kort gennemgang:

$('.count, .price, #discount, #freight').blur(function () {
                recalc();
            });
Sætter op, at når et felt, som har class=Count eller price, eller id=discount eller freight, så skal recalc() kaldes.



I recalc() er der et loop over hver varelinie (class=line).
På hver linie ganges antal (class=count) med pris (class=Price) og lægges i linietotalen (class=total). Osv osv.


Jeg ved ikke hvad jeg mere kan sige om det. Jeg kan ikke give dig noget du direkte kan bruge. Kun inspiration.

Nej, det er din markup- og CSS-kode, jeg finder mærkelig. Dels mener jeg, der er en del overflødige elementer (de to første DIV i hver row) - og hvorfor både gøre dem inline og float'e dem?

Desuden undrer det mig, du bruger XHTML5 syntaks. Hvorfor - og gør du andet specielt i dén forbindelse?

Det er bare bikset hurtigt sammen for at have de elementer der er nødvendige for koden. Det vigtigste er de klasser der er sat på elementerne, udelukkende for at kunne selecte dem (f.eks. line)

Det undrer mig bare, du skriver XHTML5-kode, når nu jQuery ikke er kompatibel med XHTML (og så kan IE i øvrigt først vise et XHTML-dokument fra og med version 9). Specielt, når der ikke er noget at bruge XHTML til i eksemplet  =)

Det er vist nu, jeg skal indrømme at min indgang til webudvikling er fra kodesiden og at jeg ikke er nået at blive særlig skarp i html-compliance :)

Det kunne være jeg skulle bruge anledningen til at blive skarpere!!!! :)

Det handler ikke kun HTML-compliance, men også DOM-/script-compliance - samt forståelse af content-types, namespaces og markup parsere.

Der findes én grund til at bruge XHTML: At få dokumentet parsed af en XML-parser.

Det kan der være flere grunde til: F.eks. at man ønsker at bruge XML-kode direkte i dokumentet (f.eks. SVG, MathML, el.lign.). Desuden parser en XML-parser et dokument marginalt hurtigere end en HTML-parser. En kode i den længde, du viser ovenfor, vil måske kunne vinde et par microsekunder (micro - ikke milli) i en XML-parser - så det er ikke den væsentligste grund.

Skal dokumentet i nærheden af en XML-parser, skal det serves med en passende MIME (Content-Type): application/xhtml+xml. Serves det som text/html, parses det altid af browserens HTML-parser. En ret væsentlig 'detalje' i denne forbindelse er, at IE til og med version 8 ikke forstod application/xhtml+xml. I stedet for at vise dokumentet tilbød den at downloade det.

Bruger man XML i dokumentet, skal dette naturligvis være i eget, passende namespace. Det betyder også, at der skal bruges DOM Level 3 - altså metoder som document.getElementByIdNS, document.getElementsByTagNameNS, osv.

jQuery understøtter 'kun' DOM Level 2, hvorfor du med jQuery ikke kan tilgå de dele af dokumentet, som ligger i andre namespaces. Derudover bruger jQuery innerHTML til mange operationer, men innerHTML er ikke særlig nøjagtigt defineret/specificeret og er ikke umiddelbar kompatibel med flere namespaces.

Jeg siger tak for lektionen :)

You're welcome  =)

sherlock det er lige der jeg gerne vil hen ;)

Må man være krævende? Tillader mig det så ligger bolden på din halv del :)

Kan man lave det dynamisk så den starter med en "linje" (vare, antal, A og pris) og så har du et plus eller en knap du kan trykke på også kommer der en tom linje mere osv?

Hej.

Undskyld ventetiden.
Først vil jeg sige Ja :)
Når/hvis jeg får tid, vil jeg stykke et eksempel sammen.
Der er dog tonsvis af gode docs om jquery på nettet og du skulle tage at studere det lidt :)

Det går skam nok.


Du ser bare på det når det passer ind ;)


Er startet så småt på at læse dokumentation omkring det, men det tager lidt tid :)

lukker