locked
How to displaying user filled form data using jquery? RRS feed

  • Question

  • User1421057020 posted

    I want to display a filled form data using Jquery

    I'm working on a single page application concept.

    signup.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="signup.js"></script>
    </head>
    <body>
        <form id="txtPersonalInformation">
            <h1>Personal Information</h1>
            First Name:<input id="txtfname" type="text" /><br />
            Middle Name:<input id="txtmname" type="text" /><br />
            Last Name:<input id="txtlname" type="text" /><br />
            <input id="btnnext" type="button" value="Next" />
        </form>
    </body>
    </html>

    signup.js

    //next button click event
     $(document).ready(function () {
         $('#btnnext').click(function (event) {
             $("#txtPersonalInformation").load("ContactInformation.html #txtContactInformation");
         });
     });

    ContactInformation.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="ContactInformation.js"></script>
    </head>
    <body>
        <form id="txtContactInformation">
            <h1>Contact Information</h1>
            Email Id:<input id="txtemailid" type="text" /><br />
            Password:<input id="txtpass" type="password" /><br />
            Contact No:<input id="txtcontactno" type="number" /><br />
            <input id="btnsubmit" type="button" value="Submit" />
        </form> 
    </body>
    </html>

    ContactInformation.js

    $(document).ready(function () {
        $('#btnsubmit').click(function (event) {
            debugger
    
           $("#txtContactInformation").load("/signup.html #txtPersonalInformation"); //HERE I want to display the PersonalInformation filled form detail
           $("#txtContactInformation").load("/ContactInformation.html #txtContactInformation"); //HERE I m trying to display the ContactInformation filled form detail
    
        });
    });

    I m referring below article

    https://www.tutorialsteacher.com/jquery/jquery-load-method

    after the user filled the form data, how can I display the data that the user input?

    help

    Wednesday, May 13, 2020 5:57 PM

Answers

  • User-719153870 posted

    Hi raju bhai,

    Is your expectation to show the data entered by the user in the first two forms? If this is the case, you can refer to the following example:

    PersonalInformation.html

    Hi,  raju bhai
    
        Is your expectation to show the data entered by the user in the first two forms? If this is the case, you can refer to the following example:
    PersonalInformation.html
      <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $('#btnnext').click(function (event) {
                    sessionStorage.clear();
                    sessionStorage.setItem("firstName", $("#txtfname").val());
                    sessionStorage.setItem("lastName", $("#txtlname").val());
                    sessionStorage.setItem("middleName", $("#txtmname").val());
                    $("#txtPersonalInformation").load("ContactInformation.html");
                });
            });
        </script>
    </head>
    <body>
        <div>
            <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 />
                <input id="btnnext" type="button" value="Next" />
            </form>
        </div>
    </body>
    

    ContactInformation.html

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#submitBtn").click(function () {
                    sessionStorage.setItem("emailid", $("#txtemailid").val());
                    sessionStorage.setItem("pass", $("#txtpass").val());
                    sessionStorage.setItem("contactno", $("#txtcontactno").val());
                    $("#txtContactInformation").load("displayInfo.html");
                });
            });
        </script>
    </head>
    <body>
        <div>
            <form id="txtContactInformation">
                <h1>ContactInformation</h1>
                Email Id:<input id="txtemailid" type="text" /><br />
                Password:<input id="txtpass" type="password" /><br />
                Contact No:<input id="txtcontactno" type="number" /><br />
                <input id="submitBtn" type="button" value="Submit" />
            </form>
        </div>
    </body>
    

    displayInfo.html

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#txtfname").val(sessionStorage.getItem("firstName"));
                $("#txtlname").val(sessionStorage.getItem("lastName"));
                $("#txtmname").val(sessionStorage.getItem("middleName"));
                $("#txtemailid").val(sessionStorage.getItem("emailid"));
                $("#txtpass").val(sessionStorage.getItem("pass"));
                $("#txtcontactno").val(sessionStorage.getItem("contactno"));
            })
        </script>
    </head>
    <body>
        <form id="Info_form">
            FirstName:<input id="txtfname" type="text" readonly="readonly"/><br />
            LastName:<input id="txtlname" type="text" readonly="readonly"/><br />
            MiddleName:<input id="txtmname" type="text" readonly="readonly"/><br />
            <br />
            EmailId:<input id="txtemailid" type="text" readonly="readonly"/><br />
            Password:<input id="txtpass" type="password" readonly="readonly"/><br />
            ContactNo:<input id="txtcontactno" type="number" readonly="readonly"/><br />
        </form>
    </body>
    

    Result:

    If this is not what you expected, please express clearly what you want to do and how you want to achieve it.

    Hope this can help you.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 14, 2020 8:08 AM

