Jag håller på med ett formulär där användare kan beställa produkter. Likt en varukorg på en webbshop.
Bara det att alla produkter (6 st) visas direkt och användaren får välja antal i en textruta. Jag vill sedan att en text bredvid textrutan ska beräkna priset (baserat på produktens pris x antal) direkt. Så att man klicka i rutan, skriva in antal och klickar utanför rutan så uppdateras priset.
Med textruta, menar du <textarea> eller <input type="text"> ?
Textarea:
Byt ut <span id="totalt"></span> mot <textarea id="totalt"></textarea>.
Input:
Byt ut <span id="totalt"></span> mot <input type="text" id="totalt" /> samt ändra i JavaScriptet till document.getElementById('totalt').value = antal*pris;
Tack metalboy din kod fungerade perfekt! Det dök dock upp en till följdfråga som inte har något med din kod att göra egentligen. Men du kanske kan hjälpa mig ändå.
Med din kod väljer jag för varje produkt antal i en textruta så skrivs priset ut i en annan textruta beroende på antal.
Textrutorna med priset i ska läggas ihop och skrivas ut i en annan textruta. Jag har hittat ett script som gör detta.
Problemet är bara att scriptet för totalpriset inte reagerar på texten i prisrutorna som kommer automatiskt när man ändrar antalet. Om man sätter antal 2, så priset blir 200 så uppdateras inte rutan för totalpris. Men tar man bort 200 och skriver 200 själv istället så uppdateras den.
Jag kan inte JavaScript som du märker, men jag har testat att ändra event handler för totalpris-rutan, men det funkar inte.
<script language="javascript">
function sumGroup(thisElem)
{
var f = document.Products;
var group = thisElem.substring(thisElem.lastIndexOf(':') + 1);
var num_elements = f.elements.length;
var name;
var str = '';
var sum = 0;
for(element_num = 0; element_num < num_elements; element_num++)
{
name = f.elements[element_num].name;
elemGroup = name.substring(name.lastIndexOf(':') + 1);
if (group == elemGroup)
{
sum += parseFloat(f[name].value);
}
}
f["sum" + group].value = sum;
}
</script>
Scriptet som räknar ut priset beroende på antal.
<script type="text/javascript">
function beraknaPris1(Count1) {
if (isNaN(Count1)) return;
var pris = 120;
document.getElementById('Product1:1').value = Count1 * pris;
}
</script>
<script language="javascript">
function sumGroup(thisElem)
{
var f = document.Products;
var group = thisElem.substring(thisElem.lastIndexOf(':') + 1);
var num_elements = f.elements.length;
var name;
var str = '';
var sum = 0;
for(element_num = 0; element_num < num_elements; element_num++)
{
name = f.elements[element_num].name;
elemGroup = name.substring(name.lastIndexOf(':') + 1);
if (group == elemGroup)
{
sum += parseFloat(f[name].value);
}
}
f["sum" + group].value = sum;
}
</script>
Och nu är problemet att rutan för totalpris inte uppdateras automatiskt när prisrutorna för produkterna uppdateras. Utan man måste manuellt gå in i prisrutorna och skriva ett värde (även om det är samma värde som redan står där) för att totalpris-rutan ska uppdateras.
leta upp elementet och triggar blur-eventet för att få den att räkna om det, mitt råd är: kolla jquery eller annat javascripts ramverk som hjälper dig med events, för det kommer bli betydligt enklare att jobba med events.
Jag måste säga, bli lite förvirrad över koden, jag gissar att du ha ett fält för pris och ett för antal på x-antal produkter? När man ändra något av dessa fält så vill du att ett värde uppdateras?
Ja det finns 3 fält. ANTAL, PRIS och TOTALPRIS. När man uppdaterar ANTAL så uppdateras PRIS automatiskt. Och rutan TOTALPRIS räknar ju ut den sammanlagda summan av alla PRIS-rutor.
När man uppdaterar ANTAL så uppdateras PRIS direkt så att priset stämmer med antalet produkter. Men jag vill även att TOTALPRIS ska uppdateras automatiskt eftersom PRIS uppdateras.
Jag gissar att det är någon typ av varukorg, Antal, à pris och total pris per "produkt"? Eller är det Antal à pris * antal produkt "rader" och sen visar det totala priset? Få inte riktigt till det med de namn du har på fälten. Och jag gissar att TOTALPRIS endast är "readonly"?
Ja det är en typ av varukorg där x antal produkter visas. Sedan kan man bestämma antal för varje produkt. Varje produkt har antal och pris. Sedan är det en readyonly-ruta med totalpriset för alla produkter. Totalpris är enligt koden ovan inte readonly, men den ska vara det i slutändan.
Ja precis, det är exakt så. Du förstod mig även fast jag var kass på att förklara :) Jag får dock inte riktigt till det på min sida, kan det bero på att jag använder tabeller?
Du har inte några klasser på dina tr, du har form inne i en tabell, skriptet kommer inte köras alls som det är just nu, sen har du id="Product" på rätt många ställe, kommer aldrig att fungera, ID måste vara unikt, vilket det inte är i din kod.
Sen javascript: { bör vara på samma rad, och inte på en egen rad.
262 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
