JavaScript: Calculate onChange in form

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
gabo
Forum Newbie
Posts: 3
Joined: Tue Jun 17, 2008 12:44 pm

JavaScript: Calculate onChange in form

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: JavaScript: Calculate onChange in form

Post 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
gabo
Forum Newbie
Posts: 3
Joined: Tue Jun 17, 2008 12:44 pm

Re: JavaScript: Calculate onChange in form

Post 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.
Post Reply