How can I get the attribute type and its value

Question

Here is my code

  foreach ($data as $key => $value) {
        ?>
        <div class="col-md-4">


                <div style="border: 1px solid #ddd">
                    <img width="200px" height="200px" src="<?= $value["image"]; ?>">
                    <h4 class="text-info"><?= $value["name"]; ?></h4>
                    <h4 class="text-info"><?= $value["price"]; ?></h4>
                    <input type="number" class="form-control" value="1" name="quantity">
                    <input type="hidden" name="name" value="<?= $value["name"]; ?>">
                    <input type="hidden" name="price" value="<?= $value["price"]; ?>">
                    <input type="button" class="btn btn-success" name="add" value="Sepete Ekle" id="add">
                </div>

        </div>
        <?php

How can I get the attribute type=hidden and name=price once the button clicked

Do you want to select an `` by using it's `name` attribute? If so, see jQuery's [Attribute Selectors](https://api.jquery.com/category/selectors/attribute-selectors/) — showdev, Mar 05 '19 at 18:04
Possible duplicate of [How can I select an element by name with jQuery?](https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery) — showdev, Mar 05 '19 at 18:19

score 1 · Accepted Answer · edited Mar 05 '19 at 18:27

This jQuery sample handles the click event of the add button, and finds the sibling price. It writes this value to the console.

Please review,

siblings() - DOM traversal function

CSS Attribute Selectors

$("input.btn[name='add']").click(function(e) { //the click of the add button
  console.log($(this).siblings("input[type='hidden'][name='price']").val()); //write the val of the hidden field
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">


  <div style="border: 1px solid #ddd">
    <img width="10" height="10" src="">
    <h4 class="text-info"></h4>
    <h4 class="text-info"></h4>
    <input type="number" class="form-control" value="1" name="quantity">
    <input type="hidden" name="name" value="one">
    <input type="hidden" name="price" value="$1">
    <input type="button" class="btn btn-success" name="add" value="Sepete Ekle" id="add">
  </div>

</div>
<div class="col-md-4">


  <div style="border: 1px solid #ddd">
    <img width="10" height="10" src="">
    <h4 class="text-info"></h4>
    <h4 class="text-info"></h4>
    <input type="number" class="form-control" value="2" name="quantity">
    <input type="hidden" name="name" value="two">
    <input type="hidden" name="price" value="$2">
    <input type="button" class="btn btn-success" name="add" value="Sepete Ekle" id="add">
  </div>

</div>

How can I get the attribute type and its value

1 Answers1