CODEWITHSUNDEEP
javascriptphpajax
Paul
Paul

Reputation: 117

How to keep the input field disabled upon refresh as well?

I am disabling the input field after the user enters the data and submits. But, if we refresh or press ctl+F5 the disabled fields enables and becomes editable. Below is the code I have, what should I do to keep it disabled even upon refresh? Thank you.

<script type="text/javascript">
  document.getElementById('myButton').onclick = function() {
    document.getElementById('firstname').disabled = true;
    document.getElementById('lastname').disabled = true;
    document.getElementById('email').disabled = true;
  };
</script>

I am using localstorage to store the data

Upvotes: 0

Views: 1221

Answers (3)

Tejeshvi Roy
Tejeshvi Roy

Reputation: 146

Use sessionStorage :

    <script type="text/javascript">
      var disable = function() {
        document.getElementById('firstname').disabled = true;
        document.getElementById('lastname').disabled = true;
        document.getElementById('email').disabled = true;
        sessionStorage.setItem("isDisabled", true);
      };
    document.getElementById('myButton').onclick = disable;
    if(sessionStorage.getItem("isDisable") === 'true') {
      disable();//call your function
    }
    </script>

Upvotes: 1

Wils
Wils

Reputation: 1231

Put the setting inside

COOKIE version

function disablefield(){
        document.getElementById('firstname').disabled = true;
        document.getElementById('lastname').disabled = true;
        document.getElementById('email').disabled = true;
}
        document.getElementById('myButton').onclick = function() {

           $.cookie("is_disable", 1);
           disablefield();
        };

        if ($.cookie("is_disable")==1) disablefield();


      </script>

Session version

   function disablefield(){
            document.getElementById('firstname').disabled = true;
            document.getElementById('lastname').disabled = true;
            document.getElementById('email').disabled = true;
    }
            document.getElementById('myButton').onclick = function() {
               $.session.set("is_disable", "1");
               disablefield();
            };

            if ($.session.get("is_disable")==1) disablefield();


          </script>

Upvotes: -2

CertainPerformance
CertainPerformance

Reputation: 371009

Easiest solution is to use sessionStorage:

<script type="text/javascript">
  const disableInputs = function() {
    sessionStorage.disableInputs = 'true';
    document.getElementById('firstname').disabled = true;
    document.getElementById('lastname').disabled = true;
    document.getElementById('email').disabled = true;
  };
  if (sessionStorage.disableInputs === 'true') disableInputs();
  document.getElementById('myButton').onclick = disableInputs;
</script>

If you want the disable effect to last past the session, use localStorage instead.

Upvotes: 6

Related Questions