basicly i am creating a expenses form using javascript - one of the requirements is that the user must be able to add new fields as they require. i have been able to do (each input field is given its own field name to keep it unique). I now need to be able to perform calculations using these dynamicly driven fields.
here is my javascript code:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(addExpense);
// kick things off when user clicks button #add-user
function addExpense(){
var addUserButton = document.getElementById('add-expense');
addUserButton.onclick = addNewExpense;
}
// set fieldcount to be used in incrementing names, below
fieldcount = 1;
function addNewExpense() {
// grab panel & fieldset that contain form fields to clone
var addExpensePanel = document.getElementById('add-expense-panel');
var firstExpenseFieldset = document.getElementById('new-expense');
//clone #new-expense
var newExpenseFieldset = firstExpenseFieldset.cloneNode(true);
//append number to each id and for
newExpenseFieldset.id = 'new-expense' + fieldcount;
addNumberToAttribute('label',newExpenseFieldset);
addNumberToAttribute('input',newExpenseFieldset);
// note: if you're cloning other form field types like select, add them here
//insert new cloned, incremented elements into page
addExpensePanel.appendChild(newExpenseFieldset);
fieldcount++; //increment field count for next time
return false; // block default behavior of submit button
}
function addNumberToAttribute(element, newExpenseFieldset){
elementList = newExpenseFieldset.getElementsByTagName(element);
for (i = 0; i < elementList.length; i++){
numberAttribute(elementList[i], fieldcount);
}
}
//add number to each new form field, to keep IDs unique
function numberAttribute(currentNode, numToUse) {
if(currentNode.nodeType == 1 && currentNode.getAttribute('for')){
var currentFor = currentNode.getAttribute('for');
currentNode.setAttribute('for', (currentFor + '' + numToUse)) ;
}
if((currentNode.nodeType == 1) && currentNode.getAttribute('id')){
var currentId = currentNode.getAttribute('id');
currentNode.setAttribute('id', (currentId + '' + numToUse )) ;
}
// note: if you added other form field types like select above, repeat the argument for these
}
and the html is here
<form name="form" action="">
<div id="add-expense-panel">
<!--clone this bit-->
<fieldset id="new-expense">
<div class="col">
<label for="currentDate">Date</label>
<input type="text" onClick="autoDate()" name="currentDate" size=8>
<label for="mileageRate">Mileage Rate</label>
<input name="mileageRate" onChange="updateMileage()" size="4" />
<label for="miles">Miles</label>
<input name="miles" onChange="updateMileage()" size="6" />
<label for="details">Details</label>
<input name="details" size="20" />
<label for="Mileage">Mileage £</label>
<input name="Mileage" readonly size="6">
<label for="generalExpenses">General Expenses</label>
<input name="generalExpenses" onChange="calculateTotal()" size="6" />
<label for="subsistence">Subsistence</label>
<input name="subsistence" onChange="calculateTotal()" size="6" />
<label for="accomodation">Accomodation</label>
<input name="accomodation" onChange="calculateTotal()" size="6" />
<label for="travel">Travel (incl. taxis)</label>
<input name="travel" onChange="calculateTotal()" size="6" />
<label for="entBusiness">Ent.(business)</label>
<input name="entBusiness" onChange="calculateTotal()" size="6" />
<label for="entStaff">Ent.(staff)</label>
<input name="entStaff" onChange="calculateTotal()" size="6" />
<br />
<label for="taxableSundries">Taxable Sundries</label>
<input name="taxableSundries" onChange="calculateTotal()" size="6" />
<label for="vat">VAT</label>
<input name="vat" onChange="calculateTotal()" size="6" />
<label for="totalAmountClaimed">Total Amount Claimed</label>
<input name="totalAmountClaimed" onChange="calculateTotal()" readonly="readonly" size="6" />
<!-- end of div tag here -->
</div>
</fieldset>
<!-- end cloning -->
<fieldset>
<br />
<input type="submit" value="Add new expense" id="add-expense" />
</fieldset>
</form>
I am trying to implement something like this
//calculate total mileage by muliplying mileage rate and number of miles
function updateMileage() {
document.form.Mileage.value = (document.form.mileageRate.value ) * (document.form.miles.value );
}
If anyone has the time to help it would be great i know its a lot of code to go through
thanks in advance