Home/ Questions/Q 7871489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T01:55:17+00:00

I have a page with an add item button. When this button is clicked,

  • 0

I have a page with an “add item” button. When this button is clicked, an ajax call is made and a table is returned with all the information from the database based on the sku entered. (Dummy data is there now for testing.) If the button is only clicked once, there is no trouble incrementing or decrementing the qty value. If the button is clicked two, or more, times, if you click the increment button on the second table it will increase the value in the first table.

I have added a counter that gives a unique number to each table created. I think what I want to do is figure out how to determine the counter number for the specific table that is being incremented and pass it to the javascript function so it works with that specific entry.

Here is the code with the button, ajax call, and javascript:

<script type="text/javascript">
    var count = 1;
    $('#items').live('pageinit',function(event){
        $('#additem').click(function () {
            //alert("add clicked");
            var request = $.ajax({
                url: "http://www.furnguy.com/app-pages/additem.php",
                type: "POST",
                data: {COUNTER : count},
                dataType: "html"
            });

            request.done(function(html) {
                //alert("here");
                if (html != '') {
                    $('#salesitems').append(html).trigger('create');
                }
            });

            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
            });
            count++;
        });
    });


    function deleteItem() {
        $('table').click(function(){
            $(this).parent().remove();
        });
    };
    function increaseQty() {
        var currentVal = parseInt($("#qty").val());
        if (currentVal != NaN) {
            $("#qty").val(currentVal + 1);
        }
    };
    function decreaseQty() {
        var currentVal = parseInt($("#qty").val());
        if (currentVal != NaN) {
            $("#qty").val(currentVal - 1);
        }
    };



</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
    <div data-role="header">
        <h1>Sales Entry</h1>
    </div><!-- /header -->
    <div data-role="content">
        <div id="main_nav">
            <span style="float: left; display: inline; width: 100px;">
                <label>Enter SKU</label>
            </span>
            <span style="float: left; display: inline; width: 250px;">
                <input type="text" name="initialsku" id ="initialsku" />
            </span>
            <br /><br /><br />
            <button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>

            <!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
            <div id="salesitems"></div>
        </div>
    </div><!-- /content -->
</body>
</html>

here is the page being called by the ajax:

<?php
$counter = $_POST['COUNTER'];
?>
<body>

<div data-role="fieldcontain"> 
<div class="addItems"> 
    <table id="myTable" style="border-bottom: 1px solid black;"> 
        <tr> 
            <td style="width: 50px;"> 
                <label for="qty">Qty:</label> 
            </td> 
            <td style="width: 75px;"> 
                <input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
                <input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
                <input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
            </td> 
            <td style="width: 50px;"> 
                <label for="sku">SKU:</label> 
            </td> 
            <td style="width: 350px;"> 
                <input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" /> 
            </td> 
            <td style="width: 50px;"> 
                <label for="retail">Retail:</label> 
            </td> 
            <td style="width: 250px;"> 
                <input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99"  /> 
            </td>
            <td id="tableNumber">
                <?php echo $counter; ?>
            </td> 
        </tr> 
        <tr> 
            <td style="width: 50px;"> 
                <label for="desc">Desc:</label> 
            </td> 
            <td colspan="5"> 
                <input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." /> 
            </td> 
            <td> 
                <input type="button" value="X" onclick="deleteItem();" />
            </td> 
        </tr> 
    </table> 
</div> 
</div>

Anyone have suggestions about this? I would really appreciate the help as I have been working on this for a couple days now.

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Every time you click the button, you are inserting a new table with a #qty input. When you later try to increase quantity, jQuery just finds the first #qty in the dom: your first table.

    You should probably set a unique id on your qty input, e.g.:

    <input type="button" value="+" id="increase" onclick="increaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty_<?php echo $_POST['INITIALSKU']; ?>" value="1" style="float: left; display: inline;" />

    and then rewrite the increase/decrease functions to take the id of the field to modify. I don’t actually speak PHP but you get the idea

    • 0