How To Assign Value To Label In jQuery In MVC
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of how to assign value to label in jQuery in MVC, to achieves the result here you need to collect user input then append that with label.
The val() method helps you for retrieve users dynamic value from input box. Then binding that text with labels by text() method and to specifies particular element in jQuery you need to use class or id attributes. It allows you to set or return values to html element.
Step By Step Guide On How To Assign Value To Label In jQuery In MVC :-
In html block we defined h1 tag, label, input, button and empty h5 elements. In script block ready method that help you to load script code when opening this program on browser.
Then defined button triggers event, within that collecting user input and placed on label value. To instruct user we displayed some random message at last. These are done by on(), text(), html() and val() methods, refer below briefly explained with stepwise.
<!DOCTYPE html>
<html>
<head>
<title>Assign Label Value</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on("click", function(){
$("#lbl").text($(".inpVal").val());
$("h5").html("Label Updated");
});
});
</script>
</head>
<body>
<h1>Here You Can Assign Label Value As Per Your Wish</h1>
<label id="lbl">Label 1</label>
<input type="text" class="inpVal" placeholder="Enter Label Name">
<button>Assign</button>
<h5></h5>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Like earlier seen ready method allows program initialization on browser then on method binds with button element to process block of code only after triggers click event by user.
- To appends value on selected element first you need to specify that element by defining its attribute value or element name. That’s why label points out by its id attribute value ‘lbl’ with ‘#’ and text() or html() used for same purpose.
- Replacing or inserting new text to particular html element, here we replacing label value with user given text. To retrieve users enter text on text box we need val() function support with input elements class property value ‘inpVal’ and ‘.()dot’.
- Finally, disclose some verification message we printing ‘Label Updated’ on webpage at end. That is binds into h5 tag through html() function in jquery.
- In body block h1 tag for showing heading to end user ‘Here You Can Assign Label Value As Per Your Wish’ .
- Initially, label defined with text ‘Label 1’ and id attribute ‘lbl’. The input box contains class and placeholder properties with respective values ‘inpVal, Enter Label Name’.
- Button ‘Assign’ proceeds entire process after gets click event by end users click and empty pair of h5 helps you show success text on screen.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to assign value to label in jquery. Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we execute this program on browser we can see heading, below that label, empty input box and button.
Now user needs to fill text box and clicks on button, then you can see changes on label text then instruct message at end.
I hope this article on how to assign value to label in jQuery in mvc helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
