Søg
Avatar billede lund_dk Praktikant
27. august 2007 - 18:44 Der er 14 kommentarer og
1 løsning

Simpel ordre tabel

Jeg skal bruge et forholdvis simpelt javascript

Jeg har:

<input type="radio" name="product" value="Light"/> <b>Light</b> Kr. 79,00<br/>
<input type="radio" name="product" value="Basis"/> <b>Basis</b> Kr. 129,00<br/>
<input type="radio" name="product" value="Pro"/> <b>Pro</b> Kr. 199,00

som er produktet

<input type="radio" name="payment" value="Creditcard"/> Dankort/Visakort<br/><input type="radio" name="payment" value="Bank"/> Bank overførsel

som er betalingsmetode

Det jeg gerne vil er, når man vælger et af produkterne samt betalingsmetode, skal den opstille en "ordreseddel"


her under er ordre sedlen. Teksten "produkt" skal erstattes med den valgte type produkt, og prisen ud for også.

samme med betalingsoplysninger, hvor dankort eks har et gebyr på 3 kr plus 0.1 % af købsbeløbet.
Bankoverførsel 0 kr.

Og så skal den sammenregne til sidst

<table style="width: 100%;border:1px #9FC4D1 solid;" cellpadding="4" cellspacing="0" >
    <tr>
        <td>Produkt</td>
        <td style="text-align:right;"><b>199,00</b> DKR</td>
    </tr>
    <tr>
        <td>Betalingsgebyr</td>
        <td style="text-align:right"><b>5,00</b> DKR</td>
    </tr>
    <tr>
        <td style="background:#9FC4D1; color:#FFF;">I ALT</td>
        <td style="background:#9FC4D1; color:#FFF; text-align:right;"><b>199,00</b> DKR</td>
    </tr>
</table>


nogen der kan hjælpe mig med det..?
Avatar billede w13 Novice
27. august 2007 - 19:22 #1
Ville det ikke gøre det lettere, hvis felterne var blevet submittet først, og du brugte ASP/PHP?

Ellers kan du gøre det nogenlunde sådan her:
----------------------------------------------------
<script type="text/javascript">
function GenerateProductPrice(val){
  document.getElementById('produktpris').replaceChild(document.getElementBy('produktpris').firstChild,document.createTextNode(val))
}
function GenerateOrder(id,val){
  var stotal=0;
  document.getElementById(id).replaceChild(document.getElementById(id).firstChild,document.createTextNode(val));
  stotal=stotal+parseInt(document.getElementById("produktpris").firstChild.Text);
  stotal=stotal+parseInt(document.getElementById("gebyr").firstChild.Text);
  document.getElementById("total").replaceChild(document.getElementById("total").firstChild,document.createTextNode(stotal));
}
</script>

<input type="radio" name="product" value="Light" onclick="GenerateProductPrice('79,00');GenerateOrder('produkt',this.value)"> <b>Light</b> Kr. 79,00<br>
<input type="radio" name="product" value="Basis" onclick="GenerateProductPrice('129,00');GenerateOrder('produkt',this.value)"> <b>Basis</b> Kr. 129,00<br>
<input type="radio" name="product" value="Pro" onclick="GenerateProductPrice('199,00');GenerateOrder('produkt',this.value)"> <b>Pro</b> Kr. 199,00

<input type="radio" name="payment" value="Creditcard" onclick="document.getElementById('gebyr').replaceChild(document.getElementById('gebyr').firstChild,document.createTextNode('5,00'))"> Dankort/Visakort<br/><input type="radio" name="payment" value="Bank"> Bank overførsel

<table style="width: 100%;border:1px #9FC4D1 solid;" cellpadding="4" cellspacing="0" >
    <tr>
        <td id="produkt">Produkt</td>
        <td style="text-align:right"><b id="produktpris">0,00</b> DKR</td>
    </tr>
    <tr>
        <td>Betalingsgebyr</td>
        <td style="text-align:right"><b id="gebyr">0,00</b> DKR</td>
    </tr>
    <tr>
        <td style="background:#9FC4D1;color:#ffffff">I ALT</td>
        <td style="background:#9FC4D1;color:#ffffff;text-align:right"><b id="total">0,00</b> DKR</td>
    </tr>
