Javascript onChange calculate total quantity*price help!

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

Expand|Select|Wrap|Line Numbers

 <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)

Expand|Select|Wrap|Line Numbers

 
<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...

Mar 29 '07 #1

Subscribe Post Reply

36209

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

Expand|Select|Wrap|Line Numbers

 
<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

Expand|Select|Wrap|Line Numbers

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

Mar 29 '07 #2

acoder

16,027

Expert Mod 8TB

Merged post/threads + split first post from another thread.

Mar 29 '07 #3

acoder

16,027

Expert Mod 8TB

Don't use "total{$i}". Use something like total or total2.

Mar 29 '07 #4

jimmyg123

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?

Apr 3 '07 #5

Romulo NF

Expand|Select|Wrap|Line Numbers

 
<!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?

Apr 3 '07 #6

jimmyg123

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

Apr 3 '07 #7

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

Expand|Select|Wrap|Line Numbers

 
<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

Expand|Select|Wrap|Line Numbers

 <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.

Apr 3 '07 #8

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:

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

 
<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'>

Apr 4 '07 #9

Similar topics

Javascript help

by: Andy | last post by:

I'm not sure why my checkbox code is not working as per intended. It always keeps saying "Please select the department" even though I check the department... appreciate any help. <!DOCTYPE HTML...

Javascript

AJAX (javascript help) - ASP.NET(C#)

by: Trip | last post by:

Please if someone can help me !!! I need client and server code(principle based on AJAX) for next problem: i have 3 <select> tags on html page.(it must be NO page reload(callback) only...

Javascript

Eolas patent workaround: Java folks need JavaScript help

by: Mickey Segal | last post by:

The long-simmering Eolas patent dispute: http://www.microsoft.com/presspass/press/2003/oct03/10-06EOLASPR.mspx has led to an optional Microsoft Update: http://support.microsoft.com/kb/912945/en-us...

Javascript

JavaScript help required

by: michaelmaud | last post by:

I am currently working on a photo gallery which loads in images on the fly. upon the page loading, it scans the directory in PHP and builds an array of the image names in a JavaScript Array format...

Javascript

Idiot needs javascript help with formHandler, please

by: dreamlab | last post by:

Hello, Can one of you javascript wizards help out a newbie, please? I’ve got a formHandler that is supposed to check for a good email address and name in the form after clicking the submit...

Javascript

Javascript Help for Stylesheet change

by: marirs | last post by:

Hi, I have a selectbox in a JSP page. I have written a JS for changing certain data onchange of the box value. I also need to blackout some of the labels which come after the selectbox.I...

Javascript

javascript help to retrive the cpu information of client in mozilla browser

by: fredy | last post by:

I Need javascript help to retrive the cpu information of client in mozilla browser Note: <script language="javascript"> alert(navigator.cpuClass); </script>

Javascript

Stuck on C++ program to calculate price and tax

by: gator6688 | last post by:

I have to write a program that asks for a cost-per-item, number of items purchased, and a discount rate. Then it should calculate the total cost, tax due, and amount due. I have to use the...

C / C++

javascript help needed! javasript with flash.

by: dupdupdup | last post by:

Hello there, im needed to develop a gallery for this website. im using hotspots to go to my frames in my flash Each hotspot goes to each frame. The flash is loaded properly. When i right click...

Javascript

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware