jQuery
jQuery Set Label Text Examples
In the previous article, we talked about HTML Labels and how they form an easy & important part when dealing with the different form elements as it allows us to define labels for them. Let’s assume that you have some HTML elements on a web page but without their corresponding labels or their existing labels need to be changed. What if you needed to set 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 jQuery to set label text of input elements & page elements with easy to follow examples. So read on to find out more.
How to use jQuery to Set Label Text
Now lets us look at how to set the 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 set the label text using jQuery:
Example #1: Using jQuery .text(); method to Set 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_set_textbox_text" id="sbt_set_textbox_text" value="Set Input Textbox Label Text">
//Set Input textbox label text when button is clicked
$('#sbt_set_textbox_text').on("click", function(){
$('label[for=first_name]').text('MY CUSTOM LABEL TEXT');
return false;
});Example #2: Using jQuery .text(); method to Set 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_set_textarea_text" id="sbt_set_textarea_text" value="Set Input Textarea Label Text">
//Set Input textarea label text when button is clicked
$('#sbt_set_textarea_text').on("click", function(){
$('label[for=message]').text('MY CUSTOM LABEL TEXT');
return false;
});Example #3: Using jQuery .text(); method to Set 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_set_dropdown_text" id="sbt_set_dropdown_text" value="Set Select Dropdown Label Text">
//Set Select Dropdown label text when button is clicked
$('#sbt_set_dropdown_text').on("click", function(){
$('label[for=states]').text('MY CUSTOM LABEL TEXT');
return false;
});Example #4: Using jQuery .text(); method to Set the Label Text of Input Checkbox
<label for="fruits_0">Apple</label>
<input type="checkbox" name="fruits" value="apple" id="fruits_0">
<br>
<label for="fruits_1">Mango</label>
<input type="checkbox" name="fruits" value="mango" id="fruits_1">
<br>
<label for="fruits_2">Grapes</label>
<input type="checkbox" name="fruits" value="grapes" id="fruits_2">
<br>
<input type="submit" name="sbt_set_checkbox_text" id="sbt_set_checkbox_text" value="Set Selected Checkbox Label Text">
//Set checked checkboxes text when button is clicked
$('#sbt_set_checkbox_text').on("click", function(){
$('input[name="fruits"]:checked').each(function(index) {
var id = $(this).attr('id');
$("label[for='"+id+"']").text('MY CUSTOM LABEL TEXT');
});
return false;
});Example #5: Using jQuery .text(); method to Set the Label Text of Input Radiobutton
<label for="subscribe_0">Yes</label>
<input type="radio" name="subscribe" value="Yes" id="subscribe_0">
<br>
<label for="subscribe_1">No</label>
<input type="radio" name="subscribe" value="No" id="subscribe_1">
<br>
<input type="submit" name="sbt_set_radiobutton_text" id="sbt_set_radiobutton_text" value="Set Selected Radibutton Label Text">
//Set checked checkboxes text when button is clicked
$('#sbt_set_radiobutton_text').on("click", function(){
$('input[name="subscribe"]:checked').each(function(index) {
var id = $(this).attr('id');
$("label[for='"+id+"']").text('MY CUSTOM LABEL TEXT');
});
return false;
});Example #6: Using jQuery .text(); method to Set 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_set_file_upload_text" id="sbt_set_file_upload_text" value="Set File Upload Label Text">
//Set File Upload label text when button is clicked
$('#sbt_set_file_upload_text').on("click", function(){
$('label[for=attachment]').text('MY CUSTOM LABEL TEXT');
return false;
});Example #7: Using jQuery .text(); method to Set 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_set_button_text" id="sbt_set_button_text" value="Set Button Label Text">
//Set Button text when button is clicked
$('#sbt_set_button_text').on("click", function(){
$('#test_button').attr("value", 'MY CUSTOM BUTTON VALUE');
return false;
});Example #8: Using jQuery .text(); method to Set the Label Text of Fieldset Legend
<fieldset>
<legend id="my_legend">My Legend</legend>
This is a fieldset. We will set the legend label text using jQuery.
</fieldset>
<input type="submit" name="sbt_set_legend_text" id="sbt_set_legend_text" value="Set Legend Label Text">
//Set Fieldset Legend text when button is clicked
$('#sbt_set_legend_text').on("click", function(){
$('#my_legend').text('MY CUSTOM LABEL TEXT');
return false;
});Example #9: Using jQuery .text(); method to Set the Label Text of Div
<div id="my_div1">This is my first div</div>
<input type="submit" name="sbt_set_div_text" id="sbt_set_div_text" value="Set Div Text">
//Set div text when button is clicked
$('#sbt_set_div_text').on("click", function(){
$('#my_div1').text('MY CUSTOM LABEL TEXT');
return false;
});Example #10: Using jQuery .text(); method to Set the Label Text of List Item
<ul id="list_item">
<li>First Item</li>
<li>Second Item</li>
</ul>
<input type="submit" name="sbt_set_li_text" id="sbt_set_li_text" value="Set 2nd List Item Text">
//Set 2nd list item text when button is clicked
$('#sbt_set_li_text').on("click", function(){
$('#list_item li:nth-child(2)').text('MY CUSTOM LABEL TEXT');
return false;
});That’s it!
Do you know of any other ways to Set Label Text Using jQuery? Feel free to suggest by commenting below.