Avatar billede codeadmin Nybegynder
13. marts 2013 - 11:54 Der er 25 kommentarer og
1 løsning

input felter, udregning og submit

Hej.

Er igang med at lave et faktura system (php, mysql og html).

Er kommet til den del hvor jeg skal oprette en faktura og i den forbindelse skal der jo være en kunde osv - den del har jeg selv styr på.
MEEN felterne hvor man kan taste et produkt, stk, pris også lave en udregning hvad de ting giver kan jeg ikke lave i PHP da det skal vær sådan at den regner det ud "live" eller automatisk om man vil.

Vil også gerne have subtotal, moms, rabat og total felt.

Derudover har jeg set man kan lave en javascript som dynamisk kan tilføje en ny linje med produkter, stk og pris.


Nogen der har mod på at bikse noget som ligner ovenstående sammen. Er helt på ude bane i javascript så og sige hvilke funktioner som skal benyttes er ikke noget jeg kan bruge :(
Avatar billede codeadmin Nybegynder
13. marts 2013 - 11:55 #1
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.
Avatar billede keysersoze Guru
13. marts 2013 - 12:13 #2
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?
Avatar billede codeadmin Nybegynder
13. marts 2013 - 12:17 #3
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.
Avatar billede keysersoze Guru
13. marts 2013 - 15:03 #4
så vil jeg sige held og lykke med din tro (:
Avatar billede sherlock Nybegynder
13. marts 2013 - 16:57 #5
Jeg har lige lavet noget helt fra bunden og jeg vil mene at indbøbskurv/ordrebekræftelse/faktura har taget 2 - 3 dage.
Avatar billede olebole Juniormester
13. marts 2013 - 17:14 #6
<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>
Avatar billede codeadmin Nybegynder
13. marts 2013 - 18:46 #7
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.
Avatar billede olebole Juniormester
13. marts 2013 - 19:22 #8
@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?  =)
Avatar billede codeadmin Nybegynder
13. marts 2013 - 19:25 #9
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?
Avatar billede olebole Juniormester
13. marts 2013 - 19:36 #10
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
Avatar billede sherlock Nybegynder
13. marts 2013 - 21:35 #11
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.
Avatar billede codeadmin Nybegynder
13. marts 2013 - 21:53 #12
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.
Avatar billede sherlock Nybegynder
14. marts 2013 - 10:15 #13
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>
Avatar billede olebole Juniormester
14. marts 2013 - 14:23 #14
@sherlock: Umiddelbart ser koden ret sær ud. Kunne du ikke prøve at forklare/begrunde den?
Avatar billede sherlock Nybegynder
14. marts 2013 - 14:49 #15
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.
Avatar billede olebole Juniormester
14. marts 2013 - 14:57 #16
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?
Avatar billede sherlock Nybegynder
14. marts 2013 - 15:01 #17
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)
Avatar billede olebole Juniormester
14. marts 2013 - 15:51 #18
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  =)
Avatar billede sherlock Nybegynder
14. marts 2013 - 16:46 #19
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!!!! :)
Avatar billede olebole Juniormester
14. marts 2013 - 18:01 #20
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.
Avatar billede sherlock Nybegynder
15. marts 2013 - 13:04 #21
Jeg siger tak for lektionen :)
Avatar billede olebole Juniormester
15. marts 2013 - 13:38 #22
You're welcome  =)
Avatar billede codeadmin Nybegynder
15. marts 2013 - 16:00 #23
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?
Avatar billede sherlock Nybegynder
20. marts 2013 - 14:48 #24
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 :)
Avatar billede codeadmin Nybegynder
20. marts 2013 - 16:58 #25
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 :)
Avatar billede codeadmin Nybegynder
23. april 2013 - 19:05 #26
lukker
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester