Dynamic Form Field Calculation

[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[quantity].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'>&pound;</option><option vale='euro'>&euro;</option><option value='dollar'>&#36;</option><option value='yuan'>&yen;</option></select><input type='text' size='2' name='ourcost" + (counter) + "'></div><div id='cbox'><select name='ourcurrency" + (counter) + "'><option vale='pounds'>&pound;</option><option vale='euro'>&euro;</option><option value='dollar'>&#36;</option><option value='yuan'>&yen;</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:

<div id="cbox2"><input onkeyup="calcu()" type="text" value="1" size="1" name="quantity0"></div><div id="cbox"><input type="text" size="10" name="manu0"></div><div id="cbox"><input type="text" size="12" name="part0"></div><div id="cbox"><input type="text" size="12" name="supplier0"></div><div id="cbox"><input type="text" size="12" name="type0"></div><div id="cbox"><input type="text" size="10" name="delivery0"></div><div id="cbox"><select name="ourcurrency0"><option vale="pounds">&pound;</option><option vale="euro">&euro;</option><option value="dollar">$</option><option value="yuan">&yen;</option></select><input onkeyup="calcu()" type="text" size="2" name="costours0"></div><div id="cbox"><select name="ourcurrency"><option vale="pounds">&pound;</option><option vale="euro">&euro;</option><option value="dollar">$</option><option value="yuan">&yen;</option></select><input onkeyup="calcu()" type="text" size="2" name="costtotal0"></div><div id="cbox"><strong>&#163;<span id="meh0">0.00</strong></span></div>

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(targetmeh)

[imperium2335]

It won't work, never-mind.

Thanks for trying though.