Auto Calculating Form Feilds..

Question

anita_86 14 Light Poster

13 Years Ago

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

php

2 Contributors
8 Replies
644 Views
3 Weeks Discussion Span
Latest Post 13 Years Ago Latest Post by anita_86

All 8 Replies

anilashanbhag 0 Junior Poster in Training

13 Years Ago

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

anilashanbhag 0 Junior Poster in Training

13 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

anita_86 14 Light Poster · Answer 1 · 2011-02-27T14:00:39+00:00

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 0 Junior Poster in Training · Answer 2 · 2011-02-27T18:31:26+00:00

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

anita_86 14 Light Poster · Answer 3 · 2011-02-27T18:44:12+00:00

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 0 Junior Poster in Training · Answer 4 · 2011-02-27T18:51:29+00:00

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 14 Light Poster · Answer 5 · 2011-02-28T17:10:49+00:00

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 14 Light Poster · Answer 6 · 2011-03-21T15:20:59+00:00

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.

Auto Calculating Form Feilds..

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers