CODEWITHSUNDEEP
javascriptclosest
reve berces
reve berces

Reputation: 349

put on alert the value of input type text when button is clicked

I'm using closest(javascript) for the first time and I'm trying to alert the input of user, the alert for the other elements work fine but the alert for the user input doesn't work

here's the html and php

<div class="form-group row my-5">
  <?php
    $sqlb = "SELECT * from products where status ='active' order by availability asc";
    $resultb = $conn->query($sqlb);
    while($rowb = $resultb->fetch_assoc()){
      $id=$rowb['id'];
      $names=$rowb['names'];
      $price=$rowb['price'];
      $image=$rowb['image'];

      $availability=$rowb['availability'];
      $qty=$rowb['qty'];
      $description=$rowb['description'];
  ?>
    <div class="col-sm-3 mb-2 mb-sm-0 my-3">
      <div class="col-sm col-md-12 btn-cart" id="<?php echo $id ?>" style="border:2px solid black; border-radius:5px">
        <div class="" style="text-align:center">
          <img src="../<?php echo $image ?>" alt="" width="100" height="100" style="border-radius:5px;"><br>
          <span class="names"><?php echo $rowb['names']; ?></span><br>
          <span class="price mr-2">₱<?php echo $rowb['price']; ?> </span><br>
          <input type="text" name="" value="<?php echo $qty  ?>" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="11" class="item_qty">
        </div>

        <button type="button" name="button" id="add" class="btn btn-block btn-primary" width="10em">Add <i class="fa fa-plus"></i> </button>
      </div>
    </div>
  <?php } ?>
</div>

this is my script

$('button#add').click(function() {
  var id = $(this).closest('div.btn-cart').attr('id');
  var item_name = $('div#' + id + ' span.names').text();
  var item_price = $('div#' + id + ' span.price').text();
  var item_pic = $('div#' + id + ' span.image').text();
  var item_qty = $('div#' + id + ' input.item_qty').attr('value');
  if (item_qty <= 0) {
    item_qty = 1;
  }
  alert(item_qty);
  alert(item_name);
  alert(item_price);
  alert(id);
});

only the alert(item_qty) which is input type="text" doesn't work, it just keeps on showing an alert of "1" which is from 

var item_qty = $('div#' + id + ' input.item_qty').attr('value');
if (item_qty <= 0) {
  item_qty = 1;
}

even when i type "654321" or any other number

Upvotes: 0

Views: 176

Answers (1)

Mike
Mike

Reputation: 1337

You are accessing the value attribute, which you have set with <input type="text" name="" value="<?php echo 1 ?>". What you want to do instead is access the DOM value with:

$('div#' + id + ' input.item_qty').val()

-or-

$('div#' + id + ' input.item_qty').get(0).value

Addendum

You can improve your code in other way. In many cases you are using the selector 'div#' + id, which the div is not necessary and slows down the jQuery lookup. As a micro-optimization (and less code) consider making similar changes as the following throughout your code:

From: $('div#' + id + ' input.item_qty')
To: $('#' + id).find('input.item_qty')

Additionally, you could use the native JavaScript syntax as opposed to jQuery:

jQuery: $('div#' + id + ' input.item_qty').attr('value')
Vanilla: document.querySelector('#'+id+' input.item_qty').value

Rewritten

$('#add').click(function() {
  let $container = $(this).closest('div.btn-cart');

  let item = {
    name:  $container.find('span.names').text(),
    price: $container.find('span.price').text(),
    pic:   $container.find('span.image').text(),
    qty:   $container.find('input.item_qty').val()
  };

  if (item.qty <= 0)
    item.qty = 1;

  alert(`
    qty:   ${item.qty}
    name:  ${item.name}
    pic:   ${item.pic}
    price: ${item.price}
  `);
});

Upvotes: 0

Related Questions