</table>
----------------------------------------------------
Det er dog meget utestet!
Avatar billede olebole Juniormester
27. august 2007 - 19:46 #2
<script type="text/JavaScript">
var oProd = {
    "Light": 79.00,
    "Basis": 129.00,
    "Pro": 199.00
};
function calc() {
    var sProd = oDispl = aProd = sPay = aPay = null;
    oDispl = document.getElementById("tblDispl");
    aProd = document.getElementsByName("product");
    for (var i=0,j=aProd.length; i<j; i++) {
        if (aProd[i].checked) {
            sProd = aProd[i].value;
            break;
        }
    }
    aPay = document.getElementsByName("payment");
    for (var i=0,j=aPay.length; i<j; i++) {
        if (aPay[i].checked) {
            sPay = aPay[i].value;
            break;
        }
    }
    nPris = oProd[sProd];
    aTr = oDispl.getElementsByTagName("tr");
    aTd = aTr[0].getElementsByTagName("td");
    aTd[0].firstChild.nodeValue = sProd;
    aTd[1].getElementsByTagName("b")[0].firstChild.nodeValue = (""+nPris).replace(".", ",");
   
    aTd = aTr[1].getElementsByTagName("td");
    aTd[0].firstChild.nodeValue = sPay;
    nCredit = 0;
    if (sPay=="Creditcard") {
        nCredit = (nPris*0.001)+3;
        sCredit = nCredit + "";
        sCredit = sCredit.substr(0, sCredit.indexOf(".")) + "," + sCredit.substr(sCredit.indexOf(".")+1);
        aTd[1].getElementsByTagName("b")[0].firstChild.nodeValue =  sCredit;
    }
    else aTd[1].getElementsByTagName("b")[0].firstChild.nodeValue = "0";
    sPris = "" + Math.round((nPris+nCredit)*100);
    sPris = sPris.substr(0, sPris.length-2) + "," + sPris.substr(sPris.length-2);
    aTr[2].getElementsByTagName("td")[1].getElementsByTagName("b")[0].firstChild.nodeValue = sPris;
}
</script>

<p>
<input type="radio" name="product" value="Light"/> <b>Light</b> Kr. 79,00<br/>
<input type="radio" name="product" value="Basis"/> <b>Basis</b> Kr. 129,00<br/>
<input type="radio" name="product" value="Pro"/> <b>Pro</b> Kr. 199,00
</p>
<p>
<input type="radio" name="payment" value="Creditcard"/> Dankort/Visakort<br/>
<input type="radio" name="payment" value="Bank"/> Bank overførsel<br>
</p>
<p><button onclick="calc()">Beregn</button></p>
<table id="tblDispl" style="width: 100%;border:1px #9FC4D1 solid;" cellpadding="4" cellspacing="0" >
    <tr>
        <td>Produkt</td>
        <td style="text-align:right;"><b>&nbsp;</b> DKR</td>
    </tr>
    <tr>
        <td>Betalingsgebyr</td>
        <td style="text-align:right"><b>&nbsp;</b> DKR</td>
    </tr>
    <tr>
        <td style="background:#9FC4D1; color:#FFF;">I ALT</td>
        <td style="background:#9FC4D1; color:#FFF; text-align:right;"><b>&nbsp;</b> DKR</td>
    </tr>
</table>
Avatar billede olebole Juniormester
27. august 2007 - 19:47 #3
- lidt hurtigt kradset ned ... kan sikkert slankes og gøres mere 'sexy'  ;o)
Avatar billede lund_dk Praktikant
27. august 2007 - 20:17 #4
w13:Jo det ville være meget nemmere, men ønsker brugeren skal have et lidt mere "visuelt" syn af købsprocessen.. ;)

Jeg prøver lige din kode af..
Avatar billede lund_dk Praktikant
27. august 2007 - 20:21 #5
w13: Ah, mangler de 0,001 % af købsbeløbet..

olebole: kan det gøres UDEN at man skal klikke på beregn?
Avatar billede w13 Novice
27. august 2007 - 21:42 #6
Så må det vel bare være:
---------------------------------------
<script type="text/javascript">
function GenerateProductPrice(val){
  document.getElementById('produktpris').replaceChild(document.getElementBy('produktpris').firstChild,document.createTextNode(val))
}
function GenerateOrder(id,val){
  var stotal=0;
  document.getElementById(id).replaceChild(document.getElementById(id).firstChild,document.createTextNode(val));
  stotal=stotal+parseInt(document.getElementById("produktpris").firstChild.Text);
  stotal=stotal+(stotal*0.001);
  stotal=stotal+parseInt(document.getElementById("gebyr").firstChild.Text);
  document.getElementById("total").replaceChild(document.getElementById("total").firstChild,document.createTextNode(stotal));
}
</script>

<input type="radio" name="product" value="Light" onclick="GenerateProductPrice('79,00');GenerateOrder('produkt',this.value)"> <b>Light</b> Kr. 79,00<br>
<input type="radio" name="product" value="Basis" onclick="GenerateProductPrice('129,00');GenerateOrder('produkt',this.value)"> <b>Basis</b> Kr. 129,00<br>
<input type="radio" name="product" value="Pro" onclick="GenerateProductPrice('199,00');GenerateOrder('produkt',this.value)"> <b>Pro</b> Kr. 199,00

