刷新页面后保持输入值 [英] keep input value after refresh page

问题描述

我有一个带有输入字段的表单，此输入包含一个下拉菜单，如果用户输入值，则从数据库
读取信息，当他到达下拉菜单时，他找不到他想要的内容另一个页面将此信息添加到下拉菜单，然后转到第一页继续输入信息
我需要如何保留此信息，如果他转到另一个页面添加信息到下拉菜单以及如何可以在将信息添加到下拉菜单后查找此信息而无需刷新且无需提交

i have a form with input field and this input contain a drop down menu read information from database if the user enter value and when he arrive to the drop menu he doesn't find what he want he go to another page to add this info to the drop down menu and than go to the first page to continue enter the information what i need how can i keep this information if he go to another page to add info to drop menu and how can after adding the info to drop menu finding this info without refresh and without submit

这是表格的第一页

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

另一页中的第二个表格

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

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>

这篇关于刷新页面后保持输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！