使用jquery ajax更改产品数量

时间:2018-03-15 13:33:51

标签: javascript jquery ajax

我有一个购物车和一个显示表格中所有产品的页面。我能够删除产品,但我希望能够改变它们的数量。

我的表格包含一个输入字段,您可以在点击“更新”时更改数量。下面的购物车按钮,我将产品名称和数量发送到我的PHP脚本。问题是,它总是发布第一个产品。

可能因为所有人都有相同的班级名称,我该怎么办呢?

这就是我的表格:

<div class="col-md-8">
   <div class="kl-title-block clearfix text-left tbk-symbol--line  tbk-icon-pos--after-title">
      <h2 class="tbk__title montserrat fs-34 fw-semibold black winkelmandtitle">Uw Winkelmand</h2>
      <span class="tbk__symbol ">
      <span></span>
      </span>
      <h4 class="tbk__subtitle fs-22 fw-thin">Bent u niets vergeten?</h4>
   </div>
   <div class="table-responsive">
      <table class="table carttable">
         <thead>
            <tr>
               <th>Verwijder</th>
               <th>Afbeelding</th>
               <th>Product</th>
               <th>Prijs</th>
               <th>Aantal</th>
               <th>Totaal</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td><a href="#" class="remove" id="Bad 13" title="Verwijder dit product">×</a></td>
               <td>
                  <a href="baden/bad-13" class="product-title">
                  <img class="attachment-shop_thumbnail" src="images/defaultimage.jpg" alt="Bad 13" title="Bad 13">
                  </a>
               </td>
               <td>
                  <a href="baden/bad-13" class="product-title">
                  Bad 13
                  </a>
               </td>
               <td>€ 1500</td>
               <td>
                  <div class="quantity">
                     <input type="number" step="1" min="0" name="quantity" id="Bad 13" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
                  </div>
               </td>
               <td>€ 1500</td>
            </tr>
         </tbody>
         <tbody>
            <tr>
               <td><a href="#" class="remove" id="Bad 14" title="Verwijder dit product">×</a></td>
               <td>
                  <a href="baden/bad-14" class="product-title">
                  <img class="attachment-shop_thumbnail" src="images/defaultimage.jpg" alt="Bad 14" title="Bad 14">
                  </a>
               </td>
               <td>
                  <a href="baden/bad-14" class="product-title">
                  Bad 14
                  </a>
               </td>
               <td>€ 800</td>
               <td>
                  <div class="quantity">
                     <input type="number" step="1" min="0" name="quantity" id="Bad 14" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
                  </div>
               </td>
               <td>€ 800</td>
            </tr>
         </tbody>
         <tbody>
            <tr>
               <td><a href="#" class="remove" id="Bad 1" title="Verwijder dit product">×</a></td>
               <td>
                  <a href="baden/bad1" class="product-title">
                  <img class="attachment-shop_thumbnail" src="cms/images/bad.jpg" alt="Bad 1" title="Bad 1">
                  </a>
               </td>
               <td>
                  <a href="baden/bad1" class="product-title">
                  Bad 1
                  </a>
               </td>
               <td>€ 1000</td>
               <td>
                  <div class="quantity">
                     <input type="number" step="1" min="0" name="quantity" id="Bad 1" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
                  </div>
               </td>
               <td>€ 1000</td>
            </tr>
         </tbody>
      </table>
      <input type="submit" class="button updatebutton" name="update_cart" value="Wijzig winkelmand">
   </div>
</div>

这是我的jquery脚本,它会触发一个ajax帖子。

//Wijzig winkelmand met het aantal producten
tpj('.cartsection').on('click', '.updatebutton', function(event) {
  var $edit = tpj('.quantityclass').attr('id'),
  $aantal = tpj('.quantity').find( "input[name='quantity']" ).val(),
  url = 'includes/cartoverzicht.php';

  var posting = tpj.post( url, { edit: $edit, aantal: $aantal} );

  posting.done(function( data ) {
    var content = tpj( data );
    tpj( "#cartresult" ).empty().append( content );
  });
});

问题是,当我查看网络时,无论我点击什么产品,都会发布此消息:

edit:Bad 13
aantal:1

我该如何解决?

我可以将所有数量发布到我的PHP脚本吗?什么是最好的解决方案?

2 个答案:

答案 0 :(得分:1)

问题在于:

var $edit = tpj('.quantityclass').attr('id'),

您正在使用类选择器来获取值,它始终返回第一个元素值。而是使用this

见这个例子:

&#13;
&#13;
$(document).ready(function(){
  $('.list').click(function(){
    console.log( $('.list').html() );
  });

  $('.listing').click(function(){
    console.log( $(this).html() );
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
First list (It always return the first element value)
</p>
<li class="list">One</li>
<li class="list">Two</li>
<li class="list">Three</li>

<p>
Another List (It always return the clicked element value)
</p>

<li class="listing">One</li>
<li class="listing">Two</li>
<li class="listing">Three</li>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

你正在遇到问题,因为你只是抓住了第一个选择器。您还设计了API,以便在您希望发送整个更新集时仅发送一个更新。

如果您想更新整个购物车的数量,可以采用以下方法。

$counter = count($_POST['tkt-slctr-qty-346']);
    $image = '';
        for($i=0; $i< $counter; $i++)
        {
        $data = $_POST['tkt-slctr-qty-346'][$i];
        //Then Write the code that processes the data here
        }