Page 1 of 1

JavaScript: Calculate onChange in form

Posted: Thu Jun 19, 2008 5:10 pm
by gabo
Hello!
I want to crete a form for my invoices. I'm a very newbie in JS, I know just som few things. I have two problem:
1. I want a functions for calculate a cost with and without tax. I 'm creating this:

Code: Select all

<script type="text/javascript">
// (x) is a number of the php generated row (see the code)
    function FwoTax(x) { 
        woTax+x+.value = eval(quoty+x+.value) * eval(cost+x+.value);
    }
    function FwTax(x) {
        wTax+x+.value = eval(woTax+x+.value)*(eval(tax+x+.value)/100+1);
    }
</script>
The result from the brovser is: SyntaxError: Parse error. I'm try it parse with ',", but without result. How can I parse the x variable with ID of the input field?

2. I'm try the js function without (x) with fixed index woTax1.value (for the 1st row) it worked but not with the Cost with Tax, this one was not be calculated, while I don't change the Tax list.

Code: Select all

<form id="form1" name="form1" method="post" action="">
<?php 
    if (!isset ($defRepeat)) { 
        $defRepeat = 1;
    }
    for ($repeat = 1; $repeat <= $defRepeat; $repeat++) {
?>
    <p>
    <label>Qty:
    <input name="quoty<? echo $repeat;?>" type="text" id="quoty<? echo $repeat;?>" onchange="FwoTax(<? echo $repeat;?>);" />
    </label>
    <label>Cost/Qty without Tax:
    <input type="text" name="cost<? echo $repeat;?>" id="cost<? echo $repeat;?>" onchange="FwoTax(<? echo $repeat;?>);" />
    </label>
    <label>Tax %:
    <select name="tax<? echo $repeat;?>" id="tax<? echo $repeat;?>" onchange="FwTax();">
        <option value="19">19</option>
        <option value="10">10</option>
        <option value="0">0</option>
    </select>
    </label>
    <label>Cost without Tax:
    <input name="woTax<? echo $repeat;?>" type="text" id="woTax<? echo $repeat;?>" onchange="FwTax();"/>
    </label>
    <label>Cost with Tax:
    <input type="text" name="wTax<? echo $repeat;?>" id="wTax<? echo $repeat;?>" disabled/>
    </label>
    <br />
    <?php
    if ($repeat == $defRepeat) {
        echo ("<a href=\"?defRepeat=".($defRepeat + 1)."\">Add Row</a>");
        if ($defRepeat > 1) {
            echo ("<br /><a href=\"?defRepeat=".($defRepeat - 1)."\">Remove Row</a>");
        }
    }
    ?>
    </p>
<?php } ?>
</form>
 
Of course on the invoice are much mor input fields. If the Add row link is clicked the page are reloading. For preventing of lose the date I'm use cookies, where each input field is saved to the cookie with onChange event. Is this a good way? Somewhere I read, some browsers have a cookies limatation per domain.

Thank you very much for any help.

G.

Re: JavaScript: Calculate onChange in form

Posted: Sat Jun 21, 2008 5:04 am
by kaszu
1)

Code: Select all

var quoty_element = document.getElementById('quoty' + x);
var quoty_value = quoty_element.value;
2)
You can add input fields using JavaScript, check createElement

Re: JavaScript: Calculate onChange in form

Posted: Sun Jun 22, 2008 5:32 pm
by gabo
Thanks for usefull helps. I didn't want use create element, so I solve the problem with joining the functions woTax and wTax in one function.

G.