Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

This is my first post and i am new in PHP, i am trying to build a POS system using PHP, but i stuck in sales module.

Problem is when I scan barcode of an item, it display in textbox where i have set focus, and when i click add item button but when i repeat this step for another item(s), it remove first item and replace it with latest item, i have put my 100% but can't figure out why this is happening, thatswhy please help me in this regards as i know there are so many good developers in php in this forum.

Here is my code for you:

<script type="text/javascript">
 function setFocus(){
 document.getElementById("searchitem").focus();

 }

function change()
{
    var searchitem = document.getElementById('searchitem');
    if(searchitem.value == '')
    {
        searchitem.style.background = 'orange';
    }
    else
    {
        searchitem.style.background = '';
    }
}
</script>



<?php $name = "Mehroz"; ?>
    <SCRIPT language="javascript">
       /* setInterval("SANAjax();",5000);
        $(function(){
          SANAjax = function(){
          $('#dataDisplay').prepend("HI This").fadeIn("slow");

          }

        }) ;  */



       function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 0;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.value = '<?php echo $name;?>';
             element2.size = "15";
            cell3.appendChild(element2);

            var cell4 = row.insertCell(3);
            var element3 = document.createElement("input");
            element3.type = "text";
            element3.size = "25";
            element3.disabled = "disabled";
            cell4.appendChild(element3);

            var cell5 = row.insertCell(4);
            var element4 = document.createElement("input");
            element4.type = "text";
            element4.size = "3";
            element4.disabled = "disabled";
            cell5.appendChild(element4);

            var cell6 = row.insertCell(5);
            var element5 = document.createElement("input");
            element5.type = "text";
            element5.size = "3";
            element5.disabled = "disabled";
            cell6.appendChild(element5);

            var cell7 = row.insertCell(6);
            var element6 = document.createElement("input");
            element6.type = "text";
            element6.size = "5";
            cell7.appendChild(element6);

            var cell8 = row.insertCell(7);
            var element7 = document.createElement("input");
            element7.type = "text";
            element7.size = "5";
            cell8.appendChild(element7);

            var cell9 = row.insertCell(8);
            var element8 = document.createElement("input");
            element8.type = "text";
            element8.size = "10";
            cell9.appendChild(element8);

            var cell10 = row.insertCell(9);
            var element9 = document.createElement("input");
            element9.type = "submit";
            element9.value = "Update";
            cell10.appendChild(element9);




        }

        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) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }

            }
            }catch(e) {
                alert(e);
            }
        }


    </SCRIPT>

<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />

</head>

<body onload="setFocus();change();">


<div class="left">
<form action="javascript:addRow('dataTable')" method="POST">
<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td width="25%" colspan="2">
<input type="submit" value="New Item" name="search">
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form>
</br>
<table width="98%" id="dataTable">
<tr bgcolor="97c950">
<b>
<td align="center" width="3%"></td>
<td align="center" width="5%">S#</td>
<td align="center" width="15%">Barcode</td>
<td align="center" width="27%">Item Name</td>
<td align="center" width="4%">Stock</td>
<td align="center" width="4%">Qty</td>
<td align="center" width="6%">Price</td>
<td align="center" width="6%">Disc.Rs.</td>
<!-- <td align="center" width="7%">Disc.%</td> -->
<td align="center" width="10%">Total</td>
<td align="center" width="23%"></td></tr>

  <!-- <form action="javascript:addRow('dataTable')" method="POST">

    <INPUT type="text" name="add" value=""/>
    <INPUT type="submit" value="Add Row" name="search" />
    </form> -->
        <TR>
            <TD><INPUT type="checkbox" name="chk" /></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="textbox" size="15" /> </TD>
            <TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD>

                                    <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
                                                <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
                                                            <TD> <INPUT type="textbox" size="5" /> </TD>
                                                <TD> <INPUT type="textbox" size="5" /> </TD>
                                    <TD> <INPUT type="textbox" size="10" /> </TD>
                                 <TD> <INPUT type="submit" value="Update" /> </TD>

       </TR>

                  </form>


</table>

</div>

Please help me.

share|improve this question
 
