Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

PHP Build a Basic PHP Website (2018) Enhancing a Form Re-Displaying the Submission

Posted by <noob />
<noob />
17,047 Points

Saving the form info after submisson to the server with SessionStorage

Hi! I wanted to see if i can implement this effect with js as well and i successed!

//Save User choices upon errors with SessionStorage

function saveInfo(name) {
    //storing the value from the input of the specified input
    let store = document.querySelector(`#${name}`).value;
    //setting that value in the localstorage
    sessionStorage.setItem(name, store);
}

function displayAfter(name) {
    //getting the value of the input we stored in saveInfo func and set it to the value of the input after the page loads.
    document.querySelector(`#${name}`).value = sessionStorage.getItem(name);
}



function clearAllInputs() {
    const allInput = document.querySelectorAll("input");
    allInput.forEach(input => {
        input.value = "";
    })
}


const submitButton = document.querySelector("#submit")
let isClicked = false;
submitButton.addEventListener("click", () => {
    isClicked = true;
    saveInfo("username");
    saveInfo("email");
    saveInfo("category");
    saveInfo("title");
    saveInfo("format");
    saveInfo("genre");
    saveInfo("year");
    saveInfo("details");

});

displayAfter("username");
displayAfter("email");
displayAfter("category");
displayAfter("title");
displayAfter("format");
displayAfter("genre");
displayAfter("year");
displayAfter("details");


if(isClicked) {
    setTimeout(() => {
        sessionStorage.clear();
        clearAllInputs();


    },9000)
}

however in this lines:

if(isClicked) {
    setTimeout(() => {
        sessionStorage.clear();
        clearAllInputs();


    },9000)
}

I wanted to impement another feature which will clean the inputs and delete the keys from the session storage after a period of time, the logic seem ok but its not working for some reason.

ill be happy if someone can help me :]

Steven Parker

2 Answers

Steven Parker
Steven Parker
216,878 Points
Steven Parker
Steven Parker
216,878 Points

The value of "isClicked" will be False until the submit happens, which is long after that test ran. So the "setTimeout" call should be moved into the click handler (and you can eliminate the "if" and the "isClicked" variable).

<noob />
<noob />
17,047 Points
<noob />
<noob />
17,047 Points

I did what u said and nothing happens.

const submitButton = document.querySelector("#submit")
submitButton.addEventListener("click", () => {
     saveInfo("username");
    saveInfo("email");
    saveInfo("category");
    saveInfo("title");
    saveInfo("format");
    saveInfo("genre");
    saveInfo("year");
    saveInfo("details");

    setTimeout(() => {
        sessionStorage.clear();
        clearAllInputs();


    },9000)


});
Steven Parker
Steven Parker
216,878 Points
Steven Parker
Steven Parker
216,878 Points

This part looks OK, maybe there's an issue elsewhere, but not all the parts are here. Post a snapshot link to enable replication of your environment.