Hej, det här blir, om jag inte minns helt fel, min första post här på forumet! Jag vill inte tjata för mkt på Erik! :OO
Nu till min fråga. Jag håller på och utvecklar ett beställningsformulär till en hemsida jag gör. I det har jag fyra stycken olika "antal-fält"... Där besökaren skriver in det antal av varje produkt hon vill köpa. Jag skulle vilja ha ett script som räknar ihop antalen och skapa en liten formel.
Det är alltså 4st produkter som skall säljas. Och grejen är att man får mängdrabatt när man köper flera. Så här kan vi säga att det ser ut:
1st 99kr
2st 179
3st 249
4st 200kr
och om man köper t.ex 5st kostar det totalt 250:-, 6st 300kr osv osv. Ja ni hajjar. Inte smarta priser, men det är bara ett exempel.
Under tiden dom skriver in vill jag att det ska uppdateras under formuläret, där det ska stå "Totalt att betala: 179:-" osv osv osv.
Hur jag gör detta vet jag inte, men jag hoppas på god hjälp från er =)
Jag har hört från Big E att det skall göras med Javascript och inte ASP. Men hur? =)
<html>
<head>
<script type="text/javascript">
<!--
function ber()
{
var antal1 = eval(document.test2.f1.value)
var antal2 = eval(document.test2.f2.value)
var antal3 = eval(document.test2.f3.value)
var antal4 = eval(document.test2.f4.value)
var prod = antal1 + antal2 + antal3 + antal4
if (prod == 1) {
var total = 35
}
else if (prod == 2) {
var total = 49
}
else if (prod == 3) {
var total = 79
}
else if (prod == 4) {
var total = 99
}
else if (prod == 5) {
var total = 119
}
document.test2.qty.value = total;
}
-->
</script>
</head>
<body>
<form name="test2">
ett <input type="text" size="8" name="f1" onKeyPress="ber();">
ett <input type="text" size="8" name="f2" onKeyPress="ber();">
ett <input type="text" size="8" name="f3" onKeyPress="ber();">
ett <input type="text" size="8" name="f4" onKeyPress="ber();">
<br>
<br>
<a href="javascript:ber();">räkna</a>
<input type="text" size="8" name="qty" value="0">
</form>
</body
</html>
Problemet är att den inte funkar när man inte skriver in ett tal i rutorna.. Hur ska man skriva så att man kan kontroller så att det skrivs in ett tal eller inte? Liksom, scriptet ska inte säga till användaren att hon ska skriva in en nolla t.ex utan om det inte är inskrivet något, så tar scriptet det som en nolla. Hur gör man detta?
Notera: Jag vill att scriptet ska uppdateras sig i Realtime!
Du ska inte använda eval på det sättet. eval gör så att användaren kan skriva egen javascript-kod i rutan som körs när formuläret kontrolleras. Inte för att en användare inte kan göra detta ändå genom t ex adressraden, men det är ändå liksom fel sätt.
Du ska använda parseInt för detta. Sedan kan du använda funktionen isNan(talet) som returnerar true om variabeln inte innehåller ett giltigt tal.
Jag håller på med lite kod nu, men jag vill varna för att ett pris som du har räknat ut med javascript för den färdiga ordern, eftersom det är lätt att förfalska. Den slutliga uträkningen ska alltid göras på servern!
nitro, jag är jättetacksam för din hjälp! Och även tacksam för att du varnar mig. Dock kommer min verksamhet vara relativt liten så riksen för förfalskningar (och att dom går igenom) är tämligen liten. Men hur menar du egentligen emd att man kan förfalska? Menar du typ att någon skulle kunna skriva in en annan summa och sen hävda att "ja det stod ju att det kosta så på sidan"?
Alla beställningar kommer till mig via mail och godkänns manuellt.
Under tiden jag väntar på dig så försöker jag testa lite själv. Det är roligt! Jag bytte ut eval mot parseInt som du tipsade om. Det verkar fungera bra. Det enda problemet som är nu är att den inte räknar helt korrekt.
<html>
<head>
<script type="text/javascript">
<!--
function ber()
{
var antal1 = parseInt(document.test2.f1.value)
var antal2 = parseInt(document.test2.f2.value)
var antal3 = parseInt (document.test2.f3.value)
var antal4 = parseInt (document.test2.f4.value)
var prod = antal1 + antal2 + antal3 + antal4
if (prod == 1) { var total = 35 }
else if (prod == 2) { var total = 49 }
else if (prod == 3) { var total = 79 }
else if (prod == 4) { var total = 99 }
else if (prod == 5) { var total = 119 }
else if (prod == 0) { var total = 0 }
document.test2.totalt.value = total;
}
-->
</script>
</head>
<body>
<form name="test2">
<input type="text" size="2" name="f1" onKeyPress="ber();" value="0"><br>
<input type="text" size="2" name="f2" onKeyPress="ber();" value="0"><br>
<input type="text" size="2" name="f3" onKeyPress="ber();" value="0"><br>
<input type="text" size="2" name="f4" onKeyPress="ber();" value="0"><br>
<br>
<br>
<b>Totalt att betala:</b> <input type="text" size="8" name="totalt" value="0" style="border:0px;>
</form>
</body
</html>
Förlåt att jag låter lite otrevlig, men även om du går igenom alla beställningar manuellt, så är jag skolad så att man ska göra saker rätt från början, och inte lämna några säkerhetshål öppna.
Detta är en halvhafsig lösning som inte tillåter kunden att köpa fler än 5 varor. Det gjorde inte din lösning heller. Fast detta kan du såklart enkelt åtgärda genom att ligga till fler värden i pris-arrayen.
function ber()
{
var sum = 0;
var priser = [35, 49, 79, 99, 119]; // En så kallad array med priser.
for (var i=1; i<=4; i++){ / Gå igenom nummer 1 till 4
// ["f" + i] väljer ut namnet en viss input-ruta, tex f2, beroende på i.
var tempnumber = parseInt(document.test2["f" + i].value);
if (!document.test2["f" + i].value=="")// Tom ruta ...
tempnumber=0; // Ska tolkas som 0 och inte fel
if (isNaN(tempnumber)){
alert("Ruta " + i + " är fel ifylld!");
return; // Avsluta funtionen
}else{
sum += tempnumber; // Lägg till numret till summan
}
}
if (sum<priser.length)
document.test2.qty.value = priser[sum];
else
alert("Du kan inte köpa fler varor än " + priser.length + " st!")
}
Konstigt nog får jag det inte att fungera med den koden.
<html>
<head>
<script type="text/javascript">
<!--
function ber()
{
var sum = 0;
var priser = [35, 49, 79, 99, 119]; // En så kallad array med priser.
for (var i=1; i<=4; i++){ / Gå igenom nummer 1 till 4
// ["f" + i] väljer ut namnet en viss input-ruta, tex f2, beroende på i.
var tempnumber = parseInt(document.test2["f" + i].value);
if (!document.test2["f" + i].value=="")// Tom ruta ...
tempnumber=0; // Ska tolkas som 0 och inte fel
if (isNaN(tempnumber)){
alert("Ruta " + i + " är fel ifylld!");
return; // Avsluta funtionen
}else{
sum += tempnumber; // Lägg till numret till summan
}
}
if (sum<priser.length)
document.test2.totalt.value = priser[sum];
else
alert("Du kan inte köpa fler varor än " + priser.length + " st!")
}
-->
</script>
</head>
<body>
<form name="test2">
<input type="text" size="2" name="f1" onKeyPress="ber();" value="0"><br>
<input type="text" size="2" name="f2" onKeyPress="ber();" value="0"><br>
<input type="text" size="2" name="f3" onKeyPress="ber();" value="0"><br>
<input type="text" size="2" name="f4" onKeyPress="ber();" value="0"><br>
<br>
<br>
<b>Totalt att betala:</b> <input type="text" size="8" name="totalt" value="0" style="border:0px;>
</form>
</body
</html>
@nders, mmm, nu funkade det lite bättre. Fast den räknar ändå inte ut korrekt. Den klarar bara av att visa pris för 1st = 35:-.... Och den uppdaterar sig dåligt =/
<html>
<head>
<script type="text/javascript">
<!--
function ber()
{
var sum = 0;
var priser = [0, 35, 49, 79, 99, 119]; // En så kallad array med priser.
var slutpris = "Fel!"
for (var i=1; i<=4; i++){ // Gå igenom nummer 1 till 4
// ["f" + i] väljer ut namnet en viss input-ruta, tex f2, beroende på i.
var tempnumber = parseInt(document.test2["f" + i].value);
if (document.test2["f" + i].value=="")// Tom ruta ...
tempnumber=0; // Ska tolkas som 0 och inte fel
if (isNaN(tempnumber)){
document.getElementById("vstatus").innerHTML="Ruta " + i + " är fel ifylld!";
document.test2.totalt.value = slutpris;
return; // Avsluta funtionen
}else{
sum += tempnumber; // Lägg till numret till summan
}
}
if (sum<0)
document.getElementById("vstatus").innerHTML="Negativt värde!";
else if (sum==0)
document.getElementById("vstatus").innerHTML="Vänlig fyll i en beställning på minst en vara!";
else if (sum<priser.length){
slutpris = priser[sum];
document.getElementById("vstatus").innerHTML="Dina ifyllda värden är ok!!";
}else
document.getElementById("vstatus").innerHTML="Du kan inte köpa fler varor än " + (priser.length-1) + " st!";
document.test2.totalt.value = slutpris;
}
-->
</script>
</head>
<body>
<form name="test2">
<input type="text" size="2" name="f1" onkeyup="ber();" value="0"><br>
<input type="text" size="2" name="f2" onkeyup="ber();" value="0"><br>
<input type="text" size="2" name="f3" onkeyup="ber();" value="0"><br>
<input type="text" size="2" name="f4" onkeyup="ber();" value="0"><br>
<br>
<br>
<b>Totalt att betala:</b> <input disabled="disabled" type="text" size="8" name="totalt" value="0" style="border:0px;">
<span id="vstatus"></span>
</form>
</body
</html>