<input type="radio" name="payment" value="Creditcard" onclick="document.getElementById('gebyr').replaceChild(document.getElementById('gebyr').firstChild,document.createTextNode('5,00'))"> Dankort/Visakort<br/><input type="radio" name="payment" value="Bank"> Bank overførsel

<table style="width: 100%;border:1px #9FC4D1 solid;" cellpadding="4" cellspacing="0" >
    <tr>
        <td id="produkt">Produkt</td>
        <td style="text-align:right"><b id="produktpris">0,00</b> DKR</td>
    </tr>
    <tr>
        <td>Betalingsgebyr</td>
        <td style="text-align:right"><b id="gebyr">0,00</b> DKR</td>
    </tr>
    <tr>
        <td style="background:#9FC4D1;color:#ffffff">I ALT</td>
        <td style="background:#9FC4D1;color:#ffffff;text-align:right"><b id="total">0,00</b> DKR</td>
    </tr>
</table>
Avatar billede lund_dk Praktikant
27. august 2007 - 23:26 #7
Det virker ikke, får den fejl hvor der står objektet understøtter ikke denne egenskab eller metode..
Avatar billede lund_dk Praktikant
27. august 2007 - 23:27 #8
er denne linie der giver fejlen
  document.getElementById('produktpris').replaceChild(document.getElementBy('produktpris').firstChild,document.createTextNode(val))
Avatar billede w13 Novice
27. august 2007 - 23:36 #9
getElementBy('produktpris') mangler 'id'.
altså:
getElementById('produktpris')
Avatar billede olebole Juniormester
28. august 2007 - 00:42 #10
Læg knappens onclick-handler på de andre elementer. Brug så dette script i stedet:

<script type="text/JavaScript">
var oProd = {
    "Light": 79.00,
    "Basis": 129.00,
    "Pro": 199.00
};
function calc() {
    var sProd = oDispl = aProd = sPay = aPay = null,
    sPris = nPris = aTr = aTd = nCredit = null;
    aProd = document.getElementsByName("product");
    for (var i=0,j=aProd.length; i<j; i++) {
        if (aProd[i].checked) {
            sProd = aProd[i].value;
            break;
        }
    }
    if (!sProd) return;
    aPay = document.getElementsByName("payment");
    for (var i=0,j=aPay.length; i<j; i++) {
        if (aPay[i].checked) {
            sPay = aPay[i].value;
            break;
        }
    }
    if (!sPay) return;
    oDispl = document.getElementById("tblDispl");
    nPris = oProd[sProd];
    aTr = oDispl.getElementsByTagName("tr");
    aTd = aTr[0].getElementsByTagName("td");
    aTd[0].firstChild.nodeValue = sProd;
    aTd[1].getElementsByTagName("b")[0].firstChild.nodeValue = (""+nPris).replace(".", ",");
   
    aTd = aTr[1].getElementsByTagName("td");
    aTd[0].firstChild.nodeValue = sPay;
    nCredit = 0;
    if (sPay=="Creditcard") {
        nCredit = (nPris*0.001)+3;
        sCredit = nCredit + "";
        sCredit = sCredit.substr(0, sCredit.indexOf(".")) + "," + sCredit.substr(sCredit.indexOf(".")+1);
        aTd[1].getElementsByTagName("b")[0].firstChild.nodeValue =  sCredit;
    }
    else aTd[1].getElementsByTagName("b")[0].firstChild.nodeValue = "0";
    sPris = "" + Math.round((nPris+nCredit)*100);
    sPris = sPris.substr(0, sPris.length-2) + "," + sPris.substr(sPris.length-2);
    aTr[2].getElementsByTagName("td")[1].getElementsByTagName("b")[0].firstChild.nodeValue = sPris;
}
</script>
Avatar billede lund_dk Praktikant
28. august 2007 - 08:23 #11
w13: er hermed gjort, men fejlen er stadig den samme..
Avatar billede lund_dk Praktikant
28. august 2007 - 08:26 #12
olebole: dit script virker noget bedre ;)

MEN, den opdaterer ikke prisen når jeg først klikker på produkt..
Den vil først opdatere prisen når jeg har klikket på dankort..

jeg har smidt onclick="calc()" på alle elementerne.
Avatar billede olebole Juniormester
28. august 2007 - 14:21 #13
Ja, for den kan jo ikke vide, hvad prisen er, før den ved, om du vil betale med kort eller via bank ... det er skam med fuldt overlæg, jeg har lavet den sådan  ;o)
Avatar billede lund_dk Praktikant
24. september 2007 - 20:55 #14
Nå, men smid et svar
Avatar billede olebole Juniormester
24. september 2007 - 21:41 #15
Svar  :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:15 PHP Html Af Asky i Programmeringsværktøjer
I går 11:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »