How to Get HTML Given Name and Value Using JQuery

Question

Trying to grab the html of an input element within a set of input elements. All of them have the same name, but different html and values. How can I grab the html from an input with a value of theme and a value equal to some number between 1-9?

Example:

<input type="radio" name="theme" value="1" checked> Option 1<br>
<input type="radio" name="theme" value="2"> Option 2<br>
<input type="radio" name="theme" value="3"> Option 3<br>
<input type="radio" name="theme" value="4"> Option 4<br>
<input type="radio" name="theme" value="5"> Option 5<br>
<input type="radio" name="theme" value="6"> Option 6<br>
<input type="radio" name="theme" value="7"> Option 7<br>
<input type="radio" name="theme" value="8"> Option 8<br>
<input type="radio" name="theme" value="9"> Option 9<br>

Random scenario, I need to grab the html of the input with the name=theme and value=4, i.e. "Option 4".

Thanks everyone!

Mohammad Hamedani · Accepted Answer · 2017-06-03 06:05:40Z

2

You can use jquery attribute selector:

$('input[name="theme"][value="4"]').html();

answered Jun 3, 2017 at 6:05

Mohammad Hamedani

3,3543 gold badges13 silver badges23 bronze badges

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

3 Comments

Ethan Over a year ago

Trying to pass value in from string, I have changed it to look like this: $('input[name="theme"][value="'+array[2]+'"]') but it is not working

Mohammad Hamedani Over a year ago

What is array or specially array[2]?

Louys Patrice Bessette Over a year ago

@Ethan: Accept the answer. For more wizard tweaks involving unmentionned before arrays and loops... Ask another question.

Mark · Accepted Answer · 2017-06-03 06:12:15Z

you could use label or span to wrap you text beside your radio button. that way, it would be easier to target the text with JQuery

HTML :

<input type="radio" name="theme" value="1" checked><span> Option 1</span><br>
<input type="radio" name="theme" value="2"><span> Option 2</span><br>
<input type="radio" name="theme" value="3"><span> Option 3</span><br>
<input type="radio" name="theme" value="4"><span> Option 4</span><br>
<input type="radio" name="theme" value="5"><span> Option 5</span><br>
<input type="radio" name="theme" value="6"><span> Option 6</span><br>
<input type="radio" name="theme" value="7"><span> Option 7</span><br>
<input type="radio" name="theme" value="8"><span> Option 8</span><br>
<input type="radio" name="theme" value="9"><span> Option 9</span><br>

JS :

var tmp = $('input[name="theme"][value="4"]').next().text();
alert(tmp);

demo : https://jsfiddle.net/L8xzhu9u/

Bobby Speirs · Accepted Answer · 2017-06-03 06:17:08Z

-2

The input element doesn't have any text associated with it. Instead, you want to grab the next sibling and display the text content that it holds.

$('input[name="theme"][value="4"]').get(0).nextSibling.textContent;

Alternatively, you can wrap the 'Option 4' text in a span as previously mentioned.

edited Jun 3, 2017 at 6:17

answered Jun 3, 2017 at 6:11

Bobby Speirs

6672 gold badges7 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to Get HTML Given Name and Value Using JQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related