0

I'm trying to model with add to cart using jQuery. but it has a small issue of how can I solve that. if I click the mybtn button model shows and work properly but quantity it's not working properly. How can I solve that? Thanks in advance.

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<body>
  <div class="shoe single-item hvr-outline-out">
    <form method="post" action="#" class="cart">
      <input type="hidden" name="id" id="id" id="<%= doc._id%>">
      <input type="hidden" name="cmd" value="_cart">
      <input type="hidden" name="add" value="1">
      <input type="hidden" id="pname_<%= doc._id%>" name="shoe_item" value="<%=doc.product_name%>">
      <input type="hidden" id="amount_<%= doc._id%>" name="amount" value="<%=doc.price%>">
    </form>
    <button type="submit" id="myBtn1_<%= doc._id%>" data-id="<%= doc._id%>" value="<%= doc._id%>" class="shoe-cart pshoe-cart myBtn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button>
  </div>

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <br/>
        <center>
          <table class="row"> </table>
        </center>
      </div>
    </div>
  </div>
</body>

<script type="text/javascript">
  $(document).ready(function() {
    $(".myBtn").click(function() {
      $('#myModal').modal('show');
    });
  });
</script>

<script type="text/javascript">
  var count = 0;
  $(document).ready(function() {
    $(".myBtn").click(function() {
      var id = $(this).data('id');
      var p_name = $('.cart').find('#pname_' + id).val();
      var count1 = count++;
      var amount = $('.cart').find('#amount_' + id).val();
      var html = "<tr id='tr_'" + id + "><td>" + p_name + "</td><td>" + amount + "</td><td><input type='text' name='count' id='count_" + id + "' size='3' value='" + count + "'></td>/tr>";
      var quan = $('.row').find('#count_' + id).val();
      if (!quan) {
        $('.row').append(html);
      } else {
        $('#count_' + id).append(count);
      }
    });
  });
</script>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
ayyanar arumugaravi
  • 1

1 Answers1

0

Add click event after modal show

$('#myModal').on('shown.bs.modal', function () {
  $(".myBtn").click(function() {
     //your code here
  });
})
ysf
  • 4,634
  • 3
  • 27
  • 29
Ariyan
  • 26
  • 5
  • thank you, but how to add to cart properly in my code – ayyanar arumugaravi May 18 '20 at 16:53
  • Use local storage to store user selected data, then in checkout page process the data to server. To display the data, get the data from local storage... Don't forget to clear the local storage after processing check this anwer https://stackoverflow.com/questions/11123622/how-to-set-session-variable-in-jquery – Ariyan May 19 '20 at 04:22