How do i get attribute values from html inputs?

Question

I have a radio button that looks like this:

<input class="MCQRadio" id="MCQ" mcq-id="1" name="MCQ" question-id="1" type="radio" value="MCQ" /> MCQ

[EDIT]

When i click the radiobutton, and several radio buttons have the same class name, how do i retrive the question-id value and mcq-id value from the specific button? Preferably with jQuery.

I have already set up a click handler like this:

$(document).ready(function () {

    $('.MCQRadio').click(function () {

I tried but i did not know the right words to search for, therefor the results were not useful :( — Nanek
– Nanek, Commented Aug 17, 2011 at 16:17

heisenberg · Accepted Answer · 2011-08-17 16:04:06Z

3

$('#MCQ').attr('question-id')
$('#MCQ').attr('mcq-id')

answered Aug 17, 2011 at 16:04

heisenberg

9,7691 gold badge32 silver badges38 bronze badges

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

Comments

rickyduck · Accepted Answer · 2011-08-17 16:19:28Z

3

var mcq-id = $('#MCQ').attr("mcq-id");
var question-id = $('#MCQ').attr("question-id");

edited Aug 17, 2011 at 16:19

answered Aug 17, 2011 at 16:03

rickyduck

4,08414 gold badges62 silver badges95 bronze badges

3 Comments

heisenberg Over a year ago

I wouldn't use a class based selector here given that you have an ID available and he's not given any indication that this element is the only one on the page using that class.

rickyduck Over a year ago

Fair point, but he didn't specify that he didn't want us to use the class. But you're right.

Nanek Over a year ago

I have edited my questions. Several radio buttons have the same class name. I need to get the value from a the specific radiobutton when i click on it.

James Hill · Accepted Answer · 2011-08-17 16:27:13Z

0

Most of the answers given already are correct. I would make one addition to avoid traversing the DOM twice to find your radio button element.

//Store the jQuery object in a variable so that it's only retrieved once
var $myRadio = $('#MCQ');

//Get your attributes
var mcq-id = $myRadio.attr("mcq-id");
var question-id = $myRadio.attr("question-id");

You could also attach to the click event of all the radio buttons (by class selector) and grab the attributes in the event handler:

$('.MCQRadio').click(function() {
    //Use $(this) to grab the attribute value of the selected element
    var mcq-id = $(this).attr('question-id');
    var question-id = $(this).attr('mcq-id');
});

edited Aug 17, 2011 at 16:27

answered Aug 17, 2011 at 16:12

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

1 Comment

Nanek Over a year ago

This is the answer i was looking for. Although i dont think you can use "-" in variable names, so i changed it to mcqid and questionid. Thanks.

Jake · Accepted Answer · 2011-08-17 16:25:02Z

0

The other answers already show you how to get the particular attributes. But since you added in your edit that you want to get the attributes from the particular one that was clicked you can try:

$('.MCQRadio').click(function() {

   $(this).attr('question-id');
   $(this).attr('mcq-id');

});

answered Aug 17, 2011 at 16:25

Jake

112 bronze badges

Comments

rickyduck · Accepted Answer · 2011-08-17 16:31:09Z

-1

These will return the values you want.

$('#MCQ').attr('mcq-id')
$('#MCQ').attr('question-id')

edited Aug 17, 2011 at 16:31

rickyduck

4,08414 gold badges62 silver badges95 bronze badges

answered Aug 17, 2011 at 16:04

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

2 Comments

heisenberg Over a year ago

No, it won't. That will look for an element with ID=MCQRadio. If you want to select by class name you would use a '.' and not an '#'.

James Hill Over a year ago

This won't work. In the example above, there is no element with an ID of "MCQRadio".

Collectives™ on Stack Overflow

How do i get attribute values from html inputs?

5 Answers 5

Comments

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related