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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="txtPersonalInformation">
<h1>PersonalInformation</h1>
FirstName:<input id="txtfname" type="text" /><br />
LastName:<input id="txtlname" type="text" /><br />
MiddleName:<input id="txtmname" type="text" /><br />
Address:<input id="txtaddress" type="text" /><br />
<input id="btnnext" type="button" value="Next" />
</div>
</body>
</html>

PersonalInformation.js

$(document).ready(function () {
$('#btnnext').submit(function (event) {
event.preventDefault();
debugger
$(this).replaceWith(('<div id = "txtContactInformation"></div>'));
//$("#txtContactInformation").load("ContactInformation.html");
});
});

ContactInformation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<form id="txtContactInformation">
<h1>ContactInformation</h1>
EmailId:<input id="txtemailid" type="text" /><br />
Password:<input id="txtpass" type="password" /><br />
ContactNo:<input id="txtcontactno" type="number" /><br />
<input id="Button1" type="button" value="Submit" />
</div>
</body>
</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)

MVC Using StreamReader-Writer with Textfile

How to create table definition using NUGET command?