Jquery .find() returns undefined in table

Question

I am trying to do a unitprice,quantity, total price table. If I use table I can not get the values of quantity. However, if I don't use any tables it works and I get the quantity values.

The table codes (table.php):

<table border="1"; width="100px"; cellpadding="0"; cellspacing="0";>
<tr>
<td align="center"><b>NO</b></td>
  <td align="center"><b>UNIT PRICE</b></td>
  <td align="center"><b>QTY</b></td>
  </tr>

Calculator code :


<h3>ATT:<h3>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proforma</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
  $(function(){
    $("#click").click(function(){
      $("div").each(function(index,element){
        var a = $(element).find(".quantity").val();
        alert (a);
      });

    })

  });  
  </script>

<style>
a{
  text-decoration:none;
}
input {
  text-align:center
}
</style>
</head>
<body>

<?php $arr = [1,2] ?>
    <?php foreach($arr as $key => $val){ ?>
<div class="prices">

  <tr>
    <td align="center"><?php echo $key; ?></td> 
    <td><input class="unitprice"; type="text"; style="width:80px"></td>
    <td><input class="quantity"; type="text"; style="width:80px"; value= "100"></td>
    <td><input class="totalprice"; type="text"; style="width:80px"></td>

  </div>

</tr>
<?php } ?>

</table>

<input id="click"; type="submit"; value="click";>

</body>
</html>

The calculator alerts me the quantities, however if I include table.php at the begining of calculator, it returns as undefined.

What might be the problem?

Aksen P · Accepted Answer · 2020-03-10T07:46:53.857

1

First, you have wrong-placed tags div and tr, take a look on them. Make them looks like <div><tr>...</tr></div>.

Second, you can specify an if statement as:

if ($(element).find(".quantity").hasClass("quantity")){
    var a = $(element).find(".quantity").val();
    alert (a);
}

$(function(){
    $("#click").click(function(){
      $("tr").each(function(index,element){
        if ($(element).find(".quantity").hasClass("quantity")){
          var a = $(element).find(".quantity").val();
          alert (a);
        }
      }); 
    }) 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
  <td align="center"><b>NO</b></td>
  <td align="center"><b>UNIT PRICE</b></td>
  <td align="center"><b>QTY</b></td>
</tr>
</thead>
<tbody>
  <tr class="prices"> 
<td align="center">1</td>
<td><input class="unitprice" type="text" style="width:80px"></td>
<td><input class="quantity" type="text" style="width:80px" value="110"></td>
<td><input class="totalprice" type="text" style="width:80px"></td>
 
  </tr>
  <tr class="prices"> 
<td align="center">2</td>
<td><input class="unitprice" type="text" style="width:80px"></td>
<td><input class="quantity" type="text" style="width:80px" value="130"></td>
<td><input class="totalprice" type="text" style="width:80px"></td>
 
  </tr>
</tbody>
</table>
  <input id="click" type="submit" value="click">

edited Mar 10 '20 at 07:46

answered Mar 10 '20 at 06:58

Aksen P

4,564
3
14
27

i replaced div and tr tags but still doesn't work with table. I tried if statement but didn't work, even it worked i couldn't use it because later on i will have to multiply the quantity and unitprice values. Therefore i need to use .each() – cem Mar 10 '20 at 07:14
@cem, this `if statement` is in `each loop`. Look at snippet. – Aksen P Mar 10 '20 at 07:15
yes it works without table but again i included table.php at the begining of calculator and didn't work.( i replaced my script with yours.) – cem Mar 10 '20 at 07:25
@cem, that because [you can't put div tag as you wish](https://stackoverflow.com/questions/23440362/can-we-add-div-inside-table-above-every-tr). Use `tr` instead of `div` during `each loop`, and put your `class="prices"` into `tr` tags. updated – Aksen P Mar 10 '20 at 07:41
thank you very much, it works when i use tr tag for each loop. Still don't understand why we can't use div tag in each loop. – cem Mar 10 '20 at 07:46
@cem, you can read the reference page. `div` tags works weird in that way. you're welcome – Aksen P Mar 10 '20 at 07:48

Jquery .find() returns undefined in table

1 Answers1