--- title: "Beräkna pris beroende på värde i textruta?" type: "forum-thread" url: "https://www.webforum.nu/amne/javascript/185382-beräkna-pris-beroende-på-värde-i-textruta" topic: "JavaScript" topic_url: "https://www.webforum.nu/amne/javascript" author: "streetrobban" published: "2010-11-25T18:43:14.000Z" updated: "2010-12-10T10:13:20.000Z" replies: 25 views: 1631 page: 1 pages: 2 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/185382-beräkna-pris-beroende-på-värde-i-textruta" --- # Beräkna pris beroende på värde i textruta? _Sida 1 av 2._ ## #1 — streetrobban, 2010-11-25T18:43Z Hej, 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. Kan någon hjälpa mig med detta? Tack på förhand. Permalänk: https://www.webforum.nu/p/185382 ## #2 — metalboy, 2010-11-25T19:05Z ``` Antal:
Pris/st: 100 kronor
Totalt: ``` Permalänk: https://www.webforum.nu/p/2263434 ## #3 — streetrobban, 2010-11-25T19:27Z Wow tack för ett snabbt och korrekt svar metalboy :) Följfråga: Hur får jag in värdet från \\ i en textruta? Permalänk: https://www.webforum.nu/p/2263437 ## #4 — metalboy, 2010-11-25T19:34Z Med textruta, menar du \ eller \ ? Textarea: Byt ut \\ mot \

\</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;

Permalänk: https://www.webforum.nu/p/2263439

## #5 — streetrobban, 2010-11-26T08:40Z

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.

Permalänk: https://www.webforum.nu/p/2263451

## #6 — voigtann1, 2010-11-26T09:37Z

Hur ser din HTML och javascripts kod ut just nu?

Permalänk: https://www.webforum.nu/p/2263452

## #7 — streetrobban, 2010-11-26T10:13Z

Ja, det glömde jag ju skriva in  :)

Script som räknar ihop pris-rutorna.

```php
<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.

```php
<script type="text/javascript">
function beraknaPris1(Count1) {
    if (isNaN(Count1)) return;
    var pris = 120;
	document.getElementById('Product1:1').value = Count1 * pris;
}
</script>
```

Textruta för att skriva in antal.

```php
echo "<input type=\"text\" name=\"Count$i\" value=\"0\" size=\"2\" onBlur=\"beraknaPris$i(this.value)\">";
```

Textruta med priset på produkten som hämtas från ovan script.

```php
echo "<td><input type=\"text\" id=\"Product$i:1\" name=\"Product$i:1\" value=\"0\" onChange=\"sumGroup(this.name)\" size=\"5\"></td>";
```

Textruta för att räkna ut totalpriset.

```php
<input type="text" name="sum1" value="" size="6" onChange="sumGroup(this.name)">
```

Permalänk: https://www.webforum.nu/p/2263454

## #8 — voigtann1, 2010-11-26T10:18Z

kan du ge en genererad html kod? och vad som är "par" med varandra?

Permalänk: https://www.webforum.nu/p/2263455

## #9 — streetrobban, 2010-11-26T10:42Z

Ok jag ska försöka förklara.

Alla produkter visas på en gång. Och då väljer man antal i nedanstående ruta:

```
<input type="text" name="Count1" value="0" size="2" onBlur="beraknaPris1(this.value)">
```

Sedan uppdateras prisrutan för varje produkt beroende på antal med nedanstående kod:

```
<script type="text/javascript"> 
function beraknaPris1(Count1) {
    if (isNaN(Count1)) return;
    var pris = 120;
	document.getElementById('Product1:1').value = Count1 * pris;
}
</script>
```

När priset är beräknat beroende på antal så fylls automatiskt prisrutan i, detta är prisrutan:

```
<input type="text" id="Product1:1" name="Product1:1" value="0" onChange="sumGroup(this.name)" size="5">
```

Då har jag ett script som ska hämta allt i prisrutorna och lägga ihop den summan i en ny ruta som ser ut så här:

```
<input type="text" name="sum1" value="" size="6" onChange="sumGroup(this.name)">
```

Scriptet som räknar ut totalpriset ser ut så här:

```
<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.

Permalänk: https://www.webforum.nu/p/2263457

## #10 — voigtann1, 2010-11-26T10:57Z

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?

Permalänk: https://www.webforum.nu/p/2263459

## #11 — streetrobban, 2010-11-26T11:55Z

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.

Permalänk: https://www.webforum.nu/p/2263461

## #12 — voigtann1, 2010-11-26T12:20Z

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"?

Permalänk: https://www.webforum.nu/p/2263464

## #13 — streetrobban, 2010-11-26T12:25Z

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.

Permalänk: https://www.webforum.nu/p/2263466

## #14 — voigtann1, 2010-11-26T12:39Z

<http://voigt.se/sandbox/wf/streetrobban/cart.html> demo med jquery, är det detta du är ute efter?

Permalänk: https://www.webforum.nu/p/2263468

## #15 — streetrobban, 2010-11-26T13:47Z

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?

Permalänk: https://www.webforum.nu/p/2263480

## #16 — voigtann1, 2010-11-26T13:56Z

du behöver köra jquery sen är det nog bara att anpassar om jquery koden, hur ser din genererade html-tabell ut?

Permalänk: https://www.webforum.nu/p/2263482

## #17 — streetrobban, 2010-11-26T14:15Z

Tabellen ser ut såhär:

```
<table border="1" cellspacing="0" cellpadding="2">
<tr>
	<td>
	<b>Produktnamn</b>
	</td>
	<td>
	<b>Antal</b>
	</td>
	<td>
	<b>Pris</b>
	</td>
	<td>
	<b>Radpris</b>
	</td>
</td>
<tr>
	<td>
	Produktens namn
	</td>
	<td>
	<input type="text" name="Count" value="8" size="2">
	</td>
	<td>
	<input type="text" id="Product" name="Product" value="100" size="5" disabled="true">
	</td>
	<td>
	<input type="text" name="sum" value="" size="6">
	</td>
</tr>
<tr>
	<td colspan="4">
	Betala: <div id="totalSum"></div>
	</td>
</tr>
</table>
```

Permalänk: https://www.webforum.nu/p/2263483

## #18 — voigtann1, 2010-11-26T14:45Z

kör:

```
p = $(this).parent().parent()
```

istället, eller:

```
p = $(this).closest("tr")
```

Permalänk: https://www.webforum.nu/p/2263484

## #19 — streetrobban, 2010-11-26T15:27Z

Det funkade inte. Så här ser hela tabellen ut.

```
    <table width="760" border="1" cellspacing="2" cellpadding="0"> 
		<tr> 
			<td> 
			<b>Namn</b> 
			</td> 
			<td> 
			<b>Produkt</b> 
			</td> 
			<td> 
			<b>Antal</b> 
			</td> 
			<td> 
			<b>Radpris</b> 
			</td> 
		</tr> 
 
		<form id="Products" name="Products"> 
	
		<tr>
			<td>
			Badkarsblandare
			</td>
			<td>
			<input type="text" name="Count" value="0" size="2">
			</td>
			<td>
			<input type="text" id="Product" name="Product" value="1250" size="5" disabled="true">
			</td>
			<td>
			<input type="text" name="sum" value="" size="6">
			</td>
		</tr>
		<tr>
			<td>
			Badkar IFÖ Pro 1600
			</td>
			<td>
			<input type="text" name="Count" value="0" size="2">
			</td>
			<td>
			<input type="text" id="Product" name="Product" value="3800" size="5" disabled="true">
			</td>
			<td>
			<input type="text" name="sum" value="" size="6">
			</td>
		</tr>	
		</table> 
	
		<div id="totalSum"></div> 
		
		<script type="text/javascript"> 
		var inputs = $(".product input");				
		inputs.change(function()
		{
			var		
			p = $(this).closest("tr"), //.product, "grouping inputs"
			price = p.find("input[name^='Product']").val(), // find all inputs that starts with Prouduct
			count = p.find("input[name^='Count']").val(),// find all inputs that starts with Count
			sum = p.find("input[name^='sum']").val(count*price), //// find all inputs that starts with sum
		
			allSum = inputs.filter("[name^='sum']"),
		
			totalSum = $("#totalSum"),
		
			val = 0;
			
			for(var i=0,l=allSum.length;i<l;i++)
			{
				val+=+($(allSum[i]).val());
			}
		
			totalSum.text(val); //Display total sum.
		}).change();
		</script> 
		
		</form>
```

Permalänk: https://www.webforum.nu/p/2263488

## #20 — voigtann1, 2010-11-26T15:31Z

Har du laddat jquery?

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.

Permalänk: https://www.webforum.nu/p/2263491

---

Tråden på webben: https://www.webforum.nu/amne/javascript/185382-beräkna-pris-beroende-på-värde-i-textruta  
Nästa sida: https://www.webforum.nu/amne/javascript/185382-beräkna-pris-beroende-på-värde-i-textruta/page2.md