How to get a current value from input JS/jQuery

Question

im a beginner on Javascript , i have 3 button ADD TO CART each one has a value , so when i click on one of them , i keep getting the value of first button this is my HTML CODE

<div class="container main-section">
              <div class="row">
                <div class="col-md-4 col-sm-4 col-xs-12 product">
                  <div class="row product-part">
                    <div class="col-md-12 col-sm-12 colxs-12 img-section">
                      <img src="'. $photolink["photo"] .'">
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12 product-title">
                      <h1>'. $row["produit"] .'</h1>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12 product-description">
                      <p>'. $row["description"] .' </p>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12 product-cart">
                      <div class="row">
                        <div class="col-md-6 col-sm-12 col-xs-6">
                          <p>'. $row["price"] .' $</p>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-6 text-right product-add-cart">
                          <input type="submit"  value="ADD TO CART" class="btn btn-success" id="productid" data-value="'. $row["id"] .'" onclick="getID()" >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

this is my javascript code

function getID()
{
var val = document.getElementById('productid').getAttribute('data-value');
console.log(val);
}

When you say 'I have 3 items' do you mean three `input` elements with the same `id` of `productid`? If so, that's your problem. `id` attributes need to be unique within the DOM — Rory McCrossan, Feb 23 '18 at 15:31
Use classes instead. You can select the elements by `getElementsByClassName()` or `querySelectorAll()`, but note that you'll need to loop through them to get their values — Rory McCrossan, Feb 23 '18 at 15:36

Luicy · Accepted Answer · 2018-02-23T15:35:48.953

1

You must select an element specificly. Using pure JQuery:

function getID(that) {
  console.log($(that).attr("data-value"));
}

Then on your HTML:

<input type="submit" value="ADD TO CART" class="btn btn-success" id="productid" data-value="'. $row["id"] .'" onclick="getID(this)">

edited Feb 23 '18 at 15:35

answered Feb 23 '18 at 15:33

Luicy

23
1
14

2

jQuery is overkill IMO. Just do `that.dataset.value`. – Mikey Feb 23 '18 at 15:34
I never learnt vanilla javascript but yeah, that'd probably be easier but oh well. – Luicy Feb 23 '18 at 15:34
i tried ur solution i get only **undefined** – clackj Feb 23 '18 at 15:36
Replace `this` from `console.log(..)` to `that`, misstype from my side, check updated answer. – Luicy Feb 23 '18 at 15:37
i spent hours looking for solution , Thank you very much @Luicy works fine, i appreciate it – clackj Feb 23 '18 at 15:39
Very well, enjoy. – Luicy Feb 23 '18 at 15:40
@Luicy do you have any idea if i want to get another input value but same product box, sorry for inconvenience – clackj Feb 23 '18 at 15:48
You do the same. $(that).attr("data-tag"); – Luicy Feb 23 '18 at 15:54
@Luicy ` ` i get only undefined – clackj Feb 23 '18 at 16:43

How to get a current value from input JS/jQuery

1 Answers1