jonnyhitek 0 Newbie Poster

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.