I am looking for input form that you can enter the data to submiyt into Mysql database.
the form should have these conditions:

Invoice: auto generate
Date: date pickerfrom pop up calendar
choose client from drop down list
then option to add/remove rows
rows would have:
Auantity, Product(drop down), category(drop down based on product selection), Price (based on product selection), Ship, Tax & total (total value of rows= (Qty*price)+(ship=tax)

then subtotal which calculates the total of the rows

Recommended Answers

All 8 Replies

Write your own form and we'll help you out where we can. We're not going to write code for you from scratch. Especially for an advanced form such as this one.

commented: True dat! +7

You can take a look at this, then you can get an idea or two on how to create it.
When you get stuck, you can let us know, and we'll help you in whatever way we can.

First of all, thanks for paying attention to my post.
EvolutionFallen, you are totally right, i should've pasted my code .
Webville312, thanks for your prompt attention as well. what do you man by look at this?

I'll paste my code below, the form is working at about 90% of what I needed.
i need help mainly to clean up the code (it's mixing html, javascript & php)
here are the issues I'm having:
1-when I Add a new line, totals don't calculate right.
2-subtotal should have the total of (Row total) this is not working correct either.

if you can help me clear these out, that would be great.

<html>

<head>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css" />

<title>New Order</title>

<script type="text/javascript"><!--

function updatesum() {;

document.form.Total.value = (document.form.Qty.value -0) * (document.form.Price.value -0)+ (document.form.Ship.value -0)+ (document.form.Tax.value -0);

document.form.Percentage.value = (document.form.SubTotal.value -0) * (document.form.Percent.value -0);
document.form.GTotal.value = (document.form.SubTotal.value -0) + (document.form.Percentage.value -0);
document.form.SubTotal.value = (document.form.Total.value -0) ;

//--></script>

<SCRIPT language="javascript">

    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;

        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;

            }

        }

    } 

    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>

</head>

<body>

<form action="Add_order.php" method="post" style="width: 782px; height: 142px;" name="form" class="style41">

<p class="style39" style="width: 629px; height: 56px;">

<?php

//connecting to database 

 include ('connect.php'); 

mysql_select_db("********") or die(mysql_error());

$SubTotal = 0.00;
$Totals = 0.00;

?>

        </p>


<TABLE id="dataTable1" class="style8" style="width: 578px">

    <tr>

    <td class="style26"></td>

    <td class="style40">

    <p class="style41" style="width: 84px"><strong>Order  

    No</strong></p>

        </td>

    <td class="style27"><strong>Status</strong></td>

    <td class="style27" style="width: 165px"><strong>Company</strong></td>

    <td class="style36"><strong>Date</strong></td>

    </tr>

    <TR>

        <TD style="height: 5px" class="style3">        

         </TD>

        <TD style="height: 5px" class="style37"> 

        <INPUT type="text" name="Order_id" style="width: 32px" value="
        <?php   $Order=0;
           $query1 ="SELECT max(Order_id) FROM Orders";
            $result1 = mysql_query($query1) or die ("Error in query: $query. " .              mysql_error());
                 $row = mysql_fetch_row($result1);
                        echo $row[0]+1;
         ?>
                                                   "/><TD style="height: 5px" class="style37">

            <SELECT name="Status" style="width: 78px; height: 22px">

                <OPTION value="Open" selected="">Open</OPTION>

                <OPTION value="In Progress">In Progress</OPTION>

                <OPTION value="Paid">Paid</OPTION>

                <OPTION value="Past Due">Past Due</OPTION>

                <option value="Cancelled">Cancelled</option>

                <option value="Closed">Closed</option>

            </SELECT></TD>

        <TD style="height: 5px; width: 165px;" class="style37">

            <select name="Company" id="Company0" style="width: 126px">

        <?php 

            $sql = "SELECT `Company`, `Company`  FROM  `customer` LIMIT 0, 30 ";

            $result=mysql_query($sql);

            while ($row = mysql_fetch_array($result)) {

                echo "<option value='" . $row['Company'] ."'>" . $row['Company'] ."</option>";

            }

        ?>


    </select><strong><span class="style33"><a href="AddCustomer.htm"><span class="style2">+</span></a></span><span class="style35"><a href="AddCustomer.htm"><span class="style2">Add</span></a></span></strong></TD>

        <TD style="height: 5px" class="style37">

    <input type="text" name="Date" id="datepicker" style="width: 78px" />  

    <input type="text" name="Date0" id="datepicker0" style="width: 44px; height: 22px;" /> 

    </TR>

    <TR>

        <TD style="height: 4px" class="style3"></TD>

        <TD style="height: 4px" class="style37"></TD>

        <TD style="height: 4px" class="style37">

            </TD>

        <TD style="height: 4px; width: 165px;" class="style37">

            </TD>

        <TD style="height: 4px" class="style37">

            </TD>

    </TR>

    </TABLE>


<TABLE id="dataTable0" border="1" style="width: 579px">

    <TR>

        <TD style="height: 32px" class="style62"><span class="style61">..........</span></TD>

        <TD style="height: 32px" class="style60"><span class="style61">.....</span>Qty<span class="style61">.....</span></TD>

        <TD style="height: 32px" class="style60">

            <span class="style2"><span class="style61">........</span></span>Product<span class="style2"><span class="style61">......</span></span></TD>

        <TD style="height: 32px" class="style60">

            <span class="style2"><span class="style61">....</span></span>Category<span class="style61">....</span></TD>

        <TD style="height: 32px; width: 43px;" class="style60">

            <span class="style2"><span class="style61">....</span></span>Price<span class="style2"><span class="style61">...</span></span></TD>

        <TD style="height: 32px" class="style60">

            <span class="style61">....</span>Ship<span class="style2"><span class="style61">...</span></span></TD>

        <TD style="height: 32px" class="style60">

            <span class="style2"><span class="style61">....</span></span>Tax<span class="style2"><span class="style61">....</span></span></TD>

        <TD style="height: 32px; width: 63px;" class="style60">

            <span class="style2"><span class="style61">....</span></span>Total<span class="style61">....</span></TD>

    </TR>

