1
Answer

How to load a second page using ajax jquery?

rahul patil

rahul patil
4y
505
1
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)
Next Recommended Forum