刷新页面后保留输入值

IT技术 javascript php jquery ajax
2021-03-05 09:03:34

我有一个带有输入字段的表单，这个输入包含一个下拉菜单，从数据库中读取信息。如果用户输入值，当他到达下拉菜单时，他没有找到他想要的东西，他会转到另一个页面将此信息添加到下拉菜单中，然后转到第一页继续输入信息。如果他转到另一个页面向下拉菜单添加信息，我如何保留此信息，以及在将信息添加到下拉菜单后如何在不刷新和不提交的情况下找到此信息。

这是表格的第一页

<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">';
4个回答

编辑：保持更多输入的value

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>
lgbaryya 如果我有 2 个或更多输入，我如何修改此函数 <input name='txt_name' id='myTextField' type='text' onkeyup='saveValue(this);'> <input name='txt_lname' id= 'txt_lname' type='text' onkeyup='saveValue(this);'>
2021-04-28 09:03:34
@user3018000 然后您需要编辑函数以使其还接收要保存的内容的名称，值。同样要 getSavedValue (v) 让它返回 "v" 的值。
2021-05-07 09:03:34
@Igbaryya 你解决了我持续多天的搜索。多年后也是如此..谢谢伙计！<3
2021-05-07 09:03:34

如果上面的代码不起作用试试这个：

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

如果您使用钩子，也可以使用useContext()from react context()。

在 MVC/Razor 中，首先你应该在你的模型类中为 textBox 添加一个变量，如下所示：

命名空间 MVCStepByStep.Models { public class CustomerClass { public string CustomerName { get; 放; }
} }

然后在 Views --> Index.cshtml 文件中确保 Textbox 是这样创建的： @Html.TextBoxFor(m => m.CustomerName)

有关完整示例，请查看此站点：

如何使用 JQuery 通过单击按钮来更新 C# MVC 文本框 – C# MVC 分步[^]

由于这个问题是用 php 标签提出的，我认为 C# 的解决方案不会有助于解决这个特定问题
2021-05-02 09:03:34
其它你可能感兴趣的问题
上一篇Javascript 中的 && 运算符 下一篇如何通过 javascript/html5 播放 wav 音频字节数组？