Java calculation on changeMe used in a for loop

[jimmyg123]

Hi everyone.
I'm trying to create a shopping cart (with PHP) and it's all going pretty good. Except I'm trying to make a quantity drop down menu which when you change the quantity the total field is updated... I had it working for one, but when I tried to implement it into a for loop (so that when there are more than one item on the page they work separately) nothing happens.

Here is my javascript

<script type='text/javascript'>
	
function totalise(price,total)
{	
	var qty   = window.document.getElementById('qty').value;
	var result = total;
	result.value = price * qty;
}
</script>

and here is a section of my PHP inside the for loop, $price comes from a database (and works) and $i is just the loop count number

<td>
	<select id='qty' onChange=totalise($price,total{$i})>
		<option value='0'>0</option>
		<option value='1'>1</option>
		<option value='2'>2</option>
		<option value='3'>3</option>
		<option value='4'>4</option>
		<option value='5'>5</option>
		<option value='6'>6</option>
	</select>
 </td>
<td>$  <input id='total{$i}' type='text' readonly /></td>

Any questions just ask! Thanks in advance!

[r035198x]

Hi everyone.
I'm trying to create a shopping cart (with PHP) and it's all going pretty good. Except I'm trying to make a quantity drop down menu which when you change the quantity the total field is updated... I had it working for one, but when I tried to implement it into a for loop (so that when there are more than one item on the page they work separately) nothing happens.

Here is my javascript

<script type='text/javascript'>
	
function totalise(price,total)
{	
	var qty   = window.document.getElementById('qty').value;
	var result = total;
	result.value = price * qty;
}
</script>

and here is a section of my PHP inside the for loop, $price comes from a database (and works) and $i is just the loop count number

<td>
	<select id='qty' onChange=totalise($price,total{$i})>
		<option value='0'>0</option>
		<option value='1'>1</option>
		<option value='2'>2</option>
		<option value='3'>3</option>
		<option value='4'>4</option>
		<option value='5'>5</option>
		<option value='6'>6</option>
	</select>
 </td>
<td>$  <input id='total{$i}' type='text' readonly /></td>

Any questions just ask! Thanks in advance!

Moved to PHP forum.

[jimmyg123]

Shall I assume no-one can help me?

[code green]

I can't see a loop. The code you submitted was not php but HTML. This will not work in either[PHP]onChange=totali se($price,total {$i})>[/PHP]

[Motoma]

You will need to give each selection box a unique name and id, and refer to those in your Javascript onchange function.

[jimmyg123]

okay I get that, but how do i concatenate the loop number to the name of the total field?

this is my loop

	for($i=0;$i<$num_rows;$i++){
		$name = mysql_result($query,$i,2);
		$price = mysql_result($query,$i,3);
		$desc = mysql_result($query,$i,5);
		$photo = mysql_result($query,$i,4);
		echo("
		  <tr>
			<td rowspan='3' valign='middle' align='center'><p><a href=\"javascript:popImage('../Images/$category/$photo','$name')\">
<img src=\"../Images/$category/$photo\" border='0' width='50%' height='50%'></a></p>
			<p class='style9'>Click to enlarge  </p></td>
			<td colspan='3'>$desc</td>
		  </tr>
		  <tr>
			<td>Unit Price</td>
			<td>Quantity</td>
			<td>Total</td>
		  </tr>
		  <tr>
			<td>$$price</td>
			<td>
				<select id='qty' onChange=totalise($price)>
					<option value='0'>0</option>
					<option value='1'>1</option>
					<option value='2'>2</option>
					<option value='3'>3</option>
					<option value='4'>4</option>
					<option value='5'>5</option>
					<option value='6'>6</option>
			  	</select>
  </td>
			<td>$  <input id='total{$i}' type='text' readonly size='4'/></td>
		  </tr>
		  <tr>
			<td align='center'>$name</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><li>Add to Cart </li></td>
		  </tr>
		  ");
	  }

What I am not sure about is how to add the loop number ( i ) to the input id=total
so it would loop like
total0
total1
total2
etc...

Thanks!

[jimmyg123]

I've figured out how to loop the id names I did it like this (where $i is the loop number), and looking at the source code when I view the page it is working fine

<select id='qty{$i}' onChange=totalise($price,total{$i},qty{$i})>
					<option value='0'>0</option>
					<option value='1'>1</option>
					<option value='2'>2</option>
					<option value='3'>3</option>
					<option value='4'>4</option>
					<option value='5'>5</option>
					<option value='6'>6</option>
			  	</select>
  </td>
			<td>$ <input id='total{$i}' type='text' readonly size='4'/></td>

I thought by passing the values $total{$i} and qty{$i} to the javascript as variables so they may then call the proper id names (i.e. total0, qty0), then it would work...

This is my javascript code

<script type='text/javascript'>
function totalise(price,ttl,qt)
	{	
		var qty   = window.document.getElementById(qt).value;
		var total   = window.document.getElementById(ttl).value;
		var result = total;
		result.value = price * qty;
	}

To me it looks like it should work, can anyone point out something I've done wrong?
Thanks again.

[Motoma]

What are you getting as a result? Do you have any javascript errors?

[jimmyg123]

I've changed my function to

function totalise(price,total,qty)
{ 
	var qtd   = document.getElementById(qty).value;
	var result = document.getElementById(total);
	result.value = price * qtd;
}

with the menu like this

<select id='qty{$i}' onChange=totalise($price,total{$i},qty{$i})>

I'm not getting any javascript errors, but nothing happens when I change the quantity value... I've checked the source code of the page and the naming of the looped values is working.. i.e. i get
qty0 total0
qty1 total1

I just can't figure out why nothing is returned to total field

<input id='total{$i}' type='text' readonly size='4'/>

[jimmyg123]

I added a javascript alert in my function to see if I could debug, and when I change the menu I don't get the alert, which means the function isn't being called properly... Does anyone understand why???

Function:

<script type='text/javascript'>
function totalise(price,total,qty)
{ 
	alert(\"HELLOOOOO\"); 
	var qtd   = document.getElementById(qty).value;
	var result = document.getElementById(total);
	result.value = price * qtd;
}
</script>

onChange:

<select id='qty{$i}' onChange='totalise($price,total{$i},qty{$i})'>
					<option value='0'>0</option>
					<option value='1'>1</option>
					<option value='2'>2</option>
					<option value='3'>3</option>
					<option value='4'>4</option>
					<option value='5'>5</option>
					<option value='6'>6</option>
			  	</select>

[Motoma]

No idea. Perhaps taking a look at the HTML output in a syntax-colored IDE would help you?

[jimmyg123]

Finally got it working, thanks to everyone who helped.
My last problem was passing total{$i} and qty{$i} through to the function, guess the javascript didnt like it...

For anyone who wants to know how I got it to work here is my working:
Javascript:

<script type='text/javascript'>
function findTotal(price,i)
{ 
	var qtd   = document.getElementById('qty'+i).value;
	var result = document.getElementById('total'+i);
	result.value = price * qtd;
}
</script>

And my working PHP/HTML (implemented into a for loop):

<select id='qty{$i}' onChange='findTotal($price,$i)'>
	<option value='0'>0</option>
	<option value='1'>1</option>
	<option value='2'>2</option>
	<option value='3'>3</option>
	<option value='4'>4</option>
	<option value='5'>5</option>
	<option value='6'>6</option>
</select>
				
$ <input id='total{$i}' type='text' readonly size='4'>