Dynamic Form Field Calculation

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

imperium2335

Hi,

I am trying to create some automatic calculations for a dynamic form.

The complicated bit is that the user can add another row of fields to fill in, which would also need to be calculated.

Here is what I have so far but it doesn't work!:

var counterx = 0 ;
function calcu() {

var targetmeh = "meh" + counterx ;
var quantity = "quantity" + counterx ;
var costtotal = "costtotal" + counterx ;
var costours = "costours" + counterx ;

document.getElementById(targetmeh).innerHTML = document.f1.elements.(quantity).value * (document.f1.elements.(costours).value - document.f1.elements.(costtotal).value);

counterx++ ;

//document.getElementById('meh').innerHTML='test';

//(document.f1.elements.productvalue.value * document.f1.elements.NoOfProducts.value);

}

Kor

the DOM0 reference uses square brackets:

document.f1[COLOR="Blue"][quantity][/COLOR].value

Before a math add or subtract, make sure both values are numbers, not strings. As the elements values are always strings, you need to perform a previous transformation

document.f1[quantity].value * (Number(document.f1[costours].value) - Number(document.f1[costtotal].value))

imperium2335

Thanks Kor,

I have done what you said but it is still not working

Below I have included the script for adding a new set of form fields

var counter = <?PHP if($id != NULL) echo $partscount-1; else echo $partscount = 1;?> ;
function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'newpartf') ;
newdiv.innerHTML = "<div id='cbox2'><input type='text' value='1' size='1' name='quantity" + (counter) + "'></div><div id='cbox'><input type='text' size='10' name='manu" + (counter) + "'></div><div id='cbox'><input type='text' size='12' name='part" + (counter) + "'></div><div id='cbox'><input type='text' size='12' name='supplier" + (counter) + "'></div><div id='cbox'><input type='text' size='12' name='type" + (counter) + "'></div><div id='cbox'><input type='text' size='10' name='delivery" + (counter) + "'></div><div id='cbox'><select name='ourcurrency" + (counter) + "'><option vale='pounds'>£</option><option vale='euro'>€</option><option value='dollar'>$</option><option value='yuan'>¥</option></select><input type='text' size='2' name='ourcost" + (counter) + "'></div><div id='cbox'><select name='ourcurrency" + (counter) + "'><option vale='pounds'>£</option><option vale='euro'>€</option><option value='dollar'>$</option><option value='yuan'>¥</option></select><input type='text' size='2' name='total" + (counter) + "'></div><div id='cbox'><strong>£<span id='meh" + (counter) + "'>0.00</strong></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}

var counterx = 0 ;
function calcu() {

var targetmeh = "meh" + counterx ;
var quantity = "quantity" + counterx ;
var costtotal = "costtotal" + counterx ;
var costours = "costours" + counterx ;

document.getElementById[targetmeh].innerHTML = Number(document.f1[quantity].value) * (Number(document.f1.[costours].value) - Number(document.f1[costtotal].value));

counterx++ ;

imperium2335

Sorry, the calc code is now:

function calcu() {

var targetmeh = "meh" + counter ;
var quantity = "quantity" + counter ;
var costtotal = "costtotal" + counter ;
var costours = "costours" + counter ;

document.getElementById[targetmeh].innerHTML = Number(document.f1[quantity].value) * (Number(document.f1.[costours].value) - Number(document.f1[costtotal].value));

Kor

post the HTML code as well

imperium2335

Hi,

Here is the first example of the fields that need to be filled in:

As you can see you have ids like "meh0" etc.

When the user adds a new set of fields, they change to be "costtotal1", "meh1" etc etc.

Thank you for helping me so far!

imperium2335

Does anyone know?

Kor

document.getElementById[COLOR="blue"]([/COLOR]targetmeh[COLOR="blue"])[/COLOR]

imperium2335

It won't work, never-mind.

Thanks for trying though.