Plese help me save data of registraion form in local storage

Question

1.00/5 (1 vote)

See more:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 align="center">Registration Form</h1>
    <div class="container">
        <form name="myform" method="post" onsubmit="return validateForm();">
            <div class="formdesign" id="name">
                Name: <input
                    type="text"
                    name="fname"
                    required
                    oninput="clearError('nameError')"
                    onchange="validateName(this.value)"
                />
            </div>
            <div class="formdesign" id="email">
                Email: <input
                    type="email"
                    name="femail"
                    required
                    onchange="validateEmail(this.value)"
                />
            </div>

            <div class="formdesign" id="pan">
                PAN: <input
                    type="text"
                    name="fpan"
                    required
                    onchange="validatePAN(this.value)"
                    oninput="clearError('panError')"
                />
            </div>
            <div class="formdesign" id="adhar">
                Aadhar: <input
                    type="text"
                    name="fadhar"
                    required
                    onchange="validateAadhar(this.value)"
                    oninput="clearError('adharError')"
                />
            </div>
            <div class="formdesign" id="phone">
                Mob Number: <input
                    type="tel"
                    name="fphone"
                    required
                    onchange="validatePhone(this.value)"
                    oninput="clearError('phoneError')"
                />
            </div>
            <div class="formdesign" id="image">
                Image:
                <input
                    type="file"
                    name="fimage"
                    accept="image/*"
                    onchange="previewImage(this)"
                />
            </div>
            <div class="formdesign" id="imagePreview">
                Image Preview:
                <img id="preview" src="" alt="Image Preview" />
            </div>
            <input class="but" type="submit" value="Submit" />
        </form>
    </div>

    <script>
        function test() {
            var formData = {
                name: document.getElementsByName("fname")[0].value,
                email: document.getElementsByName("femail")[0].value,
                pan: document.getElementsByName("fpan")[0].value,
                adhar: document.getElementsByName("fadhar")[0].value,
                phone: document.getElementsByName("fphone")[0].value,
                image: document.getElementsByName("fimage")[0].value,
            };

            // Store formData as a JSON string in localStorage
            localStorage.setItem("formData", JSON.stringify(formData));

            return true; // To allow the form submission to proceed
        }
    </script>

    <script>
        function seterror(id, error) {
            var element = document.getElementById(id);
            element.textContent = error;
        }

        function clearError(id) {
            document.getElementById(id).textContent = "";
        }

        function validateForm() {
            var returnval = true;
            var name = document.forms["myform"]["fname"].value;
            if (name.length < 5) {
                seterror("nameError", "Length of name is too short");
                returnval = false;
            }
            var email = document.forms["myform"]["femail"].value;
            if (email.length > 20) {
                seterror("emailError", "Email length is too long");
                returnval = false;
            }
            var pan = document.forms["myform"]["fpan"].value;
            var panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
            if (!panRegex.test(pan)) {
                seterror("panError", "Invalid PAN format");
                returnval = false;
            }
            var adhar = document.forms["myform"]["fadhar"].value;
            var aadharRegex = /^\d{4}\s\d{4}\s\d{4}$/;
            if (adhar.length != 12) {
                seterror("adharError", "Aadhar number should be 12 digits");
                returnval = false;
            }
            var phone = document.forms["myform"]["fphone"].value;
            if (phone.length != 10) {
                seterror("phoneError", "Phone number should be 10 digits");
                returnval = false;
            }

            document.getElementById("preview").src = "";
            document.getElementById("imagePreview").style.display = "none";

            return returnval;
        }

        function validateName(name) {
            var nameErrorElement = document.getElementById("nameError");
            if (name.length < 5) {
                nameErrorElement.textContent = "Length of name is too short";
            } else {
                nameErrorElement.textContent = "";
            }
        }

        function validateEmail(email) {
            var emailErrorElement = document.getElementById("emailError");
            if (email.length === 0) {
                emailErrorElement.textContent = "Email is required";
            } else {
                var emailRegex =
                    /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                if (!emailRegex.test(email)) {
                    emailErrorElement.textContent = "Invalid email format";
                } else {
                    emailErrorElement.textContent = "";
                }
            }
        }

        function validatePAN(pan) {
            var panErrorElement = document.getElementById("panError");
            var panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
            if (!panRegex.test(pan)) {
                panErrorElement.textContent = "Invalid PAN format";
            } else {
                panErrorElement.textContent = "";
            }
        }

        function validateAadhar(adhar) {
            var adharErrorElement = document.getElementById("adharError");
            var aadharRegex = /^\d{4}\s\d{4}\s\d{4}$/;
            if (adhar.length != 12) {
                adharErrorElement.textContent =
                    "Aadhar number should be 12 digits";
            } else {
                adharErrorElement.textContent = "";
            }
        }
        function validatePhone(phone) {
            var phoneErrorElement = document.getElementById("phoneError");
            var phoneRegex = /^\d{10}$/;
            if (!phoneRegex.test(phone)) {
                phoneErrorElement.textContent =
                    "Phone number should be 10 digits";
            } else {
                phoneErrorElement.textContent = "";
            }
        }

        // Add this function to preview the selected image
        function previewImage(input) {
            var preview = document.getElementById("preview");
            var imagePreview = document.getElementById("imagePreview");

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    imagePreview.style.display = "block"; // Display the image preview div
                };

                reader.readAsDataURL(input.files[0]);
            } else {
                preview.src = "";
                imagePreview.style.display = "none"; // Hide the image preview div if no file is selected
            }
        }

        // Add this script to retrieve and display the data from localStorage
        var formData = localStorage.getItem("formData");
        if (formData) {
            formData = JSON.parse(formData);
            console.log(formData); // You can also display it on the page or use it as needed
        }
    </script>
</body>
</html>

What I have tried:

i have tried to run with the help of live server of vs code after clicking on submit button data not visible in localstorage of chrome browser

Posted 6-Oct-23 20:43pm

vijay patil Oct2023

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Answer 1 · 2023-10-06T22:22:00

If I cut down your code to a bare minimum:

JavaScript

<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>
<h2>The localStorage Property</h2>

<p>Saved name is:</p>
<p id="demo"></p>

<script>
var formDataIn = {name: "OriginalGriff", email: "Me@Me.Me"};
localStorage.setItem("formData", JSON.stringify(formDataIn));

var formDataOut = localStorage.getItem("formData");
if (formDataOut) {
    formDataOut = JSON.parse(formDataOut);
    console.log(formDataOut); 
    }
</script>

</body>
</html>

And look in the Developer Tools...Application...Storage...LocalStorage...website then I see the data:

formData	{"name":"OriginalGriff","email":"Me@Me.Me"}

So ... either you are looking in the wrong place, or your code is failing before you get to the setItem call. Try adding console.log lines to trace your code through and see how far it gets.