Adding multiple input boxes and getting a total. Different number every time

JavaScript
1

Hey I have this form which gets created by pulling stock/products from a database using PHP and beside every product in the row is a little box for input and in there the user can input the quantity of the product they want. Sometimes only 2 products will be outputted and other times 10 or more.

What I want to happen is when the user enters in lets say 3 for the quantity of a certain product I want to get a total for how much 3 of that product will cost so I just do 3 multiply by the cost (which I have from the database) and then display the total cost down under where the list of the available products are and I want all this to happen dynamically obviously not using PHP because I don’t want the page to have to reload every time they enter in a new quantity.

I know how to display text and stuff in certain divs with certain ID’s using Javascript but I just don’t know how to keep track of a form and do what I want to do when the number of inputs in the form can range from 1 to 10 or more. Im thinking of some sort of counter which gives every input a different ID like add 1 at the end of the ID name of the input as the PHP script loops through the database query displaying the products but I still don’t know how to go about the Javascript side of things. If I got any sort of help at all it would be great!

Thanks

2

Well, it depends how you set things up.

The idea with the ID is certainly doable.

However, what I like to do is set them up in a way that I can reference them relative to one another. I usually use jQuery with this (it has handy tranversing functions), but you can do it in classic Javascript.

For example, if I set it up so the cost (in a hidden input) is right before my quantity box, then my cost box was after that, I could then get the value of the next to get the value, then multiply that with the quantity and put it in the next box on change of the quantity box.

If that seems too complex, an easy way would be to just give everything an ID. Or, you could set group things together in a div or list, give the container an ID, a class to each of the objects, then get them as appropriate.

Btw, I mentioned it, but just in case it wasn’t obvious and you didn’t already know, you can load the cost from the database into a hidden input if you don’t want it visible for some reason. =p

3

Thanks for the reply. I got it working exactly how I want it usings ID’s and Javascript to check if the quantity field value is more than what is actually in stock and a few more checks and I will obviously do a proper check on the server side using PHP then to make sure no editting of the Javascript was done by anyone.