# Thread: Dynamic Form Field Calculation

1. Registered User
Join Date
Oct 2010
Location
UK
Posts
11

## Dynamic Form Field Calculation

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!:

Code:
```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);

}```
Last edited by Kor; 10-06-2010 at 05:10 AM. Reason: wrap the code [code][/code]

2. the DOM0 reference uses square brackets:
Code:
`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
Code:
`document.f1[quantity].value * (Number(document.f1[costours].value) - Number(document.f1[costtotal].value))`

3. Registered User
Join Date
Oct 2010
Location
UK
Posts
11
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;?> ;
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++ ;

4. Registered User
Join Date
Oct 2010
Location
UK
Posts
11
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));

5. post the HTML code as well

6. Registered User
Join Date
Oct 2010
Location
UK
Posts
11
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!

7. Registered User
Join Date
Oct 2010
Location
UK
Posts
11
Does anyone know?

8. Code:
`document.getElementById(targetmeh)`

9. Registered User
Join Date
Oct 2010
Location
UK
Posts
11
It won't work, never-mind.

Thanks for trying though.

There are currently 1 users browsing this thread. (0 members and 1 guests)

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.12053 seconds
• Memory Usage 2,938KB
• Queries Executed 15 (?)
Template Usage (33):
• (4)bbcode_code
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (9)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (9)postbit
• (9)postbit_onlinestatus
• (9)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (73):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_postinfo_query
• fetch_postinfo
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete