Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Percentage calculation in a list

Status
Not open for further replies.
Flacker0763

Flacker0763

IS-IT--Management
Jun 15, 2009
13
NO
Hi!
This is my first post here. I'm new to javascript, but have done a lot of html/asp programming. If I post this on the wrong forum, I'm sorry.

My case is like this:
I'm making a pricing tool for our intraweb. This tool gets our SKUs from an sql-server.
I then have the cost for all SKUs, and an input field for all SKUs, and an empty input field right after.
What I need is to get the difference, in percentage, between the number written in the input-field and the cost. I though the onChange event would handle this, since I really don't want to load the whole page to update this field.

Is there an easy way to make a function doing this, wich can be called from all lines with SKUs?
I have managed to do this with 3 SKUs, but this required 3 separate functions.

The SKU-listing can be from 30 to over 100 SKUs, depending on the cathegory chosen.


/Geir
 
Sort by date Sort by votes
I had to do this for each line. I have hard-coded the cost-price (as 123), and experimentet a bit with onkeydown, onchange +++


Code: 
<form name=form>
	<script type='text/javascript'>
		function UpdateDG()  {
			c = this.form.price.value/123; 
			d = (c*100)-100; this.form.percentage.value = Math.round(d*100)/100 + "%";
			} 
		document.onkeydown=UpdateDG;
	</script>
	
SKU1 (cost 123) <input type=text name=price onchange="UpdateDG();" size=10>
<input size="5" type="text" name="percentage" />
</form>
 
Upvote 0 Downvote
Sorry, my mistake.
Here are the file (- the sql part) showing how I have done it.
I have 6 "SKUs" here, and I have added functions for the 3 first SKUs.

Code: 
<h1>Price</h1>
<form name=form>
	<script type='text/javascript'>
		function UpdateDG1()  {
			c = this.form.price1.value/123; 
			d = (c*100)-100; this.form.percentage1.value = Math.round(d*100)/100 + "%";
			} 
		document.onkeydown=UpdateDG1;

		function UpdateDG2()  {
			c = this.form.price2.value/123; 
			d = (c*100)-100; this.form.percentage2.value = Math.round(d*100)/100 + "%";
			} 
		document.onkeydown=UpdateDG2;

		function UpdateDG3()  {
			c = this.form.price3.value/123; 
			d = (c*100)-100; this.form.percentage3.value = Math.round(d*100)/100 + "%";
			} 
		document.onkeydown=UpdateDG3;
	</script>
	
SKU1 (cost 123) <input type=text name=price1 onchange="UpdateDG1();" size=10>
<input size="5" type="text" name="percentage1" /><br>
SKU2 (cost 123) <input type=text name=price2 onchange="UpdateDG2();" size=10>
<input size="5" type="text" name="percentage2" /><br>
SKU3 (cost 123) <input type=text name=price3 onchange="UpdateDG3();" size=10>
<input size="5" type="text" name="percentage3" /><br>
SKU4 (cost 123) <input type=text name=price4 onchange="UpdateDG4();" size=10>
<input size="5" type="text" name="percentage4" /><br>
SKU5 (cost 123) <input type=text name=price5 onchange="UpdateDG5();" size=10>
<input size="5" type="text" name="percentage5" /><br>
SKU6 (cost 123) <input type=text name=price6 onchange="UpdateDG6();" size=10>
<input size="5" type="text" name="percentage6" />
</form>
 
Upvote 0 Downvote
Hi

JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]UpdateDG[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  c [teal]=[/teal] [COLOR=darkgoldenrod]parseFloat[/color][teal]([/teal]what[teal].[/teal]value[teal])/[/teal][purple]123[/purple][teal];[/teal]
  d [teal]=[/teal] [teal]([/teal]c[teal]*[/teal][purple]100[/purple][teal])-[/teal][purple]100[/purple][teal];[/teal]
  what[teal].[/teal]form[teal][[/teal][green][i]'percentage'[/i][/green][teal]+[/teal]what[teal].[/teal]name[teal].[/teal][COLOR=darkgoldenrod]substr[/color][teal]([/teal][purple]5[/purple][teal])].[/teal]value [teal]=[/teal] Math[teal].[/teal][COLOR=darkgoldenrod]round[/color][teal]([/teal]d[teal]*[/teal][purple]100[/purple][teal])/[/teal][purple]100[/purple] [teal]+[/teal] [green][i]"%"[/i][/green][teal];[/teal]
[teal]}[/teal]
HTML: 
SKU1 (cost 123) [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"price1"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"UpdateDG(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"percentage1"[/i][/green][b]><br>[/b]
SKU2 (cost 123) [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"price2"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"UpdateDG(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"percentage2"[/i][/green][b]><br>[/b]
SKU3 (cost 123) [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"price3"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"UpdateDG(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"percentage3"[/i][/green][b]><br>[/b]
SKU4 (cost 123) [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"price4"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"UpdateDG(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"percentage4"[/i][/green][b]><br>[/b]
SKU5 (cost 123) [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"price5"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"UpdateDG(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"percentage5"[/i][/green][b]><br>[/b]
SKU6 (cost 123) [b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"price6"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"UpdateDG(this)"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"percentage6"[/i][/green][b]>[/b]
Two advices :
[ul]
[li]do not mix HTML and XHTML syntax[/li]
[li]use CSS to change the look of the controls[/li]
[/ul]


Feherke.
 
Upvote 0 Downvote
Yes, now the example file works :) But I still don't get this to work in my project.
We have 3 different prices on our SKUs, If a SKUnumber is 34343, the first price is 34343_1, second is 34343_2 and last is 34343_3.
The percentage field is 34343_1_a for the first price, 34343_2_a for the second and 34343_3_a for the third.

a recordset puts the SKUnumber into the name-attribute in the input field.

I've changed the function to this:
Code: 
<script type='text/javascript'>
	function UpdateDG(what)  {
		c = parseFloat(what.value)/123; 
		d = (c*100)-100; 
		what.form[what.name+'_a'].value = Math.round(d*100)/100 + "%";
		} 
</script>

And the input field is like this:
Code: 
response.write "&nbsp;<input name='"&trim(rs1(1))&"_1' type=text size=5 onkeydown='UpdateDG(this);'> 
<input name='"&trim(rs1(1))&"_1_a' type=text size=3 class=noborder readonly>"

response.write "<br>&nbsp;<input name='"&trim(rs1(1))&"_2' type=text size=5 onkeydown='UpdateDG(this);'> 
<input name='"&trim(rs1(1))&"_2_a' type=text size=3 class=noborder readonly>"

response.write "<br>&nbsp;<input name='"&trim(rs1(1))&"_3' type=text size=5 onkeydown='UpdateDG(this);'> 
<input name='"&trim(rs1(1))&"_3_a' type=text size=3 class=noborder readonly>"

I though this would work, every percentage-field has its own unike name (added _a to the input field name).
 
Upvote 0 Downvote
Hi

Code: 
[b]function[/b] [COLOR=darkgoldenrod]UpdateDG[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  c [teal]=[/teal] [COLOR=darkgoldenrod]parseFloat[/color][teal]([/teal]what[teal].[/teal]value[teal])/[/teal][purple]123[/purple][teal];[/teal]
  d [teal]=[/teal] [teal]([/teal]c[teal]*[/teal][purple]100[/purple][teal])-[/teal][purple]100[/purple][teal];[/teal]
  what[teal].[/teal]form[teal][[/teal]what[teal].[/teal]name[teal]+[/teal][green][i]'_a'[/i][/green][teal]].[/teal]value [teal]=[/teal] Math[teal].[/teal][COLOR=darkgoldenrod]round[/color][teal]([/teal]d[teal]*[/teal][purple]100[/purple][teal])/[/teal][purple]100[/purple] [teal]+[/teal] [green][i]"%"[/i][/green][teal];[/teal]
[teal]}[/teal]

Feherke.
 
Upvote 0 Downvote
I'm sorry, but I can't see the difference between what I posted last post, and what you posted to me ;-)

Here are the source-code from IE when trying to show SKU number 36422

Code: 
&nbsp;<input name='36422_1' type=text size=5 onkeydown='UpdateDG(this);'> 
<input name='36422_1_a' type=text size=3 class=noborder readonly><br>

&nbsp;<input name='36422_2' type=text size=5 onkeydown='UpdateDG(this);'> 
<input name='36422_2_a' type=text size=3 class=noborder readonly><br>

&nbsp;<input name='36422_3' type=text size=5 onkeydown='UpdateDG(this);'> 
<input name='36422_3_a' type=text size=3 class=noborder readonly>
 
Upvote 0 Downvote
Hi

Oops. Sorry. I misunderstood your problem.

The [tt]onkeydown[/tt] occurs before the [tt]input[/tt]'s [tt]value[/tt] being changed. Change the attributes to [tt]onkeyup[/tt].

Note that if you use Tab to traverse the [tt]form[/tt], the Tab's [tt]onkeyup[/tt] will also trigger the event. I would handle it like this :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]UpdateDG[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  c [teal]=[/teal] [COLOR=darkgoldenrod]parseFloat[/color][teal]([/teal]what[teal].[/teal]value[teal])/[/teal][purple]123[/purple][teal];[/teal]
  d [teal]=[/teal] [teal]([/teal]c[teal]*[/teal][purple]100[/purple][teal])-[/teal][purple]100[/purple][teal];[/teal]
  what[teal].[/teal]form[teal][[/teal]what[teal].[/teal]name[teal]+[/teal][green][i]'_a'[/i][/green][teal]].[/teal]value [teal]=[/teal] [COLOR=darkgoldenrod]isNaN[/color][teal]([/teal]d[teal])?[/teal][green][i]''[/i][/green][teal]:[/teal]Math[teal].[/teal][COLOR=darkgoldenrod]round[/color][teal]([/teal]d[teal]*[/teal][purple]100[/purple][teal])/[/teal][purple]100[/purple] [teal]+[/teal] [green][i]"%"[/i][/green][teal];[/teal]
[teal]}[/teal]

Feherke.
 
Upvote 0 Downvote
onkeyup worked perfect on my "test.html".
But I still can't get this to work in my real project, is there any easy way to write variables to the screen?
maybe alert or something?

Because in my project, the percentage shows nothing when entering data in the priceX field.
 
Upvote 0 Downvote
Here are the code, slightly changed so you don't need to see all TDs in the table.
The database connection is also removed, since this works :)
The Javascript function starts at line 17, and the input section starts at line 43.


Code: 
Sub ShowUnitsInCat
	ShowUpperMenu()
	''databaseconnection+++ here
	response.write "<form action=pricecheck.asp method=post><input type=hidden name=action value=priceupdate><table><tr><th>Vårt<br>varenr</th>"
	response.write "<th>Produkt<br>Beskrivelse</th><th>Ant på<br>lager</th><th>Solgt<br>siste 10<br>dager</th><th>Ant på<br>vei inn</th>"
	response.write "<th>Vår<br>kostpris</th><th>Billigste<br>speiling</th><th>Vår utpris<br>1/2/3</th><th nowrap>&nbsp;&nbsp;Vår DG&nbsp;&nbsp;</th>"
	response.write "<th width=115>Ny utpris</th><th>Billigste<br>pris</th><th>[URL unfurl="true"]www</th><th>xxx</th><th>yyy</th><th>zzz</th>"[/URL]
	response.write "<th>Link<br>HW</th><th>Ukes-<br>klikk</th><th>Markeds-<br>andel<br>klikk</th><th>Ranking</th></tr>"

	if kategori="toplist" then
	sql11="select  top "&antall&" hwid, sum(totclick), sum(shopclick) FROM pricetool..pricerank WHERE ts>= getdate()-7 GROUP BY hwid, totclick, shopclick ORDER BY sum(totclick) DESC"
	else
	sql11 = "select  top "&antall&"  hwid, sum(totclick), sum(shopclick) FROM pricetool..pricerank WHERE kategori='"&kategori&"' AND ts>= getdate()-7 GROUP BY hwid, totclick, shopclick ORDER BY sum(totclick) DESC"
	end if
	set rs11 = conn.Execute (sql11, adCmdText)
	%>
	<script type='text/javascript'>
		function UpdateDG(what)  {
			c = parseFloat(what.value)/123; 
			d = (c*100)-100; 
			what.form[what.name+'_a'].value = Math.round(d*100)/100 + "%";
			document.write (what.name);
			} 
	</script>
	<%
	do while not rs11.eof
		sql1="select distinct top 1 beskrivelse, varenr, hwid from pricetool..pricelog with (nolock) where hwid="&rs11(0)
		set rs1 = conn.Execute (sql1, adCmdText)
		
		
		''Varenr og beskrivelse
		if isnumeric(rs1(1)) then
			varenrstr = varenrstr &","&trim(rs1(1))
			vareteller = vareteller + 1
			response.write "<tr onMouseover=""this.bgColor='#EEEEEE'"" onMouseout=""this.bgColor='#FFFFFF'""><td>"&rs1(1)&"</td><td>"&rs1(0)&"</td>"
		else
			response.write "<tr onMouseover=""this.bgColor='#EEEEEE'"" onMouseout=""this.bgColor='#FFFFFF'""><td bgcolor=#ffb48f></td><td>"&rs1(0)&"</td>"
		end if


		''Ny pris
		if isnumeric(rs1(1)) then
			response.write "<td>&nbsp;<input name='"&trim(rs1(1))&"_1' type=text size=5 onkeyup='UpdateDG(this);' value='"&trim(rs1(1))&"_1'> <input name='"&trim(rs1(1))&"_1_a' type=text size=3 class=noborder readonly>"
			response.write "<br>&nbsp;<input name='"&trim(rs1(1))&"_2' type=text size=5 onkeyup='UpdateDG(this);'> <input name='"&trim(rs1(1))&"_2_a' type=text size=3 class=noborder readonly>"
			response.write "<br>&nbsp;<input name='"&trim(rs1(1))&"_3' type=text size=5 onkeyup='UpdateDG(this);'> <input name='"&trim(rs1(1))&"_3_a' type=text size=3 class=noborder readonly></td>"
		else
			response.write "<td></td>"
		end if


		rs11.movenext
	loop	

End Sub
 
Upvote 0 Downvote
Hi

Remove that [tt]document.write (what.name);[/tt] from the JavaScript function. It will be executed after the [tt]document[/tt] is closed, so writing to it would open a new [tt]document[/tt]. That implies freeing up the current one.

I see nothing wrong in that code, but I know nothing about that ASP (?). Would be useful for us to see the output of that script, I mean the HTML as displayed by your browser's View Source command.

One minor thing : having [tt]name[/tt] starting with digit may cause problems with some automatic [tt]form[/tt] processing. So I used to avoid them.


Feherke.
 
Upvote 0 Downvote
Wow that was it! It was the name starting with a number :)

But one issue solved, now I see another comming, is there any way to post the cost-price to this function as well?
 
Upvote 0 Downvote
It comes from the database, this is a "Do while not end of file" - "loop" thing, and the costprice is getable for each loop by the name "kostpris".
(I think I dont need to translate that word ;) )

If refering to "kostpris" like this:
<input type=hidden name=kostpris value="&kostpris&">
it would post the costprice from this form. I realize that this is not what I want to do - I need to get this value to the function instead.
 
Upvote 0 Downvote
What if i put this function inside the loop, maybe this will help, because then I might get the costprice like this:

Code: 
		function UpdateDG(what)  {
			c = parseFloat(what.value)/<%=costprice%>; 
			d = (c*100)-100; 
			what.form[what.name+'_a'].value = Math.round(d*100)/100 + "%";
			}
 
Upvote 0 Downvote
Yes there are different costprices for each SKU, thats making this a bit hard.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

BobMe23
What new features have appeared in the latest versions of Java?
Replies
1
Views
66
feherke
feherke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
748
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
368
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
337
malpa
malpa
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
674
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top