Keep input value after refresh page

Question

I have a form with input field and this input contain a drop down menu read information from database. If the user enters value and when he arrives to the drop menu he doesn't find what he wants he go to another page to add this info to the drop down menu and then go to the first page to continue enter the information. How can I keep this information if he goes to another page to add info to drop menu and how can after adding the info to drop menu find this info without refresh and without submit.

This is the first page with the form

<form name='' method='post' action='<?php $_PHP_SELF ?>'>
<input name='txt_name' id='' type='text'>

This drop menu read from database

 <select id="groups" name="txt_label" class="form-control">
   ';?>
     <?php 
    $sql=mysqli_query($conn,"select DISTINCT db_label from tbl_label")or die(mysqli_error($conn));
 echo'<option  value="">-- Select --</option>';
    while($row=mysqli_fetch_array($sql)){
        $label=$row['db_label'];
        echo "<option value='$label'>$label</option>"; 
    }echo'</select>';?><?php echo'
  </div>
</form>

Second form in another page

<form class="form-inline" role="form" name="form" method="post" action="';?><?php $_PHP_SELF ?><?php echo'">
    <div class="form-group">
    <label for="pwd">Label</label>
  <input id="txt_label" name="txt_label" type="text" placeholder="Label" class="form-control input-md">
  </div>
   <div class="form-group">
    <label for="pwd">Sub Label</label>
  <input id="txt_sublabel" name="txt_sublabel" type="text" placeholder="SubLabel" class="form-control input-md">
  </div>
   <input type="submit" name="addlabel" value="Add" class="btn btn-default">';

Answer 1

EDIT: Keep value of more inputs

HTML:

<input type="text" id="txt_1" onkeyup='saveValue(this);'/> 
<input type="text" id="txt_2" onkeyup='saveValue(this);'/> 

Javascript:

<script type="text/javascript">
        document.getElementById("txt_1").value = getSavedValue("txt_1");    // set the value to this input
        document.getElementById("txt_2").value = getSavedValue("txt_2");   // set the value to this input
        /* Here you can add more inputs to set value. if it's saved */

        //Save the value function - save it to localStorage as (ID, VALUE)
        function saveValue(e){
            var id = e.id;  // get the sender's id to save it . 
            var val = e.value; // get the value. 
            localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override . 
        }

        //get the saved value function - return the value of "v" from localStorage. 
        function getSavedValue  (v){
            if (!localStorage.getItem(v)) {
                return "";// You can change this to your defualt value. 
            }
            return localStorage.getItem(v);
        }
</script>

Answer 2

if the above code did not work try this:

<input type="text" id="txt_1" onchange='saveValue(this);'/> 
<input type="text" id="txt_2" onchange='saveValue(this);'/>

Answer 3

You can also use useContext() from react context() if you're using hooks.

Answer 4

In MVC/Razor, first you should add a variable in your model class for the textBox like this:

namespace MVCStepByStep.Models { public class CustomerClass { public string CustomerName { get; set; }
} }

Then in Views --> Index.cshtml file make sure the Textbox is created like this: @Html.TextBoxFor(m => m.CustomerName)

For a complete example, please check out this site:

How to update a C# MVC TextBox By Clicking a Button using JQuery – C# MVC Step By STep[^]