Remove From My Forums

How to displaying user filled form data using jquery?

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

0

Sign in to vote
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

0

Sign in to vote

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

0

Sign in to vote

User1421057020 posted

Hi Yang Shen

get and set jquery code working fine thanks for your suggestion

Thursday, May 14, 2020 2:48 PM

Answered by:

How to displaying user filled form data using jquery?

Question

Answers

All replies