CODEWITHSUNDEEP
javascriptjquery
user2497963
user2497963

Reputation: 43

How can I get the attribute type and its value

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

Upvotes: 1

Views: 160

Answers (1)

Steve0
Steve0

Reputation: 2253

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>

Upvotes: 1

Related Questions