www.webdeveloper.com
Results 1 to 9 of 9

Thread: Dynamic Form Field Calculation

  1. #1
    Join Date
    Oct 2010
    Location
    UK
    Posts
    11

    Red face 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 06:10 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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. #3
    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;?> ;
    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++ ;

  4. #4
    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. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    post the HTML code as well

  6. #6
    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. #7
    Join Date
    Oct 2010
    Location
    UK
    Posts
    11
    Does anyone know?

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    document.getElementById(targetmeh)

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

    Thanks for trying though.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

Posting Permissions

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



Recent Articles