</TABLE>

<table id="dataTable" border="1" style="width: 73%">

<tr>

    <td style="width: 32px; height: 24px;">

<INPUT type="checkbox" name="chk" style="width: 39px"/></td>

    <td style="width: 48px; height: 24px;">

<input name="Qty" onChange="updatesum()" style="width: 64px" /></td>

    <td style="width: 115px; height: 24px;" class="style81">


       <span class="style2"><span class="style61">


       <!--webbot bot="Validation" s-display-name="Product" b-value-required="TRUE" b-disallow-first-item="TRUE" -->


       <select name="Product" id="Product2" style="width: 87px">

        <?php 

            $sql = "SELECT `Product`, `Product`  FROM  `Products` LIMIT 0, 30 ";

            $result=mysql_query($sql);

            while ($row = mysql_fetch_array($result)) {

                echo "<option value='" . $row['Product'] ."'>" . $row['Product'] ."</option>";

            }

        ?>

    </select></span></span><a href="AddProduct.htm"><span class="style33"><strong>+</strong></span></a><span class="style2"><span class="style61">.</span></span></td>

    <td style="width: 64px; height: 24px;">

<select name="Category" id="Category2" style="width: 89px">

        <?php 

            $sql = "SELECT `Category`, `Category`  FROM  `Products` LIMIT 0, 30 ";

            $result=mysql_query($sql);

            while ($row = mysql_fetch_array($result)) {

                echo "<option value='" . $row['Category'] ."'>" . $row['Category'] ."</option>";

            }
        ?>

    </select></td>

    <td style="width: 64px; height: 24px;">

<!--webbot bot="Validation" s-data-type="Number" s-number-separators=",." b-value-required="TRUE" -->

<input name="Price" autocomplete="on" onChange="updatesum()" style="width: 57px" /></td>

    <td style="width: 48px; height: 24px;">

    <input name="Ship" onChange="updatesum()" style="width: 55px" /></td>

    <td style="width: 39px; height: 24px;">

    <input name="Tax" onChange="updatesum()" style="width: 55px" /></td>

    <td class="style63" style="height: 24px; width: 72px;">

    <strong>

    <input name="Total" disabled="" type="text" style="width: 67px" />   </strong></td>

</tr>

</table>

<table style="width: 75%; height: 91px;" class="style10" cellspacing="0">

<tr>

    <td colspan="2" class="style48" rowspan="2"></td>

    <td class="style54" colspan="2">

<p class="style59" style="width: 288px; height: 61px;">

  <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />   

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></p>

    </td>

    <td class="style48" rowspan="2">

<table style="width: 95%; height: 91px;" class="style75" cellspacing="1">

<tr>

    <td style="height: 16px;" class="style14" colspan="2">

    <p class="style59" style="width: 101px"><strong><span class="style79">SubTotal</span>     
    <span class="style77">$</span></strong></p>

    </td>

    <td class="style6" style="height: 16px; width: 83px;">

    <p class="style72" style="width: 71px">

    <strong>

    <input name="SubTotal" type="text" onChange="updatesum()"  style="width: 72px" /></strong></p>

    </td>

</tr>

<tr>

    <td style="width: 292px; height: 16px;" class="style14">

    <p class="style78" style="width: 55px"><strong>Percent</strong></p>

    </td>

    <td class="style6" style="height: 16px; width: 55px;">

            <p class="style59" style="width: 45px">

            <SELECT name="Percent" onChange="updatesum()"  style="width: 45px; height: 22px">

                <option>0%</option>

                <OPTION value="0.05">5%</OPTION>

                <OPTION value="0.07" selected="">7%</OPTION>

                <OPTION value="0.1">10%</OPTION>

                <OPTION value="0.15">15%</OPTION>

                <option value="0.2">20%</option>

            </SELECT></p>

    </td>

    <td class="style76" style="height: 16px; width: 83px;">

            <span class="style80"><strong>$</strong></span><input name="Percentage" disabled="" readonly="" type="text" style="width: 68px" /></td>

</tr>

<tr>

    <td style="height: 18px;" class="style12" colspan="2">

    <p class="style59"><strong>Grand Total  $</strong></p>

    </td>

    <td class="style6" style="height: 18px; width: 83px;">

    <p class="style59" style="width: 75px">

    <strong><span class="style57">

    <!--webbot bot="Validation" s-display-name="Grand Total" s-data-type="Number" s-number-separators=",." -->

    <input name="GTotal" type="int" style="width: 76px" class="ui-priority-primary" /></span></strong></p>

    </td>

</tr>

</table>

    </td>

</tr>

<tr>

    <td class="style54" style="height: 9px; width: 77px;">

    </td>

    <td class="style54" style="height: 9px; width: 386px;">


    </td>

</tr>

<tr>

    <td class="style21" style="height: 13px"></td>

    <td colspan="4" class="style74" style="height: 13px">

    <p class="style59">

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

    <input name="Reset1" type="reset" value="Reset" style="width: 72px">             

                                   </p>

    </td>

</tr>

</table>

</form>

</body></html>

complete code is at URL: compuworldinc.com/sql/order_code.txt

All the details included within the form just looks fine, depending on the requirement to develop an invoice system.

the problem that I' having is that it doesn't calculate the total of a new row. it keeps the ttal from row 1.

Webville312, what do you man by "look at this"?
did you have a link or a code attached?

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.