Insert entries and perform calculations.

Hello everyone,

I’m an absolute beginner in the Javascript world, and I’m trying to get the hang of it with very few resources. As I have little idea on how to solve this obstacle of mine, I don’t know how to look for it, so I’m making a new thread.

This is the scenario, let’s see how can I explain it…
Please take a look to this example code:

[CODE]<script type=”text/javascript”>

function GetPF() {

var G_AMT = document.getElementById(“Amount”).value;
var G_TYP = document.getElementById(“Groceries”).value;

switch(G_TYP) {
case “0”:
PRICE = eval(G_AMT) * 0.5;
break;
case “1”:
PRICE = eval(G_AMT) * 0.75;
break;
case “2”:
PRICE = eval(G_AMT) * 1.5;
break;
case “3”:
PRICE = eval(G_AMT) * 1.25;
break;
}
document.getElementById(“PRICE”).innerHTML = PRICE + “$”;

}

</script>
<form name=”Grocery_List”>
<table>
<tr><th>To Buy</th><th>Amount</th><th>Price</th></tr>
<tr><td><select name=”Groceries” id=”Groceries”>
<option value=”0″>Potatoes</option>
<option value=”1″>Carrots</option>
<option value=”2″>Eggplants</option>
<option value=”3″>Zucchini</option>
</select> </td>
<td><input type=”text” name=”Amount” id=”Amount” size =”2″ /></td><td id=”PRICE”></td></tr></table>
<input type=”button” onClick=”GetPF()” value=”How much is shopping today?” />
</form>[/CODE]

So, I have a [I]not-so-handy-to-carry-around-in-the-supermarket[/I] grocery list. There is a limited data from which the user can choose from, of which the price value is stored. So, for today we’ll be only able to buy Potatoes, Carrots, Eggplants and Zucchini. In the example, however, we can only calculate the price for one kind of grocery at time: what if we actually wanted to make a list, specify the amount for each type we intend to buy, display the price for each row and, in the bottom, the grand total for our shopping?
Of course we could just add as many rows as possible entries in the list and we are done; in this case, with only four possible entries, it isn’t a hassle to do that, but what if we’re going to widen our possible list to many other types of groceries? Besides, I don’t know about you, but personally I don’t go around writing things such as “Potatoes x 0” on my grocery list, if I’m not going to buy any potatoes.

Basically, what I want to do is to make it possible (with little “+/-” buttons or something like that) for the user to add an entry in the table: that is another row with the same dropdown menu. Even if I knew how to do that (and I don’t, but I suppose I could try to use some [FONT=”Courier New”]document.write[/FONT] function?), there would be still some problem: how can I make the script not confuse the two entries and thus handling them separately (I was thinking something on the line of making progressive IDs to each addition, maybe?)? But then, how can I make the script be aware of all the instances to calculate the grand total?
Lastly — but this is entirely unneeded for my scope, I’m just asking so I can understand a little bit more of JS — what if I want to disable the options already selected somewhere else in the dropdown menu?

I thank you very much in advance. An answer to any of these questions is greatly appreciated.
Now I must go shopping without knowing how much will I spend! ?

Best regards,

M. L.

Also in #JavaScript _↴