All replies

  • User475983607 posted

    The code shown is not a single page application as far as I can tell it only loads HTML.  Where is your server side code that validates and authenticates the user inputs?

    Also the form inputs do not have names.

        <form id="txtContactInformation">
            <h1>Contact Information</h1>
            Email Id:<input id="txtemailid" type="text" /><br />
            Password:<input id="txtpass" type="password" /><br />
            Contact No:<input id="txtcontactno" type="number" /><br />
            <input id="btnsubmit" type="button" value="Submit" />
        </form> 

    The browser will not submit the inputs.  You need to use AJAX or fetch.  Have you written any code that submits the input values.   

    Wednesday, May 13, 2020 6:20 PM
  • User-474980206 posted

    also this code makes no sense:

          $("#txtContactInformation").load("/signup.html #txtPersonalInformation"); //HERE I want to display the PersonalInformation filled form detail
          $("#txtContactInformation").load("/ContactInformation.html #txtContactInformation"); //HERE I m trying to display the ContactInformation filled form detail
    

    $.load is async, and you start two async requests that update the same content. so the result will be random.

    Wednesday, May 13, 2020 8:46 PM
  • User1421057020 posted

    Hi mgebhard

    Yes I written the code on submit button using ajax but submit button is not work that is the main reason

    signup.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="signup.js"></script>
    </head>
    <body>
        <form id="txtPersonalInformation">
            <h1>Personal Information</h1>
            First Name:<input id="txtfname" name="txtfname" type="text" /><br />
            Middle Name:<input id="txtmname" name="txtmname" type="text" /><br />
            Last Name:<input id="txtlname" name="txtlname" type="text" /><br />
            <input id="btnnext" type="button" value="Next" />
        </form>
    </body>
    </html>

    signup.js

    //next button click event
    $(document).ready(function () {
        $('#btnnext').click(function (event) {
            $("#txtPersonalInformation").load("ContactInformation.html #txtContactInformation", function (responseTxt, statusTxt, jqXHR) {
                debugger
                if (statusTxt == "success") {
                    
                    //set the first form data
                    localStorage.setItem('firstName', $('#txtfname').val());
                    localStorage.setItem('middleName', $('#txtmname').val());
                    localStorage.setItem('lastName', $('#txtlname').val());
    alert("New content loaded successfully!"); } if (statusTxt == "error") { alert("Error: " + jqXHR.status + " " + jqXHR.statusText); } }); }); });

    ContactInformation.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="ContactInformation.js"></script>
    </head>
    <body>
        <form id="txtContactInformation">
            <h1>Contact Information</h1>
            Email Id:<input id="txtemailid" name="txtemailid" type="text" /><br />
            Password:<input id="txtpass" name="txtpass" type="password" /><br />
            Contact No:<input id="txtcontactno" name="txtcontactno" type="number" /><br />
            <input id="btnsubmit" type="button" value="Submit" />
        </form> 
    </body>
    </html>

    ContactInformation.js

    $("#btnsubmit").on("click", function (e) {
        debugger
        $.ajax({
            type: "POST",
            url: "ContactInformation.html",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                debugger
    
                // set the second form data
                localStorage.setItem('emailid', $('#txtemailid').val());                     
                localStorage.setItem('pass', $('#txtpass').val());
                localStorage.setItem('contactno', $('#txtcontactno').val());
    
                // get the second form data
                var emailid = localStorage.getItem('emailid');                          
                var pass = localStorage.getItem('pass');
                var contactno = localStorage.getItem('contactno');
    
                // get the first form data
                var firstName = localStorage.getItem('firstName');                       
                var middleName = localStorage.getItem('middleName');
                var lastName = localStorage.getItem('lastName');
            },
            error: function (xhr) {
                alert("error");
            },
        });
    });
    

    When I click submit button then submit button not work?

    Thursday, May 14, 2020 5:57 AM
  • User1421057020 posted

    I added the whole code here but main issue is submit button is not work?

    Thursday, May 14, 2020 6:17 AM
  • User-719153870 posted

    Hi raju bhai,

    Is your expectation to show the data entered by the user in the first two forms? If this is the case, you can refer to the following example:

    PersonalInformation.html

    Hi,  raju bhai
    
        Is your expectation to show the data entered by the user in the first two forms? If this is the case, you can refer to the following example:
    PersonalInformation.html
      <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $('#btnnext').click(function (event) {
                    sessionStorage.clear();
                    sessionStorage.setItem("firstName", $("#txtfname").val());
                    sessionStorage.setItem("lastName", $("#txtlname").val());
                    sessionStorage.setItem("middleName", $("#txtmname").val());
                    $("#txtPersonalInformation").load("ContactInformation.html");
                });
            });
        </script>
    </head>
    <body>
        <div>
            <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 />
                <input id="btnnext" type="button" value="Next" />
            </form>
        </div>
    </body>
    

    ContactInformation.html

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#submitBtn").click(function () {
                    sessionStorage.setItem("emailid", $("#txtemailid").val());
                    sessionStorage.setItem("pass", $("#txtpass").val());
                    sessionStorage.setItem("contactno", $("#txtcontactno").val());
                    $("#txtContactInformation").load("displayInfo.html");
                });
            });
        </script>
    </head>
    <body>
        <div>
            <form id="txtContactInformation">
                <h1>ContactInformation</h1>
                Email Id:<input id="txtemailid" type="text" /><br />
                Password:<input id="txtpass" type="password" /><br />
                Contact No:<input id="txtcontactno" type="number" /><br />
                <input id="submitBtn" type="button" value="Submit" />
            </form>
        </div>
    </body>
    

    displayInfo.html

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#txtfname").val(sessionStorage.getItem("firstName"));
                $("#txtlname").val(sessionStorage.getItem("lastName"));
                $("#txtmname").val(sessionStorage.getItem("middleName"));
                $("#txtemailid").val(sessionStorage.getItem("emailid"));
                $("#txtpass").val(sessionStorage.getItem("pass"));
                $("#txtcontactno").val(sessionStorage.getItem("contactno"));
            })
        </script>
    </head>
    <body>
        <form id="Info_form">
            FirstName:<input id="txtfname" type="text" readonly="readonly"/><br />
            LastName:<input id="txtlname" type="text" readonly="readonly"/><br />
            MiddleName:<input id="txtmname" type="text" readonly="readonly"/><br />
            <br />
            EmailId:<input id="txtemailid" type="text" readonly="readonly"/><br />
            Password:<input id="txtpass" type="password" readonly="readonly"/><br />
            ContactNo:<input id="txtcontactno" type="number" readonly="readonly"/><br />
        </form>
    </body>
    

    Result:

    If this is not what you expected, please express clearly what you want to do and how you want to achieve it.

    Hope this can help you.

    Best Regard,

    Yang Shen

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

    Hi Yang Shen

    get and set jquery code working fine thanks for your suggestion

    Thursday, May 14, 2020 2:48 PM