Post
Ask Question
rahul patil

rahul patil

  • NA
  • 160
  • 8.5k

How to load a second page using ajax jquery?

May 12 2020 10:27 AM
I want to load next page(contact information page) when user fillup the personal information page
when user click first page next button then hide the first form(PersonalInformation) and display the second form(ContactInformation) on that same page
 
PersonalInformation.html
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8" />    
  5.     <title></title>    
  6. </head>    
  7. <body>    
  8.     <form id="txtPersonalInformation">    
  9.         <h1>PersonalInformation</h1>    
  10.         FirstName:<input id="txtfname" type="text" /><br />    
  11.         LastName:<input id="txtlname" type="text" /><br />    
  12.         MiddleName:<input id="txtmname" type="text" /><br />    
  13.         Address:<input id="txtaddress" type="text" /><br />    
  14.         <input id="btnnext" type="button" value="Next"  />    
  15.     </div>    
  16. </body>    
  17. </html>  
PersonalInformation.js
  1. $(document).ready(function () {    
  2.     $('#btnnext').submit(function (event) {    
  3.         event.preventDefault();    
  4.         debugger    
  5.         $(this).replaceWith(('<div id = "txtContactInformation"></div>'));    
  6.         //$("#txtContactInformation").load("ContactInformation.html");  
  7.     });    
  8. });  
ContactInformation.html
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8" />    
  5.     <title></title>    
  6.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>     
  7. </head>    
  8. <body>    
  9.     <form id="txtContactInformation">    
  10.         <h1>ContactInformation</h1>    
  11.         EmailId:<input id="txtemailid" type="text" /><br />    
  12.         Password:<input id="txtpass" type="password" /><br />    
  13.         ContactNo:<input id="txtcontactno" type="number" /><br />    
  14.         <input id="Button1" type="button" value="Submit" />    
  15.     </div>    
  16. </body>    
  17. </html>  
ContactInformation.js
 
//empty page not getting any code
 
I refer this article:
 
https://www.tutorialrepublic.com/jquery-tutorial/jquery-ajax-load.php
 
when I press the next button nothing happen means not load the second page?

Answers (1)