페이지 새로 고침 후 입력 값 유지

페이지 새로 고침 후 입력 값 유지

입력 필드가 있는 양식이 있으며, 이 입력에는 데이터베이스의 드롭다운 메뉴 읽기 정보가 포함되어 있습니다.사용자가 값을 입력했는데 드롭다운 메뉴에 도착했을 때 원하는 정보를 찾지 못하면 다른 페이지로 이동하여 이 정보를 드롭다운 메뉴에 추가한 다음 첫 번째 페이지로 이동하여 계속 정보를 입력합니다.그가 드롭 메뉴에 정보를 추가하기 위해 다른 페이지로 이동할 경우 어떻게 이 정보를 유지할 수 있으며 드롭 메뉴에 정보를 추가한 후 새로 고침 및 제출하지 않고 이 정보를 찾을 수 있습니까?

양식이 있는 첫 번째 페이지입니다.

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

데이터베이스에서 읽은 이 드롭 메뉴

 <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>

다른 페이지의 두 번째 양식

<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">';

편집: 더 많은 입력값 유지

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>

위의 코드가 작동하지 않는 경우 다음을 시도합니다.

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

사용할 수도 있습니다.useContext()부터react context()후크를 사용하는 경우.

MVC/Razor에서 먼저 다음과 같은 textBox에 대한 모델 클래스에 변수를 추가해야 합니다.

네임스페이스 MVCepByStep입니다.모델 {public class CustomerClass {public string CustomerName {get; set; }
} }

그런 다음 Views --> Index.cshtml 파일에서 텍스트 상자가 @Html과 같이 작성되었는지 확인합니다.TextBoxFor(m = > m).고객 이름)

전체 예를 보려면 다음 사이트를 확인하십시오.

JQuery를 사용하여 버튼을 클릭하여 C#MVC TextBox를 업데이트하는 방법 – C#MVC Step by STep[^]

언급URL : https://stackoverflow.com/questions/38930144/keep-input-value-after-refresh-page