刷新页面后保留输入值

Question

刷新页面后保留输入值

23

我有一个表单，其中包含输入字段，这些输入字段包含从数据库中读取的下拉菜单信息。如果用户输入值并在到达下拉菜单时没有找到所需选项，则可以转到另一页以添加此信息到下拉菜单，然后返回第一页继续输入信息。如何在用户转到另一页添加下拉菜单信息时保留此信息，并且在添加信息到下拉菜单后如何无需刷新和无需提交即可找到此信息。

这是包含表单的第一页

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

- Mohamad

你可以在头部发送之前使用 session_start();，然后使用 $_SESSION 超全局变量。当然，我建议你使用 AJAX，除非你喜欢停留在石器时代。 - StackSlave

如果我想使用Ajax，我该怎么做？ - Mohamad

现在JavaScript中有localStorage和sessionStorage。JavaScript的document.cookie应该适用于所有浏览器，但对于初学者来说更加复杂。你对JavaScript了解多少？ - StackSlave

这是一个类似的问题，请尝试：http://stackoverflow.com/questions/38844743/js-input-type-date-field-keep-values-selected-after-form-submission/38845803?noredirect=1#comment65096145_38845803 - user6063698

在 JavaScript 中获取元素有多种方法。其中最常见的可能是 document.getElementById('HTMLidHere')。当然，还有其他方法，因此我将使用 Element 代表它。Element.value 可以获取和设置 HTML 输入和文本区域的值。对于其他元素，可以使用 Element.innerHTML。你应该能够在线找到这些类型的示例，以及我已经评论过的存储此信息的方式。你必须至少具备基本的 JavaScript 理解才能得到我们的帮助。顺便说一句，那个示例是不好的实践。 - StackSlave

显示剩余7条评论

4个回答

6

如果上述代码无效，请尝试以下代码：

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

- zaf y

0

如果你正在使用hooks，你也可以从react context()中使用useContext()。

- Blessing

-3

在MVC/Razor中，首先您应该在模型类中添加一个变量来表示文本框，如下所示：

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

然后在视图 --> Index.cshtml文件中，请确保TextBox被创建如下： @Html.TextBoxFor(m => m.CustomerName) 有关完整示例，请查看此网站：如何使用JQuery更新C#MVC TextBox - C#MVC逐步演示[^]

- Brian Foroud

1

由于问题是使用php标签提出的，我认为C#的解决方案无法帮助解决这个特定的问题。 - overflowed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user6063698 · Accepted Answer

编辑：保留更多输入的值

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>