Ajax Forms using jQuery

  • We can create a form using jQuery AJAX.
  • jquery AJAX easily passes the data to server using jQuery Ajax method.

Example : Create a form using Ajax jQuery to add Employee Name

<html>
     <body>
     <script type="text/javascript">
     if(document.getElementByID("name").value)
     {
          var fname = document.getElementById("name").value;
          document.write("Welcome<b>"+pname+"</b>!");
     }
     </script>
     </body>
</html>
<html>
<head>
     <script type = "text/javascript" src="jquery.1.2.3.min.js"></script>
     <script type="text/javascript" language = "javascript">
     $(document).ready(function()
     {
          $("#btn").click(function(event){var name=$("#name").val();
          $("#d1").load('show.js',{"name":n});
       });
     });
     </script>
</head>
     <body>
          Employee Name:<input type = "input" id="n" size="20"/><br/>
          <div id = "d1" style = "background-color:white;">Click on button </div>
          <input type = "button" id = "btn" value = "Display welcome message"/>
     </body>
</html>


Output:
ajax form using jquery
In the above example we have created a simple form to submit employee name.
▲