Teach with us

How to get and set form element values with jQuery?

To get a form value with jQuery, you need to use the val() function. To set a form value with jQuery, you need to use the val() function, but to pass it a new value.

Example

You can try to run the following code to learn how to get and set form element values with jQuery −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
         
             $("#buttonSet").click(function () {
                 $("#txtBox").val("Amit");
                 $("input:radio").val(["male"]);
                 $("#buttonGet").removeAttr('disabled');
            });
             $("#buttonGet").click(function () {
                $("#result").html(
                    $("#txtBox").val() + "<br/>" +
                    $("input:radio[name=rd]:checked").val()
                );
            });
         });
      </script>
   </head>
   <body>
      Name <br />
      <input id="txtBox" type="text" />
      <br /><br />
      Gender <br />
      <input type="radio"  name="rd" value="male"/> Male
      <input type="radio"  name="rd" value="female"/> Female
      <br /><br />
      <input id="buttonSet" type="button" value="Set Values" />
      <input id="buttonGet" type="button" value="Get Values" disabled="disabled" />
      <p id="result"></p>
   </body>
</html>
Updated on 14-Feb-2020 05:24:52

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements