Change label in HTML using Jquery - Java @ Desk

Friday, December 30, 2016

Change label in HTML using Jquery

Change label in HTML using Jquery

Changing the label or a message is often required in an application. For example, on a registration page there is a validation required to fill all the fields on click of a button. Instead of showing an alert message, a message in a label looks quiet good in the form. Its more user frieldly.

To update a label, for property is used and a new html is appended to the for property name of the label.

To use the inbuilt function in JS, following library must be included in the HTML file
1) jquery.min.js


Here is the sample html code to change the label value on click of a button

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>

<script type="text/javascript">

function changeLabel() {
    $("label[for='LabelName']").html("Label On Load Changed");
}
</script>

</head>
<body>
 <div style="height: 40px;"></div>

 <p><strong><label for="LabelName">Label On Load</label></strong></p>

 <div>
  <button onclick="changeLabel();">Change Label</button>
 </div>

 <div style="height: 40px;"></div>

</body>
</html>






No comments:

Post a Comment