Javascript onChange calculate total quantity*price help!

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jimmyg123
    New Member
    • Mar 2007
    • 21
    #1

    Javascript onChange calculate total quantity*price help!

    Hi,
    I'm trying to do something similar. This is my javascript

    Code:
    <script type='text/javascript'>
function totalise(price,total)
{	
	var qty   = window.document.getElementById('qty').value;
	var result = total;
	result.value = price * qty;
}
</script>
    And this is my select menu and total field (in php)

    Code:
    <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>
    The values seemed to get past through to the function okay so I'm lost as to why the fields aren't being updated...
    Tags: None
    • jimmyg123
      New Member
      • Mar 2007
      • 21
      #2
      Javascript onChange calculate total quantity*price help!

      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
      Code:
      <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

      Code:
      <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!

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032
          #3
          Merged post/threads + split first post from another thread.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Don't use "total{$i}" . Use something like total or total2.

                Comment

                • jimmyg123
                  New Member
                  • Mar 2007
                  • 21
                  #5
                  Using total{i} takes the number of the loop and adds it to the total name
                  so when it runs it would be read as
                  total0
                  total1
                  total2

                  ... which is what i should be using right?

                    Comment

                    • Romulo NF
                      New Member
                      • Nov 2006
                      • 54
                      #6
                      Code:
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Random images same url</title>
</head>

<body>

<table>
<td>
	<select id="qt" onChange="totalise()">
		<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>
	<select id="itemPrice" onChange="totalise()">
		<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" type="text" readonly /></td>
</table>

</body>

<script type='text/javascript'>
	
function totalise() {	
	var qtd   = document.getElementById('qt').value;
	var price  = document.getElementById('itemPrice').value;
	var result = document.getElementById("total");
	result.value = price * qtd;
}
</script>

</html>
                      That helps?

                        Comment

                        • jimmyg123
                          New Member
                          • Mar 2007
                          • 21
                          #7
                          Ummm, no not really because my problem is that I want to implement this code into a loop, and I'm not sure how to...
                          Thanks anyway

                            Comment

                            • jimmyg123
                              New Member
                              • Mar 2007
                              • 21
                              #8
                              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

                              Code:
                              <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

                              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.

                                Comment

                                • jimmyg123
                                  New Member
                                  • Mar 2007
                                  • 21
                                  #9
                                  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:
                                  Code:
                                  <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):
                                  Code:
                                  <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'>

                                    Comment

                                    Previous template Next
                                    Working...