Change value of html input attribute on button click using JQUERY

Question

I have a html code containing input field as below:

<input id="'+count+'" name="quan'+obj+'" type="button" data-quantity="1"/>

Whereas, id and name of input field are dynamic as shown above because id count and name obj are dynamic. (Ranges from 1-5)

That means at certain time, the above input field could be:

<input id="4" name="quan2" type="button" data-quantity="1"/>

Now, What I want to do is to get the data-quantity value of input field when my name of input field is quan3 OR quan(N) Whatever (N) would be.

data-quantity also contains dynamic value.

funcation get()
{
   count=3;
   obj=2;
   // What to do here to get the value of data-quantity???????
}

Note: I have also tried this below but doesn't worked.

$(".quan" + obj).attr("data-quantity","4"); // NOT WORKED
$("#" + count).attr("data-quantity","4"); // NOT WORKED

Are you trying to get or set the data attribute ? Because both of your attempts appear to be attempts at setting a value... not getting it. — devlin carnate, Jan 05 '18 at 22:44
Why not getting every input but then filter the one you need? — Nikola Mitic, Jan 05 '18 at 22:45
Possible duplicate of [How to get the data-id attribute?](https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — devlin carnate, Jan 05 '18 at 22:46
No its not duplicate. We can use $(this).data("id"); when the same field is clicked. — kamranbhatti585, Jan 05 '18 at 22:56

score 1 · Answer 1 · answered Jan 05 '18 at 22:48

You tried .quan, but the . indicates a class and you tried #, but that indicates id. To query for an attribute, you need [] as shown below. Also ^= with an attribute query means "starts with" so you really don't need to worry about the number value unless it matters to your logic.

var count = 3;
var obj = 2;

// Report the 'data-quantity' attribute value now:
console.log($("input[name^='quan']").attr("data-quantity"));

// Locate all elements that have a `name` attribute that 
// has a value that starts with 'quan' and set their 'data-quantity'
// attribute value to "4".
$("input[name^='quan']").attr("data-quantity","4"); 

// Report the 'data-quantity' attribute value now:
console.log($("input[name^='quan']").attr("data-quantity"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="4" name="quan2" type="button" data-quantity="1">

No, I have already explained in my question that the **name** is dynamic. I mean there could be 5 input fields with name="quan1" & name="quan2" & name="quan3" ..... name="quan4" — kamranbhatti585, Jan 05 '18 at 22:59
@kamranbhatti585 Yes, I understand that. You also said you wanted to get a reference to the input regardless of what the number was on the end of `quan` and this code does that. — Scott Marcus, Jan 05 '18 at 23:01
Thank you for your time. Above post from another fellow answered my question rightly. — kamranbhatti585, Jan 06 '18 at 00:02

Nikola Mitic · Accepted Answer · 2018-01-05T23:33:53.683

1

Check this one.

You want to get attr value of data-quantity by selecting input with a name that ends with 1,2,3...n.

This is how it can be done.

function getAttrValueFromInput (marker) {
 const attrValue = $(`input[name^='quan${marker}']`).data('quantity');
  
  return attrValue;
}

function setAttrValueFromInput (marker, value) {
$(`input[name^='quan${marker}']`).attr('data-quantity', value);
}

setAttrValueFromInput(2, 2000);


console.log(getAttrValueFromInput(2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="1" name="quan1" type="button" data-quantity="1"/>
<input id="2" name="quan2" type="button" data-quantity="12"/>
<input id="3" name="quan3" type="button" data-quantity="90"/>

edited Jan 05 '18 at 23:33

answered Jan 05 '18 at 23:00

Nikola Mitic

1,298
3
11
23

Please don't link to 3rd party sites to demonstrate your code as those links can die over time. Just include it in a code snippet right here. – Scott Marcus Jan 05 '18 at 23:03
Thanks Scott. As for jQuery, it is jQuery. – Nikola Mitic Jan 05 '18 at 23:04
And how to change the value data-quantity? Because changing the value is also in my question. – kamranbhatti585 Jan 05 '18 at 23:30
Check the answer again – Nikola Mitic Jan 05 '18 at 23:34
I added set function – Nikola Mitic Jan 05 '18 at 23:34
OMG. You saved my life. I was trying to do it from 5 hours straight. Thank you soo much. – kamranbhatti585 Jan 06 '18 at 00:01
You probably want to remove the `^` from `^=` because it means *starts with* and you don't want `name^=quan1` to be able to match with `quan14` – René Jan 06 '18 at 00:27
Yes you are right. You don’t actully need that. You can go with just = – Nikola Mitic Jan 06 '18 at 00:30

Change value of html input attribute on button click using JQUERY

2 Answers2