Friday, October 1, 2021

How to get and set Value of a text field using jQuery? Example Tutorial

Hello guys, In the last jQuery tutorial, you learn how to dynamically add a text file into a form, and in this tutorial, I will show you how to get and set the value of the text field using jQuery. This is a common task and there is a good chance that you have already done something similar in your project. Our requirement is simple, the text field initially contains the value "username" and as soon as the user clicks on it to enter a username, it should become clear. After the user has entered the username of the user id, he can click on the submit button, and then your program should print the username and text field again becomes clear.

We can do this easily by using the val() function of jQuery, which is used to both get and set the value from any HTML element in jQuery. If you select an element and call val() then it returns the value attribute and if you call val("new_value") then it updates the value attribute as new_value, I mean, set the value.

You can also use prop() or attr() function to retrieve and assign values from input type text using jQuery.

Also, things have changed a lot in the last few years with so many JavaScript enhancements like ES6 and TypeScript. Now you can do most of the things in plain Javascript which requires jQuery, hence a good knowledge of modern JavaScript is essential for any developer.

If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hands-on courses to learn ES 6 and other new Javascript features.




jQuery example to get and set value from textbox

Here is a working jQuery example to accomplish this task. In this program, I have an input tag with type text to collect the username, a button submits and a div to display the result. The default value of the text box is "Enter username" which appears when the page is loaded.

At the same time, by using jQuery we assign a click handler to the text field and button so that once the user clicked on the text field it becomes clear and when the user clicks on the submit button we retrieve the value and show it on output div.

For both getting and setting value, we have used the val() function from jQuery as shown below. If you want to learn more about the common jQuery functions like val() and attr() and others then I also suggest you go through The Complete jQuery course on Udemy.

jQuery example to get and set value from textbox


The course is not free but very affordable and you can buy in just $10 on Udemy flash sales which happen every now and then.

<html>
   <head>
 <title>How to get and set value from textfield using jQuery</title>
   </head>
   <body>
 <h2>How to get and set value from text input type using jQuery</h2>
      <input type="text" id="username" value="Enter Username" />
      <button id="btn_submit">Submit</button>
      <div id="result"></div>
      <script src="//code.jquery.com/jquery-1.6.2.min.js"></script>
      <script>
         $(document).ready(function() {
          
         $("#username").click(function() {
         $(this).val("");
         });
          
         $("#btn_submit").click(function(){
         var value = $("#username").val(); 
         $("#result").text("You have entered: " + value);
          
         $("#username").val("");
         });
          
         });
      </script>
   </body>
</html>




How to run this HTML and jQuery code?

If you look at the code it's nothing but an HTML file with some JavaScript in between. You can just copy-paste this code in a file and save it as an HTML file like test.html and then open that file in a browser like Chrome, Firefox, or any other browser.

When you open this file into a browser, it will download the jQuery script file from a CDN mentioned in the file and when you click the submit button after entering a value into the text field it will fetch and show it to you.

Here is how it would look like when you run this program:

How to get and set the value of a text field using jQuery?


You can see that it is displaying "superuser" because that's what I had entered into the text field and submitted. You can play with this as you wish, every time you will hit the submit button the text will be updated.


That's all about how to get and set value from the text field using jQuery. You can also do the same thing in plain JavaScript by getting the element using id like the getElementById("username") and accessing the value attribute, but jQuery is jQuery.



Other JavaScript and jQuery tutorials you may like to explore
  • Top 10 Courses to learn JavaScript (courses)
  • 20 jQuery Interview Questions for Web Developers (list)
  • Top 10 Courses to learn Angular for web developers (courses)
  • How to redirect an URL using jQuery? (tutorial)
  • Top 5 free Courses to learn Node.js for web developers (courses)
  • How to get current URL parameters using jQuery? (tips)
  • My favorite free JavaScript online tutorials (see)
  • 10 Examples of jQuery selectors (examples)
  • Top 5 Courses to learn React.js and Redux (courses)
  • 3 ways to solve jQuery: Uncaught Reference: $ is not defined error (solution)
  • Top 5 books to learn JavaScript for Web Developers (books)
  • How to use jQuery class and ID selector on a page? (example)
  • Top 5 Courses to learn jQuery online for FREE (courses)
  • jQuery document.ready() function vs JavaScript window.onload (answer)

Thanks for reading this article so far, If you find this jQuery tutorial useful then please share it with your friends and colleagues. If you have any questions or feedback then please drop a comment.

 P. S. - A good knowledge of Modern JavaScript is essential for any web developer as now you can do most of the things in plain JavaScript which requires jQuery earlier. If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy.

Posted by at
Labels: , ,

No comments:

Post a Comment

Feel free to comment, ask questions if you have any doubt.

Subscribe to: Post Comments (Atom)