jQuery text input tag value method function

jquery jQuery text input tag value method function Jquery Advantages

How to get access and set the value of HTML input tags?

We can easily access the value of HTML input tag and we can also set the value of input tag using the jQuery val() function.

Syntax of jQuery val() function

For getting the value of HTML tag <input>.

$("TagSelector").val();     //Syntax
$("#username").val();     //Example

For setting or assigning the value to HTML input tag. $("TagSelector").val("Field Value"); Let's considering two examples , example to get the the value of input field and example to assign or set the value to the input field.

1- On button click Get the value of input with id=" username" and alert that value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="mybutton"> Get input tag Value</button>
<input id="username" value="codinpk@codingpk.com" />

<script type="text/javascript">

     $("#mybutton").click(function()
        {

          var username= $("#username").val();
          alert(username);

        });

   
    
</script>

Output of getting input value

2- Onclick assign some value to the input tag id=" password" using jQuery val() function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="mybutton1"> Set Input Tag value</button>
<input id="password" value="" />

<script type="text/javascript">

     $("#mybutton1").click(function()
        {

          var password= $("#password").val('jQuery121');
          

        });

   
    
</script>

Output of setting the value of input field

jquery Jquery Advantages Chapter Next »