Where's the PHP part? (I suspect something else is going than "I am just trying to learn PHP and my [tutorial-based] code doesn't work". Any other information as to the background of this project would be useful.) –  Jared Farrish Jan 17 '12 at 0:52
1  
your code to us is a bit too long, please narrow down your problem to a specific part of the code. –  SiGanteng Jan 17 '12 at 3:01
 
Dear all, my problem is that i want to add rows to html table from mysql, which i can not do this, please help me in this regard and ignore above code, i love to follow the code which you tell me. –  Sheharyar Jan 17 '12 at 7:30
 
OK, I need to know what's going on here. Are you actually getting the barecode(as in a numerical representation of the barcode)? And then also are you opposed to using jQuery? jquery.com If not then I may have some code you could use. –  133794m3r Jan 25 '12 at 8:56

1 Answer

up vote 0 down vote

Long story short, this is the code ( if I understood correctly what you are trying to achive ):

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
    $("#searchitem").focus().filter('input[value!=""]').addClass("orange");
});
</script>
<style type="text/css">
    .orange
    {
        background-color: orange;
    }

    table#dataTable
    {
        empty-cells     : show;
    }

    table#dataTable th
    {
        text-align      : center;
        background-color: #97C950;
    }

    .saved
    {
        background-color: green;
    }

</style>
</head>
<body>
<form action="" method="POST" onSubmit="">
    <input id="searchitem" type="text" size="75" value="" >
    <input type="submit" name="search" value="New Item" >
    <input id="deleteRow" type="button" value="Delete Row" >
</form>

<table style="width:98%;" id="dataTable">
    <tr>
        <th colspan="2" style="width:5%;">S#</th>
        <th style="width:15%;">Barcode</th>
        <th style="width:27%;">Item Name</th>
        <th style="width:4%;">Stock</th>
        <th style="width:4%;">Qty</th>
        <th style="width:6%;">Price</th>
        <th style="width:6%;">Disc.Rs.</th>
        <th style="width:10%;">Total</th>
    </tr>
</table>
<script type="text/javascript">
    $('#searchitem').change(function()
    {
        var t = $('#dataTable');
        t.append('<tr> \
            <td><input type="checkbox"></td> \
            <td>'+t.find('tr').length+'</td> \
            <td><input size="15" type="text" value="'+$(this).val()+'"></td> \
            <td><input size="25" type="text" value=""></td> \
            <td><input size="3" type="text" value=""></td> \
            <td><input size="3" type="text" value=""></td> \
            <td><input size="5" type="text" value=""></td> \
            <td><input size="10" type="text" value=""></td> \
            <td><input size="15" type="text" value=""></td> \
            <td><input type="button" value="Update" onClick="saveItem(event);"></td> \
        </tr>');
    });

    function saveItem(ev)
    {
        // here read all rows from that row, send them via AJAX to the server to be saved
        // you get the current row by looking at ev.currentTarget, something like this in Firefox
        var args = [];
        $(ev.currentTarget).parents('tr:first').find('input[type="text"]').each(function(){ args.push( $(this).val() ); });
        $.post(
            'saveItem.php',
            args,
            function(){ $(ev.currentTarget).addClass('saved');} /* this is triggered onSucces */
        );
    }
</script>
</body>
</html>

This is the long story:

  • you need to insert a new row in the table when you type something in input#searchitem
  • you don't save it in the database yet, first you insert the other columns (quantity, price etc ...)
  • them you hit the update button, the new row is inserted in the database and if everithing is OK the button will be colored "green"

This code is to give you a clue and to push you in the right direction (it's like a proof of concept), so here are more recomandations (hard to give beacause I still didn't understod exactly what are you trying to achive):
GLOBAL:

  • don't just copy/paste this code, try to undertand it, and change it for your own needs

CSS:

  • use external style sheet
  • set fixed columns width for the table

Javascript:

  • check if the bar code exists, highlight the row, and push it in to the visible area if is not visible (or show a box with " there are 5 more hidden rows), you can give names for the inputs like name=barcode ...
  • use those names in the args array to create a named array.

Hope this will help you.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.