Post
Ask Question
rahul patil

rahul patil

  • NA
  • 160
  • 8.5k

How to displaying user filled form data using javascript?

May 13 2020 8:29 AM
I want to displaying filled form data using javascript
I m working on single page application concept.
signup.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
  7.     <script src="signup.js"></script>  
  8. </head>  
  9. <body>  
  10.     <form id="txtPersonalInformation">  
  11.         <h1>Personal Information</h1>  
  12.         First Name:<input id="txtfname" type="text" /><br />  
  13.         Middle Name:<input id="txtmname" type="text" /><br />  
  14.         Last Name:<input id="txtlname" type="text" /><br />  
  15.         <input id="btnnext" type="button" value="Next" />  
  16.     </form>  
  17. </body>  
  18. </html>  
 signup.js
  1. //next button click event  
  2.  $(document).ready(function () {  
  3.      $('#btnnext').click(function (event) {  
  4.          $("#txtPersonalInformation").load("ContactInformation.html #txtContactInformation");  
  5.      });  
  6.  });  
 ContactInformation.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
  7.     <script src="ContactInformation.js"></script>  
  8. </head>  
  9. <body>  
  10.     <form id="txtContactInformation">  
  11.         <h1>Contact Information</h1>  
  12.         Email Id:<input id="txtemailid" type="text" /><br />  
  13.         Password:<input id="txtpass" type="password" /><br />  
  14.         Contact No:<input id="txtcontactno" type="number" /><br />  
  15.         <input id="btnsubmit" type="button" value="Submit" />  
  16.     </form>   
  17. </body>  
  18. </html>  
 ContactInformation.js
  1. $(document).ready(function () {  
  2.     $('#btnsubmit').click(function (event) {  
  3.         debugger  
  4.           
  5.        $("#txtContactInformation").load("/signup.html #txtPersonalInformation"); //HERE I want to display the PersonalInformation filled form detail  
  6.        $("#txtContactInformation").load("/ContactInformation.html #txtContactInformation"); //HERE I m trying to display the ContactInformation filled form detail  
  7.          
  8.     });  
  9. });  
when user filled the form data and i want to display there data?
 

Answers (3)