jquery ajax multiple text box same class post first only value

Question

Nabeel_2 0 Newbie Poster

10 Years Ago

 $(".qty").change(function(){
    $.each($('.qty'), function(){
    var form_data ={

        rowid: $('.rowid').val(),
        qty: $('.qty').val(),
        ajax: '1',

    };

    alert(form_data);

    $.ajax({
        url:"<?php echo site_url('cart1/update');?>",
        type:'POST',
        data: form_data,
        async: false,
        success: function(data) {
                  alert(data);
                     }
        });
            });

first-post javascript javascript-jquery

4 Contributors
21 Replies
3K Views
1 Week Discussion Span
Latest Post 10 Years Ago Latest Post by Airshow

All 21 Replies

diafol

10 Years Ago

Perhaps you'd like to post a question?

steelbrain 10 Newbie Poster

10 Years Ago

 $(".qty").each(function(){
    var me = $(this);
    me.change(function()
        var form_data ={

            rowid: $('.rowid').val(),
            qty: me.val(),
            ajax: '1',

        };

        alert(form_data);

        $.ajax({
            url:"<?php echo site_url('cart1/update');?>",
            type:'POST',
            data: form_data,
            async: false,
            success: function(data) {alert(data);}
        });
    });
});

Edited 10 Years Ago by steelbrain because: fixed a minor typo

<M/> commented: Try not giving the code :P +10

steelbrain 10 Newbie Poster

10 Years Ago

what's the markup you're using.
Paste a piece of it and I'll advise accordingly.

steelbrain 10 Newbie Poster

10 Years Ago

<?php if ($cart = $this->cart->contents()):  ?>
<div class="CSSTable1">   
   <table>
           <tr>
               <td>Product Name</td>
               <td>Quantity</td>
               <td>Option</td>
               <td>Price</td>
               <td>Remove Item</td>
               </tr>
                <?php
                    $count = count($cart);
                    for($a=0;$a<$count;++$a){
                        $item = $cart[$i];
                        $i = $a+1;
                        echo '<tr data-id="'.$i.'" data-type="product">';
                            echo '<td><input type="text" id="'.$i.'.rowid" name="qty" value="'.$item['rowid'].'" maxlength="3" size="5" class="qty" /></td>';
                            echo '<td>';
                                 if ($this->cart->has_options($item['rowid']))
                                       foreach ($this->cart->product_options($item['rowid']) as  $option => $value ){
                                           echo $option . ": <em>" . $value . "</em>";
                                       }
                            echo '</td>'
                            echo '<td> Rs. '.$item['subtotal'].'</td>';
                            echo '<td class="remove">'.anchor("shop/remove/$item[rowid]",'X').'</td>';
                        echo '</tr>';
                    }
                ?>
             <tr class="total">
                 <td colspan="3"><strong>Total</strong></td>
                 <td>Rs.<?php echo $this->cart->total();   ?> </td>
              </tr>
         </table>
     </div>

Edited 10 Years Ago by steelbrain

Airshow 416 WiFi Lounge Lizard

10 Years Ago

I'm not too sure what the question is but here are a few observations from a client-side perspective :

Don't use async:false!!! AJAX is fundamentally asynchronous and async:false should never have been provided. It is, at best, unreliable.
You can't rely on an arbitrary cart-entry index to identify the correct product to update - should be a procuctID.
It is safest to update the entire cart after any changes; a safe process is (i) disable UI to prevent further user interaction, (ii) make ajax request, (iii) receive response, (iv) update cart, (v) unlock interface.
To attach a 'change' handler to the quantity fields, don't loop through product rows. That's horribly inefficient as the loop, at each iteration, creates a new handler. Do it as below, with a one unique hander. Judicious use of .closest(), gets you up from the changed .qty element to its cart-item wrapper (its containing <tr>), and the need for a javascript closure disappears.
Adopting the suggestion at 3 above to update the entire cart after a change, you will find it simplest to delegate the change handler to a parent container (assume #cart).
As you now have a mechanism to update the entire cart, you don't need to serve it as part of the orignal document; call your update function on page load.

The javascript should be something like this :

$('#cart').on('change', 'input.qty', function() {
    var me = $(this);
    $.ajax({
        url: "<?php echo site_url('cart1/update'); ?>",
        type: 'POST',
        data: {
            'productid': me.closest("tr").attr('id'),
            'qty': me.val(),
            'ajax': '1'
        },
        dataType: 'json'
    }).done(function(data) {
        console.dir(data);//for debugging
        //here update the entire cart from the `data` delivered in the ajax response
    });
});

Edited 10 Years Ago by Airshow

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.

Nabeel_2 0 Newbie Poster · Answer 1 · 2014-09-19T04:18:40+00:00

thanks it working not properly i need this for rowid too because whatever value i gave in either textbox it keep change only the first

Nabeel_2 0 Newbie Poster · Answer 2 · 2014-09-19T05:11:04+00:00

<?php if ($cart = $this->cart->contents()):  ?>
<div class="CSSTable1">   

   <table>

           <tr>
               <td>Product Name</td>
               <td>Quantity</td>
               <td>Option</td>
               <td>Price</td>
               <td>Remove Item</td>
               </tr>

    <?php $i = 1; ?>        
              <?php foreach ($cart as $item): ?>

                      <input type="hidden" id="<?php echo $i ?>.rowid" name="rowid" value="<?php echo $item['rowid']?>" class="rowid"/>
                   <tr> 

                       <td> <?php echo $item ['name']; ?>  </td>



                      <td><input type="text" name="qty" value="<?php echo $item['qty']?>" maxlength="3" size="5" class="qty"  /></td>

                       <td><?php if ($this->cart->has_options($item['rowid'])) {
                           foreach ($this->cart->product_options($item['rowid']) as  $option => $value ){

                               echo $option . ": <em>" . $value . "</em>";
                           } }?> 

                           </td>

                       <td> Rs.<?php echo $item['subtotal'];   ?> </td>
                       <td class="remove">
                           <?php echo anchor ('shop/remove/'.$item['rowid'], 'X'); ?>

                       </td>


                  </tr>
<?php $i++; ?>

             <?php endforeach; ?>
             <tr class="total">
                 <td colspan="3"><strong>Total</strong></td>
                 <td>Rs.<?php echo $this->cart->total();   ?> </td>
              </tr>
         </table>
     </div>

steelbrain 10 Newbie Poster · Answer 3 · 2014-09-19T15:04:15+00:00

and the javascript would be

$('[data-type=product]').each(function(){
    var me = $(this),my_id = me.attr('data-id');
    me.find('.qty').change(function(){
        var form_data ={
            rowid: my_id,
            qty: $(this).val(),
            ajax: '1',
        };
        alert(form_data);
        $.ajax({
            url:"<?php echo site_url('cart1/update');?>",
            type:'POST',
            data: form_data,
            async: false,
            success: function(data) {alert(data);}
        });
    });
    me.removeAttr('data-id');
});

Nabeel_2 0 Newbie Poster · Answer 4 · 2014-09-19T18:25:43+00:00

thanks you but i getting error in array 14 and 15 undefined offset:1
$item = $cart[$i];
$i = $a+1;

Nabeel_2 0 Newbie Poster · Answer 5 · 2014-09-19T18:31:23+00:00

Nabeel_2 0 Newbie Poster

10 Years Ago

plus its is codeignitor cart

Edited 10 Years Ago by Nabeel_2

steelbrain 10 Newbie Poster · Answer 6 · 2014-09-19T19:01:09+00:00

replace $item = $cart[$i]; with $item = $cart[$a];.
That was a typo :-)

Nabeel_2 0 Newbie Poster · Answer 7 · 2014-09-20T09:29:27+00:00

thanks now i am getting error A PHP Error was encountered
Severity: Notice
Message: Undefined offset: 0

 on line 14     $item = $cart[$a];

steelbrain 10 Newbie Poster · Answer 8 · 2014-09-20T09:42:36+00:00

it's strange.... let me know we're online. lets chat live on IRC and get this resolved.

Nabeel_2 0 Newbie Poster · Answer 9 · 2014-09-21T08:09:12+00:00

Nabeel_2 0 Newbie Poster

10 Years Ago

sorry i m still stuck

steelbrain 10 Newbie Poster · Answer 10 · 2014-09-21T09:34:14+00:00

post the output of print_r($cart) before the loop, and make sure to write exit; right before it.

Nabeel_2 0 Newbie Poster · Answer 11 · 2014-09-21T10:27:11+00:00

Array ( [db8de7a46a113b9050fad160adaafd73] => Array ( [rowid] => db8de7a46a113b9050fad160adaafd73 [id] => 59 [qty] => 1 [price] => 900.00 [name] => Baseball Bat [Product_Description] => kookabura [unit_price] => 900.00 [options] => Array ( [Colour] => Black ) [subtotal] => 900 ) )

Nabeel_2 0 Newbie Poster · Answer 12 · 2014-09-21T10:36:29+00:00

and when i change $a=0 to $a=1 the Undefined offset: 0 gone but not showing any thing

steelbrain 10 Newbie Poster · Answer 13 · 2014-09-21T20:14:04+00:00

because array keys have string names here, we'd be better using foreach as loop. With foreach the inner part would be

<?php
    $count = count($cart);
    $i=1;
    foreach($cart as &$cart_item){
        echo '<tr data-id="'.$i.'" data-type="product">';
        echo '<td><input type="text" id="'.$i.'.rowid" name="qty" value="'.$cart_item['rowid'].'" maxlength="3" size="5" class="qty" /></td>';
        echo '<td>';
           if ($this->cart->has_options($cart_item['rowid']))
           foreach ($this->cart->product_options($cart_item['rowid']) as  $option => $value ){
           echo $option . ": <em>" . $value . "</em>";
           }
        echo '</td>'
        echo '<td> Rs. '.$cart_item['subtotal'].'</td>';
        echo '<td class="remove">'.anchor("shop/remove/$cart_item[rowid]",'X').'</td>';
        echo '</tr>';
        ++$i; // Incrementing the count at the end of the loop
    }
?>

Nabeel_2 0 Newbie Poster · Answer 14 · 2014-09-24T11:50:48+00:00

<?php
    $count = count($cart);
    $i=1;
    foreach($cart as &$cart_item){
        echo '<tr data-id="'.$i.'" data-type="product">';

     echo '<td>'.$cart_item['name'].'</td>';  
    echo '<td><input type="text" id="'.$i.'.rowid" name="qty" value="'.$cart_item['qty'].'" maxlength="3" size="5" class="qty" /></td>';
        echo '<td>';
           if ($this->cart->has_options($cart_item['rowid']))
           foreach ($this->cart->product_options($cart_item['rowid']) as  $option => $value ){
           echo $option . ": <em>" . $value . "</em>";
           }
        echo '</td>';
        echo '<td> Rs. '.$cart_item['subtotal'].'</td>';
        echo '<td class="remove">'.anchor("shop/remove/$cart_item[rowid]",'X').'</td>';
        echo '</tr>';
        ++$i; // Incrementing the count at the end of the loop
    }
?>

Nabeel_2 0 Newbie Poster · Answer 15 · 2014-09-24T11:51:02+00:00

  <script type="text/javascript">
$('[data-type=product]').each(function(){
    var me = $(this),my_id = me.attr('data-id');
    me.find('.qty').change(function(){
        var form_data ={
            rowid: my_id,
            qty: me.val(),
            ajax: '1',
        };
        alert(form_data);
        $.ajax({
            url:"<?php echo site_url('cart1/update');?>",
            type:'POST',
            data: form_data,
            async: false,
            success: function(data) {alert(data);}
        });
    });
    me.removeAttr('data-id');
});
  </

Nabeel_2 0 Newbie Poster · Answer 16 · 2014-09-24T11:53:27+00:00

now quantity is not changing it keep stuck at 1 whatever I type on qty it keep sending 1

jquery ajax multiple text box same class post first only value

Recommended Answers Collapse Answers

All 21 Replies

Recommended Answers