CODEWITHSUNDEEP
javascripthtml
Balloon Fight
Balloon Fight

Reputation: 655

Is there a way I can prevent a function to be restored on page refresh?

I know how to send a form without page refresh with jQuery. That is not what I'm about here. I just wanted to point that out. I have a button when onclick() will display a form and a hidden link. The problem I'm facing is when the form is being submitted the page refresh so the hidden link returns to initial state which is hidden.

Is there a way I can prevent a function to be restored on page refresh? That's what I'm interested to know. But if the best way to do this is by preventing the form to refresh I will do it. I just wanted to know if I could do it another way for knowledge sake. I'm trying to learn new ways instead of always doing same old jQuery stuff.

html

<button id="showOwn" type="button" onclick="showHiddenForm();" >
I'm a returning client</button>

<div id="hiddenForm" style="display:none;">

<form method="POST" action="form.php">
<input type="submit" name="validate_customer" value="Confirm Identity">
</form>

<a id="hiddenLink" href='other_page.php>Continue as Roger Rabbit</a>

</div>

script

function showHiddenForm(){
    //show hidden form
    document.getElementById("hiddenForm").style.display='block';
}

Upvotes: 0

Views: 47

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138287

Use localStorage:

window.onload = () => {
 if( localStorage.getItem("show") )
  showHiddenForm();
};

function showHiddenForm(){
 localStorage.setItem("show",true);
//show hidden form
document.getElementById("hiddenForm").style.display='block';
}

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074495

I just wanted to know if I could do it another way for knowledge sake.

Store a flag in local storage (or session storage) (spec | MDN) and on page load, use the presence/absense of that flag to determine whether to hook up the function (or generally, to do whatever it is you want to do differently, differently).

Upvotes: 1

Related Questions