webForumDet fria alternativet

Beräkna pris beroende på värde i textruta?

JavaScript

25 svar · 1 619 visningar · startad av streetrobban · sida 2 av 2

Frågan, av streetrobban

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 prise

Läs frågan i sin helhet →
Medlem sedan jan. 20011 140 inlägg
#21

Yes, jag har laddat jQuery'n.

Vad menar du med klasser på TR?

Jag har flyttat ut <form> nu från tabellen, men hela produkttabellen ligger i en annan tabell. Jag är även gjort så Product får unika namn.

Hur ser detta ut?

		<form id="Products" name="Products"> 

    <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> 
	
		<tr>
			<td>
			Badkarsblandare
			</td>
			<td>
			<input type="text" name="Count" value="0" size="2">
			</td>
			<td>
			<input type="text" id="Product1" name="Product1" 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="Product2" name="Product2" 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>
Medlem sedan juni 20019 519 inlägg
#22

En css klass class="namn" jag kommer inte åt källkoden, men kolla vad mina div:ar och sätt samma klass på dina tr

Medlem sedan juni 20019 519 inlägg
#23

kunde inte kolla på källkoden på tåget, men tr skall ha class="product" annars kommer jquery inte kunna hitta elementen för att binda eventen på dom.

Medlem sedan jan. 20011 140 inlägg
#24

Yes, efter lite frånvaro är jag nu tillbaka i tråden :) Din kod funkade perfekt! Stort tack för hjälpen.

Jag undrar dock om man kan få in en sak till. Hur gör jag för att få in en droplista med ja/nej för val av frakt. Om man väljer ja så ska totalsumman uppdateras med t.ex. 500 kr. Detta ska bara finnas med på ett ställe, inte för varje produkt.

Medlem sedan jan. 20011 140 inlägg
#25

Dubbelpost.

Medlem sedan juni 20019 519 inlägg
#26

gjorde en uppdatering på http://voigt.se/sandbox/wf/streetrobban/cart.html är det detta du är ute efter?

273 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
131 ms — deklarationer (db)
0 ms — hämta statistik (cache)
139 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)