удаление товаров из корзины с помощью JQuery.post()

277
14 июля 2017, 04:38
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script
        src="http://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous">
   </script>
   <title>Document</title>
   <link rel="stylesheet" href="catalog.css"/>
</head>
<body>
  <?php if(!empty($cart)):?>
      <a href="catalog.php">go to catalog</a>
  <?php endif;?>
  <?php if(!empty($cart)):?>
    <table>
           <?php foreach($cart as $key=>$val):?>
                <?php $count++;?>
        <tr>
            <td><?php echo $count;?></td>
            <td ><img class="cart_img"  src="<?php echo IMG_PATH.$val['product_img'];?>"></td>
            <td ><?php echo isset($error[$val['product_name']])?'Осталось '.$error[$val['product_name']]:$val['product_quantity'];?></td>
            <td>price</td>
            <td><?php echo $num[$val['product_name']];?></td>
            <td>total</td>
            <td>
             <form method="post">   
                <input type="button" id="del" name="del[<?php echo $val['product_name']; ?>]" onclick="f()" value="Delete from cart">
             </form>
             </td>
        </tr>
           <?php endforeach;?>             
    </table> 
 <?php else:?>
    <h1>Your cart is empty!</h1>
    <h2><a href="catalog.php">go to shopping</a></h2>
 <?php endif;?>
 <script>

       function f(){
           var id=$(this).attr("name");
           alert(id);
           $.post(
                  "cart.php",
                   id,
                  );
       };
    </script>

Подскажите как в jquery скрипте правильно распознать атрибут нажатой кнопки?

Answer 1
  1. Убрать у кнопок id="del", т.к. у Вас на странице, наверное, будет много таких кнопок. А много элементов на странице с одним id - это плохо. Возникнут проблемы с работой.
  2. Убрать у кнопок onclick="f()" и добавить какой-нибудь уникальный класс (например, delete-from-cart-btn) или дата-атрибут (допустим, data-role) для дальнейшего навешивания на него слушателя событий.

  3. Повесить на кнопки слушатели событий. Например:

    $('.delete-from-cart-btn').on('click', function() {
  var id = $(this).attr("name");
  alert(id); // выведет на экран нужный Вам ID
});
READ ALSO
Uncaught SyntaxError: Unexpected identifier в function init()
jQuery

Uncaught SyntaxError: Unexpected identifier в function init()

Есть код:

 451
Элементы &lt;marquee&gt; располагаются вертикально в САФАРИ
CSS

Элементы <marquee> располагаются вертикально в САФАРИ

На сайте есть бегущая строка , абсолютно везде элементы бегут в строчку, но в SAFARI, либо в еще некоторых браузерах, в частности в адаптиве (при...

 346
Не работают @media правила ни Chrome, ни в Firefox
CSS

Не работают @media правила ни Chrome, ни в Firefox

Не работают медиа правилаНе отображаются даже в DevTools ни в одном из браузеров

 313
Позиционирование элементов в Flexbox
CSS

Позиционирование элементов в Flexbox

 295