Click here to Skip to main content
15,847,077 members
Please Sign up or sign in to vote.
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

1 solution

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.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900