7 svar · 368 visningar · startad av AboO
Jag ska göra en "webbshop" eller liknande.
Då vill jag att när man väljer produkter ska priset automatiskt skrivas ut på sidan, går det att göra så med javascript?
Sen skulle jag vilja att när man fyller i antalet så multipliceras det automatiskt med priset.
Är det lätt att fixa? Kan inte så jättemycket javascript..
Svaret är "Ja" på båda frågorna. Hur ser HTML-koden ut för formuläret där bl a dropdownmenyn ligger?
Jag kom på att en dropdown lista blir lite dumt om man vill ha flera produkter. Så därför gjorde jag om lite, du kanske kan hjälpa mig ändå. Formuläret ser ut så här nu:
<form name="shop" method="post" action="">
Produkt 1
<input name="antal1" type="text" value="0" size="10">
<br>
Produkt 2
<input name="antal2" type="text" value="0" size="10">
<br>
Produkt 3
<input name="antal3" type="text" value="0" size="10">
<br>
Produkt 4
<input name="antal4" type="text" value="0" size="10">
<br>
<br>
<input type="submit" name="Submit" value="Beräkna pris">
</form>
<form name="shop" method="post" action="">
Produkt 1 á-pris 100:-
<input name="antal1" type="text" value="0" size="10" onkeyup="updatePrice(this,1,100);" onkeypress="updatePrice(this,1,100);"> <span id="pris1"></span>
<br>
Produkt 2 á-pris 150:-
<input name="antal2" type="text" value="0" size="10" onkeyup="updatePrice(this,2,150);" onkeypress="updatePrice(this,2,150);"> <span id="pris2"></span>
<br>
Produkt 3 á-pris 200:-
<input name="antal3" type="text" value="0" size="10" onkeyup="updatePrice(this,3,200);" onkeypress="updatePrice(this,3,200);"> <span id="pris3"></span>
<br>
Produkt 4 á-pris 250:-
<input name="antal4" type="text" value="0" size="10" onkeyup="updatePrice(this,4,250);" onkeypress="updatePrice(this,4,250);"> <span id="pris4"></span>
<br>
<br>
<input type="submit" name="Submit" value="Beräkna pris">
</form>
<script type="text/javascript">
function updatePrice(obj,n,price){
if(obj.value!=parseInt(obj.value)){ alert("Fel antal"); obj.value=0; }
document.getElementById("pris"+n).innerHTML=(parseInt(obj.value)>0)?(parseInt(obj.value)*price)+":-":"";
}
</script>
... att bygga vidare på.
Tack. Det där såg ut nästan precis som jag ville ha det.
Det enda jag saknar är någonstans där det står totala priset, jag satt och pillade själv men fick inte riktigt till det.
Så här kan du summera:
<form name="shop" method="post" action="">
Produkt 1 á-pris 100:-
<input name="antal1" type="text" value="0" size="10" onkeyup="updatePrice(this,1,100);" onkeypress="updatePrice(this,1,100);"> <span id="pris1"></span>
<br>
Produkt 2 á-pris 150:-
<input name="antal2" type="text" value="0" size="10" onkeyup="updatePrice(this,2,150);" onkeypress="updatePrice(this,2,150);"> <span id="pris2"></span>
<br>
Produkt 3 á-pris 200:-
<input name="antal3" type="text" value="0" size="10" onkeyup="updatePrice(this,3,200);" onkeypress="updatePrice(this,3,200);"> <span id="pris3"></span>
<br>
Produkt 4 á-pris 250:-
<input name="antal4" type="text" value="0" size="10" onkeyup="updatePrice(this,4,250);" onkeypress="updatePrice(this,4,250);"> <span id="pris4"></span>
<br>
Summa: <span id="summa">0:-</span>
<br>
<input type="submit" name="Submit" value="Beställ">
</form>
<script type="text/javascript">
var total={};
function updatePrice(obj,n,price){
if(obj.value&&obj.value!=parseInt(obj.value)){ alert("Fel antal"); obj.value=0; }
var sum=0;
total[n]=(parseInt(obj.value)>0)?(parseInt(obj.value)*price):"";
document.getElementById("pris"+n).innerHTML=(total[n])?total[n]+":-":"";
for(var i in total){ sum+=total[i]; }
document.getElementById("summa").innerHTML=sum+":-";
}
</script>
En sista grej nu sen är jag helt nöjd Går det att skriva ut totala priset i ett dolt text-fält också?
Med hidden-fält:
<form name="shop" method="post" action="">
<input type="text" name="total">
Produkt 1 á-pris 100:-
<input name="antal1" type="text" value="0" size="10" onkeyup="updatePrice(this,1,100);" onkeypress="updatePrice(this,1,100);"> <span id="pris1"></span>
<br>
Produkt 2 á-pris 150:-
<input name="antal2" type="text" value="0" size="10" onkeyup="updatePrice(this,2,150);" onkeypress="updatePrice(this,2,150);"> <span id="pris2"></span>
<br>
Produkt 3 á-pris 200:-
<input name="antal3" type="text" value="0" size="10" onkeyup="updatePrice(this,3,200);" onkeypress="updatePrice(this,3,200);"> <span id="pris3"></span>
<br>
Produkt 4 á-pris 250:-
<input name="antal4" type="text" value="0" size="10" onkeyup="updatePrice(this,4,250);" onkeypress="updatePrice(this,4,250);"> <span id="pris4"></span>
<br>
Summa: <span id="summa">0:-</span>
<br>
<input type="submit" name="Submit" value="Beställ">
</form>
<script type="text/javascript">
var total={};
function updatePrice(obj,n,price){
if(obj.value&&obj.value!=parseInt(obj.value)){ alert("Fel antal"); obj.value=0; }
var sum=0;
total[n]=(parseInt(obj.value)>0)?(parseInt(obj.value)*price):"";
document.getElementById("pris"+n).innerHTML=(total[n])?total[n]+":-":"";
for(var i in total){ sum+=total[i]; }
document.getElementById("summa").innerHTML=sum+":-";
obj.form.total.value=sum;
}
</script>