How to get form data with JQuery

December 31, 2020 admin

In this tutorial, we are going to see how to get form data with JQuery. To get the values of a form with jQuery, we use the function val().

Script: Get form data with JQuery

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
             $("#get").click(function () {
                $("#output").html(
                    $("#txt").val() + "<br/>" +
                    $("input:radio[name=s]:checked").val()
                );
            });
         });
      </script>
   </head>
   <body>
      Name : <input id="txt"/>
      <br /><br />
      Gender : <input type="radio"  name="s" value="Male"/> Male
      <input type="radio"  name="s" value="Female"/> Female
      <br /><br />
      <input id="get" type="button" value="Get Data"/>
      <p id="output"></p>
   </body>
</html>