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=totalise($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'>