Forum Moderators: open
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>');
var items = ctr;
while(items > 10){
var totalamount = total + 25;
document.getElementById("totalamount").innerHTML=totalamount;
items++;
}
Besides that, i don't understand what really your question/problem is.
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.
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);
Are there any tutorials on this I could look at?