Forum Moderators: open

Message Too Old, No Replies

Adding total

         

music_man

2:59 am on May 2, 2006 (gmt 0)

10+ Year Member



Hi

I found this cool script on another forum where you can add elements to a form onclick and it creates a new id for each one.

I modified it a bit to suit my needs but now I am at a hurdle about totals. I am trying to make it so that after 5 items it adds 25 to the total (which is preset at 299).

Once that is going I can go about seeing how to delete fields and subsequently having the total decreased by the appropriate amount.

Here's the script so far. I have looked at loads of tutorials and some of the code I have tried is commented out.

function addField() {
var form = document.getElementById("form");
var ctr = form.getElementsByTagName("input").length + 1;
var total = 299;

/*
twentyfive = 25
i=ctr
for(i > 10; i < = ctr; i++) {

var totalamount = total + twentyfive
document.getElementById("totalamount").innerHTML=totalamount;

}
*/

var items = ctr;
while(items > 10){
var totalamount = total + 25;
document.getElementById("totalamount").innerHTML=totalamount;
items++;
}

var input;
if (document.all){ //input.name doesn't work in IE
input = document.createElement('<input name="item_'+ctr+'" size="3"">')
inputdescription = document.createElement('<input name="item_'+ctr+'_description" size="30">')
}else{
input = document.createElement('input');
input.name = "field_"+ctr;
}
input.id = input.name;
input.type = "text";
input.value = "";
input.className = "textfield";
inputdescription.id = input.name;
inputdescription.type = "text";
inputdescription.value = "";
inputdescription.className = "textfield";
var li = document.createElement('li');
li.appendChild(input);
li.appendChild(inputdescription);
form.appendChild(li);
window.document.orderform.count.value = ctr;

}

document.write('<span class="budgein">');
document.write('<span class="example">No. </span>');
document.write('<span class="example">Item description</span>');
document.write('</span>');
document.write('<ol id="form">');
document.write('<li>');
document.write('<input name="item_1" type="text" class="textfield" size="3" id="item_1" />');
document.write('<input name="item_1_description" size="30" type="text" class="textfield" id="item_1_description" />');
document.write('</li></ol>');
document.write('<span class="itemoptions"><span id="addanother"><a href="#" onClick="addField();">Add another item</a></span>');
document.write ('<span id="total">Total<span id="totalamount">$299</span></span>');

music_man

1:37 am on May 6, 2006 (gmt 0)

10+ Year Member



bump

siMKin

6:44 pm on May 6, 2006 (gmt 0)

10+ Year Member



before answering your question, this:
var items = ctr; 
while(items > 10){
var totalamount = total + 25;
document.getElementById("totalamount").innerHTML=totalamount;
items++;
}

doesn't seem right
The while states: "keep looping as long as 'items' is greater than 10" and at the end of the body of the while you increase 'items' with 1. That means the loop would be canceled immediately (because items is < 10) or keep looping indefinately (if items is already > 10 it will only increase more).

Besides that, i don't understand what really your question/problem is.

music_man

12:37 am on May 7, 2006 (gmt 0)

10+ Year Member



Thanks for your reply.

I removed the items++ to no avail.

I am trying to get it so that for every item added after 10, it adds 25 to the total.

music_man

1:32 am on May 8, 2006 (gmt 0)

10+ Year Member



Are there any tutorials on this I could look at?

siMKin

4:25 am on May 8, 2006 (gmt 0)

10+ Year Member



I removed the items++ to no avail.

Well, of course, that isn't gonna work either. If items is the argument in your loop, you have to change it in the body, otherwise the loop will still be an indefinite one.

I am trying to get it so that for every item added after 10, it adds 25 to the total.

that concept could be achieved in this way:

var i = 1; 
var total = 0;
while (i <= 100)
{
if (i % 10 == 0)
total += 25;
i++;
}
alert('i: '+i+'\ntotal: '+total);

If you don't understand the construction with the % read this wiki about the modulo operation:
[en.wikipedia.org...]

Are there any tutorials on this I could look at?

Well, here you have a working example.
But, i think a basic course in javascript in general would also be advisable