I have a search text box after click in submit button textbox value is retain, but when i reload the page the textbox value still in a text box, how do i remove the value of text box after reloading/refreshing the page.

<script>
    $(document).ready(function(){
    document.getElementById("text1").value = localStorage.getItem("item1");
        });

   $(window).on('beforeunload', function() {
    localStorage.setItem("item1",document.getElementById("text1").value);
  });
</script>

Html.

<td>
<form action="/searchemp" method="post" >
    Selected Employee <input type="text"  name="EmployeeName" id="text1">
                     <input type ="submit" value="check">
</form> 

Give me a help or suggestion to fix it.

Thank you.

I have a search text box after click in submit button textbox value is retain, but when i reload the page the textbox value still in a text box, how do i remove the value of text box after reloading/refreshing the page.

<script>
    $(document).ready(function(){
    document.getElementById("text1").value = localStorage.getItem("item1");
        });

   $(window).on('beforeunload', function() {
    localStorage.setItem("item1",document.getElementById("text1").value);
  });
</script>

Html.

<td>
<form action="/searchemp" method="post" >
    Selected Employee <input type="text"  name="EmployeeName" id="text1">
                     <input type ="submit" value="check">
</form> 

Give me a help or suggestion to fix it.

Thank you.

• javascript
• html

• Why you can not delete the value from the localStorage ? – Kalpesh Rajai Commented Apr 18, 2016 at 9:26
• @ Kalpesh Rajai, how could i delete...?? – user6197865 Commented Apr 18, 2016 at 10:19
• localStorage.clear(); @Rehan – Kalpesh Rajai Commented Apr 18, 2016 at 10:23
• You are submitting the form to another page or same page ? – Kalpesh Rajai Commented Apr 18, 2016 at 10:24
• If you Post the form to same page, So it is impossible to achieve that you want. Because when you are posting the page than it post the data to server and reload the page and in same way while reloading/ refreshing the page is reloaded.. it work same. – Kalpesh Rajai Commented Apr 18, 2016 at 10:29

3 Answers 3

        $(document).ready(function () {
            $("#form1").submit(function () {
                window.localStorage['text1_val'] = $("input[name = 'text1']").val();
            });
            $(window).load(function () {
                $("input[name = 'text1']").val(window.localStorage['text1_val']);
                window.localStorage['text1_val'] = '';
            });
        });

  <form id="form1" method="post">
    <input type="text" name="text1">
    <input type="submit">
  </form>

By default a textbox value is empty at page loading. I guess your problem is due to storing and fetching the value from the local storage. The code responsible for the text appearance

$(document).ready(function(){
    document.getElementById("text1").value = localStorage.getItem("item1");
});

Why don't you clear the localstorage?

$(window).unload(function() {
    window.localStorage.removeItem(item1);
});

Code is not tested, but this should give you an idea...