jQuery
jQuery Get Label Text Examples
HTML Label forms an easy & important part when dealing with the different form elements as it allows us to define labels for them. The HTML Labels add to the usability as it toggles the associated control when the label is clicked upon. So far so good. But what if you needed to get the label text of an input element such as Textbox, Textarea, Checkbox, Select Dropdown, Div,or any other element? In this article, I am going to share with you easy ways to use jQuery to get label text of input elements & page elements with easy to follow examples. So read on to find out more.
How to use jQuery to Get Label Text
Now lets us look at how to get label of different form elements such as textbox, textarea, select dropdown menu, div, list item, etc. by means of examples. I am assuming that we have different input elements on the page with their respective names & IDs. So here is how you can get label text using jQuery:
Example #1: Using jQuery .text(); method to get the Label Text of Input Textbox
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name">
<br>
<input type="submit" name="sbt_get_textbox_text" id="sbt_get_textbox_text" value="Get Input Textbox Label Text">
//Get/Alert Input textbox label text when button is clicked
$('#sbt_get_textbox_text').on("click", function(){
alert( $('label[for=first_name]').text() );
return false;
});Example #2: Using jQuery .text(); method to get the Label Text of Input Textarea
<label for="message">Leave a message:</label>
<br>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<br>
<input type="submit" name="sbt_get_textarea_text" id="sbt_get_textarea_text" value="Get Input Textarea Label Text">
//Get/Alert Input textarea label text when button is clicked
$('#sbt_get_textarea_text').on("click", function(){
alert( $('label[for=message]').text() );
return false;
});Example #3: Using jQuery .text(); method to get the Label Text of Select Dropdown Menu
<label for="states">Pick a State</label>
<select name="states" id="states">
<option value="Texas" selected="selected">Texas</option>
<option value="Illinois">Illinois</option>
<option value="Alabama">Alabama</option>
</select>
<br>
<input type="submit" name="sbt_get_dropdown_text" id="sbt_get_dropdown_text" value="Get Select Dropdown Label Text">
//Get/Alert Select Dropdown label text when button is clicked
$('#sbt_get_dropdown_text').on("click", function(){
alert( $('label[for=states]').text() );
return false;
});Example #4: Using jQuery .text(); method to get the Label Text of Input Checkbox
<p>
<label>
<input type="checkbox" name="fruits" value="apple" id="fruits_0">
Apple</label>
<br>
<label>
<input type="checkbox" name="fruits" value="mango" id="fruits_1">
Mango</label>
<br>
<label>
<input type="checkbox" name="fruits" value="grapes" id="fruits_2">
Grapes</label>
<br>
<input type="submit" name="sbt_get_checkbox_text" id="sbt_get_checkbox_text" value="Get Selected Checkbox Label Text">
</p>
//Get/Alert checked checkboxes text when button is clicked
$('#sbt_get_checkbox_text').on("click", function(){
$('input[name="fruits"]:checked').each(function(index) {
alert( $(this).closest('label').text() );
});
return false;
});Example #5: Using jQuery .text(); method to get the Label Text of Input Radiobutton
<p>
<label>
<input type="radio" name="subscribe" value="Yes" id="subscribe_0">
Yes</label>
<br>
<label>
<input type="radio" name="subscribe" value="No" id="subscribe_1">
No</label>
<br>
<input type="submit" name="sbt_get_radiobutton_text" id="sbt_get_radiobutton_text" value="Get Selected Radibutton Label Text">
</p>
//Get/Alert checked checkboxes text when button is clicked
$('#sbt_get_radiobutton_text').on("click", function(){
$('input[name="subscribe"]:checked').each(function(index) {
alert( $(this).closest('label').text() );
});
return false;
});Example #6: Using jQuery .text(); method to get the Label Text of Input File Upload
<label for="attachment">Select a file </label>
<input type="file" name="attachment" id="attachment">
<br>
<input type="submit" name="sbt_get_file_upload_text" id="sbt_get_file_upload_text" value="Get File Upload Label Text">
//Get/Alert File Upload label text when button is clicked
$('#sbt_get_file_upload_text').on("click", function(){
alert( $('label[for=attachment]').text() );
return false;
});Example #7: Using jQuery .text(); method to get the Label Text of Input Button
<input type="submit" name="test_button" id="test_button" value="This is Test Button">
<br>
<input type="submit" name="sbt_get_button_text" id="sbt_get_button_text" value="Get Button Label Text">
//Get/Alert Button text when button is clicked
$('#sbt_get_button_text').on("click", function(){
alert($('#test_button').attr("value"));
return false;
});Example #8: Using jQuery .text(); method to get the Label Text of Fieldset Legend
<fieldset>
<legend id="my_legend">My Legend</legend>
This is a fieldset. We will get the legend label text using jQuery.
</fieldset>
<input type="submit" name="sbt_get_legend_text" id="sbt_get_legend_text" value="Get Legend Label Text">
//Get/Alert Fieldset Legend text when button is clicked
$('#sbt_get_legend_text').on("click", function(){
alert($('#my_legend').text());
return false;
});Example #9: Using jQuery .text(); method to get the Label Text of Div
<div id="my_div1">This is my first div</div>
<input type="submit" name="sbt_get_div_text" id="sbt_get_div_text" value="Get Div Text">
//Get/Alert div text when button is clicked
$('#sbt_get_div_text').on("click", function(){
alert($('#my_div1').text());
return false;
});Example #10: Using jQuery .text(); method to get the Label Text of List Item
<ul id="list_item">
<li>First Item</li>
<li>Second Item</li>
</ul>
<input type="submit" name="sbt_get_li_text" id="sbt_get_li_text" value="Get 2nd List Item Text">
//Get/Alert 2nd list item text when button is clicked
$('#sbt_get_li_text').on("click", function(){
alert($('#list_item li:nth-child(2)').text());
return false;
});That’s it!
Do you know of any other ways to use jQuery to Get Label Text? Feel free to suggest by commenting below.