Auto Calculating Form Feilds..

[anita_86]

Hi all!
I have a form as below:

<script type="text/javascript">

function addRow(tableID) 

{

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;

            if(rowCount<3)

                {

                var row = table.insertRow(rowCount);

                var colCount = table.rows[0].cells.length;

                for(var i=0; i<colCount; i++)

                          {

                        var newcell = row.insertCell(i);

                        newcell.innerHTML = table.rows[0].cells[i].innerHTML;

                        //alert(newcell.childNodes);

                            switch(newcell.childNodes[0].type) 

                            {

                            case "text":

                                newcell.childNodes[0].value = "";

                            break;

                            case "checkbox":

                                newcell.childNodes[0].checked = false;

                            break;

                            case "select-one":

                                newcell.childNodes[0].selectedIndex = 0;

                            break;

                            }

                        }

                }



        else 

        {

        alert("Maximum Limit Of 3 Rows Reached");

        }

}

function deleteRow(tableID)

{

            try

                 {

                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;



                    for(var i=0; i<rowCount; i++) 

                        {

                        var row = table.rows[i];

                        var chkbox = row.cells[0].childNodes[0];

            

                        if (null != chkbox && true == chkbox.checked) 

                            {

                            if (rowCount <= 1) 

                                {

                                alert("Cannot delete all the rows.");

                                break;

                                }

                

                            table.deleteRow(i);

                            rowCount--;

                            i--;

                            }



                        }

                    } catch(e) 

                        {

                        alert(e);

                        }

}

</script>

<form name="newquotation1" method="post" action="invoice_data.php" onSubmit="return validateForm(this)">

<table align="center">

<tr>

<td align="center" colspan="2"><span class="style2">All Fields Are Mandatory.</span></td>

</tr>

<tr>

<?

$query=mysql_query

("SELECT * FROM existing_clients_invoice");

if(mysql_num_rows($query) > 0)

{

while($row=mysql_fetch_array($query))

{

if($row!=0)

{

$id=$row['inv_id']+1;

}

}

}

else

{

$id=1;

}

$ini="IN";

$year=date("y");

$invoice= strtoupper($ini) . '-'  .($year) . '-' . '00' .$id;

?>

<td>Invoice Number:</td>

<td><input type="text" name="number" readonly"" value="<?PHP echo $invoice; ?>"></td>

</tr>

<tr>

<td>Client Name:</td>

<td>

<?PHP

$query=mysql_query("SELECT * FROM client_master");

echo "<select name='name'>";

while($row=mysql_fetch_array($query))

{

echo "<option value=$row[client_id]>

$row[client_name]</option>";

}

echo "</select>";

?>

</td>

</tr>

<tr>

<td>Work Order Number:</td>

<td width="300">Applicable&nbsp;<input name="radio" type="radio" value="applicable">&nbsp;

<?PHP

$query=mysql_query("SELECT * FROM existing_clients");

echo "<select name='work'>";

while($row=mysql_fetch_array($query))

{

echo "<option value=$row[exi_work_number]>

$row[exi_work_number]</option>";

}

echo "</select>";

?>

&nbsp;Not Applicable&nbsp;<input name="radio" type="radio" value="notapplicable" >

</td>

</tr>

<tr>

<td>Invoice Date:</td>

<td><input id="demo3" name="date" type="text" >

<a href="javascript:NewCssCal('demo3','yyyymmdd')">

<img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></td>

</tr>

<tr>

<td>Sales Person:</td>

<td><input type="text" name="sales_person"></td>

</tr>

<tr>

<td>Job:</td>

<td><input type="text" name="job"></td>

</tr>

<tr>

<td>Payment Terms:</td>

<td><input type="text" name="terms"></td>

</tr>

<tr>

<td>Due Date:</td>

<td><input id="demo4" name="due_date" type="text" >

<a href="javascript:NewCssCal('demo4','yyyymmdd')">

<img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></td>

</tr>

</table>

<tr>

<td><input type="button" value="Add Row" onClick="addRow('dataTable')" ></td>

<table align="center" id="dataTable" width="1000">

<tr>

<td>Qty:</td>

<td><input type="text" name="qty[]"></td>

<td>Description:</td>

<td><input type="text" name="description[]" ></td>

<td>Unit Price:</td>

<td><input type="text" name="unit_price[]" ></td>

<td>Line Total:</td>

<td><input type="text" name="line_total[]" ></td>

</tr>

</table>

<table align="center" width="1000">

<tr>

<td>Subtotal:</td>

<td><input type="text" name="subtotal"></td>

<td>Taxes:</td>

<td><input type="text" name="tax"></td>

<td>Advance:</td>

<td><input type="text" name="advance"></td>

<td>Total:</td>

<td><input type="text" name="total"></td>

</tr>

</table>

<table align="center">

<tr>

<td><input name="submit" type="submit" value="Submit"></td>

</tr>

</table>

</form>

Problem is, I want to display values in the text fields as below:

line_total=qty*unit_price;

subtotal=line_total[];

total=subtotal+tax-advance;

Can anyone help me out?I donno a bit of javascript!!

[anilashanbhag]

ok here is the logic as and when the user enters the data and blurs out of the firled
use foll syntax

document.getElementById("your elem id").onblur = adder;

in adder
take the value and add it to a variable
finally when user hits submit put the final variable values into the reqd place

[anita_86]

Thx anilashanbhag.
I am trying something like this for line total:

<script type="text/javascript">
function line(elem) {
var a=document.getElementById("qty");
var b=document.getElementById("unit_price");
var c=a*b;
alert (c);
document.getElementById("line_total").onblur = c;
}
</script>

And calling it like this:

<input type="text" name="line_total[]" id="line_total" onBlur="return line(this)">

But its not working may be because these values are in array.
It alerts "NaN" and dosent show any value on onblur event.

[anilashanbhag]

i think u should have done
var a=document.getElementById("qty");
var qty = parseInt(a);

[anilashanbhag]

all text fields return strings and need to be converted to int values

[anita_86]

Thanks a lot anilashanbhag!!
Its working fine now with

document.getElementById("line_total").value = c;

&

parseInt();

Now real problem is the feilds are dynamic and I want to add more than 1 line_total feilds and show its value in sub_total.
Dont know how can I do this with js.

[anilashanbhag]

ok so you could try window.onload to initialize all the fields
calculate and display the subtotal for onblur/onchange on each text field

also try doing everything in js -
var k =document.getElementById(" ");
k.value ="x"; // x is the default think it will be 0
k.onchange = adder;

function adder(){

}

[anita_86]

I tried everwhere on net.But cudnt find solution.can u please give me some example?
i dont know a bit bout js. :(

[anita_86]

Finally I got solution for this problem after a long search over internet and forum :)
And I am thankful to all you guys for ur constant support.