javascript - How to retain textbox value after click submit button - Stack Overflow

admin管理员组

文章数量:1410717

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

Share Improve this question Follow asked Apr 18, 2016 at 9:19 user6197865user6197865 12

• 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

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 1

        $(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...

本文标签： javascriptHow to retain textbox value after click submit buttonStack Overflow