locked
How to load a second page using ajax jquery? RRS feed

  • Question

  • User1421057020 posted

    I want to when user fill up the PersonalInformation form then click the next button then display the second page ContactInformation on that same page just like single page application

    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</div> <div>

    $(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

    when user click first page next button then display the second form on that same page? help

    I refer this article : https://www.tutorialrepublic.com/jquery-tutorial/jquery-ajax-load.php

    Wednesday, May 13, 2020 4:28 AM

Answers

  • User634495354 posted

    Sorry, the image can't loaded.

    If you apply the code I provided and still failed, I don't know what else will cause this error.

    Did you show the complete ”PersonalInformation.html“ code? Did the ”PersonalInformation.js“ is a separate file?

    If yes, maybe you missing a script reference in PersonalInformation.html. I'll show you complete coed.

    PersonalInformation.html

    <!DOCTYPE html>    
    <html>    
    <head>    
        <meta charset="utf-8" />    
        <title></title>    
    	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">
    	
    	</script>
    	<script src="PersonalInformation.js"></script>
    </head>    
    <body>    
    <div id="div1">
        <form id="txtPersonalInformation">   
    	 <span>fsdfasf</span>
            <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>
        </div>    
    </body>    
    </html>  

    PersonalInformation.js

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 8:28 AM

All replies

  • User634495354 posted

    Ok,I don't know if the result of your operation is that the page has not changed or it has become blank, many reasons for this error. You can check it through the browser debugging mode.

    I change some code to realize the function.

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">
    	</script>	
    	<script>
    	$(document).ready(function () {    
    		    $('#btnnext').click(function () {    
    		        $("#txtPersonalInformation").load("ContactInformation.html #txtContactInformation")
    		        //event.preventDefault();    
    		       // debugger    
    		        //$(this).replaceWith(('<div id = "txtContactInformation"></div>'));   
    				 //alert("ok");
    		    });    
    		});  
    	</script>

    By the way ,why your code have <form> but end with </div>?

    Wednesday, May 13, 2020 6:31 AM
  • User1421057020 posted

    When I click on next button nothing happen and not displaying any error message 

    PersonalInformation.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </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" />
        </form>
    </body>
    </html>

    contactinformation.html

    <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="btn-submit" type="button" value="Submit" />
        </form> 
    </body>

    PersonalInformation.js

    var script = document.createElement('script');
    script.type = 'text/javascript';
    
     $(document).ready(function () {
         $('#btnnext').click(function (event) {
             debugger
             $("#txtPersonalInformation").load("ContactInformation.html #txtContactInformation");
         });
     });

    what should I m doing wrong  help

    Wednesday, May 13, 2020 7:06 AM
  • User634495354 posted

    Sorry, the image can't loaded.

    If you apply the code I provided and still failed, I don't know what else will cause this error.

    Did you show the complete ”PersonalInformation.html“ code? Did the ”PersonalInformation.js“ is a separate file?

    If yes, maybe you missing a script reference in PersonalInformation.html. I'll show you complete coed.

    PersonalInformation.html

    <!DOCTYPE html>    
    <html>    
    <head>    
        <meta charset="utf-8" />    
        <title></title>    
    	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">
    	
    	</script>
    	<script src="PersonalInformation.js"></script>
    </head>    
    <body>    
    <div id="div1">
        <form id="txtPersonalInformation">   
    	 <span>fsdfasf</span>
            <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>
        </div>    
    </body>    
    </html>  

    PersonalInformation.js

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 8:28 AM
  • User1421057020 posted

    Did the ”PersonalInformation.html“ is a separate file? 

    Yes

    Did the ”PersonalInformation.js“ is a separate file?

    Yes

    <script src="PersonalInformation.js"></script>  

    I missing aboe line in PersonalInformation.html file

    thanks for give the time to solved my issue

    Wednesday, May 13, 2020 8:47 AM
  • User634495354 posted

    It is my pleasure to help you solve the problem.

    Wednesday, May 13, 2020 8:55 AM