How to get a current value from input JS/jQuery [duplicate]

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
– Rory McCrossan, Commented Feb 23, 2018 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
– Rory McCrossan, Commented Feb 23, 2018 at 15:36

Luicy · Accepted Answer · 2018-02-23 15:35:48Z

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, 2018 at 15:35

answered Feb 23, 2018 at 15:33

Luicy

331 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mikey Over a year ago

jQuery is overkill IMO. Just do that.dataset.value.

Luicy Over a year ago

I never learnt vanilla javascript but yeah, that'd probably be easier but oh well.

clackj Over a year ago

i tried ur solution i get only undefined

Luicy Over a year ago

Replace this from console.log(..) to that, misstype from my side, check updated answer.

clackj Over a year ago

i spent hours looking for solution , Thank you very much @Luicy works fine, i appreciate it

|

Collectives™ on Stack Overflow

How to get a current value from input JS/jQuery [duplicate]

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related