is there a better way to code a quotation form?

Question

i am seeking advise and probably example code, links that will help me improve my quotation form. the current scenario is like that:-

dynamic (select combo) rows are generated for items(from mysql database) along with empty input boxes for price and quantity. the user adds or deletes the rows based on no. if items required and fills up the price, quantity etc and then is taken to a second form with all calculated values, etc so he can print the same or send it through email.

now the items count is approx 3500 so when the user reaches 5th or 6th row, it starts becoming extremely slow to add a new row. i need to pull mysql items from database since they keep increasing every now and then.

any help is much appreciated. thanks in advance.

following is the javascript code for dynamic lines that i am currently using:-

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

following is the php code that i am using to pull mysql items to the select combo box

<?php
                $con = mysql_connect('connection details');
                if (!$con)  {
                die('Could not connect: ' . mysql_error());}
                $db=mysql_select_db('database',$con);
                $extract1=mysql_query("query")
                                    OR die(mysql_error());
                $numrows1=mysql_num_rows($extract1);
                echo "<select name='item[]' title='selectItemName'>";
                echo "
                        <option>Select Item Description</option>
                        ";
                while ($row1=mysql_fetch_assoc($extract1)) 
                {
                    $ic[]=$row1['ItemName'];
                }
                foreach ($ic as $i){
                echo "<option>".$i."</option>";
                }
                echo    "</select>";
                mysql_close($con);
                ?>

i also tried the following example from jquery which is pretty neat. but i am new and do'nt know how to populate the rest of the boxes along with the select box. here's the code

<script type="text/javascript"> 

    $(document).ready(function() {
        $("select[multiple]").asmSelect({
            addItemTarget: 'bottom',
            animate: true,
            highlight: true,
            sortable: true
        });

    }); 

</script> 

Answer 1

A select combo with ~3500 items? Ouch. (times N for number of rows? Double Ouch.)

Think it may be time to rethink the implementation. I'd probably do a popup window or something for selecting the item that [when closed] populates the form field. Keep the form only holding the value, not value+3500 (times row count).

(Best example I can give is phpBB and when you're in the Admin Control Panel selecting a user you want to manage. They pop-out with the entire [filterable] database then bring the value back to the parent window. I can see this also being advantageous for the user to find an item within 3500 entries, and not scrolling through a select combo)

Answer 2

I don't see where addRow and deleteRow are being called, but I will say here is where some of your inefficiencies may come:

 1.  var table = document.getElementById(tableID);
 2.  var rowCount = table.rows.length;
 3.  var row = table.insertRow(rowCount);
 4.  var colCount = table.rows[0].cells.length;

1. Every time you add a row, you're searching the document for the table, which is expensive if you're only working on one table; consider a global variable and doing something like var table = glob_table || document.getElementById(..);

2. Even though it's a property and isn't as expensive to fetch, this could still be tedious when you could increment/decrement another global variable.

3. I'm not sure it's proper to add a row to a table, before you add the cells to the row. I'd have to look into this update: I guess it is

4. (same as #2)

   ---

BTW, you're using jQuery at the bottom. Personally, I don't like using jQuery, but if you're going to load it, you've already done most of the damage in slowing down your page, so you might as well use it. It's actually pretty good at adding/removing elements, so I would advise you read some jQuery tutorials.

Also, if your database is increasing, then instead of re-creating the options, you'll only want to update it with items that aren't already loaded. Therefore, you need to use a timpestamp on your database records and store that timestamp in your JavaScript/page in order to "refresh since" (where update_ts >= $last_update_param)