Question

我知道这是一个你可以找到大量答案的话题......我现在花了很长时间来寻找我正在寻找的解决方案。

我有一个带有表单的PHP文件。此PHP文件使用JavaScript进行下拉预选。意思是：如果用户在下拉列表中选择一个值，则下拉列表中的选择有限2。这个JavaScript肯定需要重新加载PHP文件以更改第二个drop-down2列表的值。

现在的问题是：在执行JavaScript之后，如何在表单中保留用户输入的值。目前所有输入的数据都会丢失。

一种选择是将所有值设置为URL并使用GET获取它们。是..这将是一个选项，但因为我使用13个值，URL看起来不太好。我不想让用户注意到会发生什么。我不能使用POST，因为我没有按下发布按钮..它只是执行的JavaScript并重新加载页面。

我考虑过使用输入的数据填充Session，但这不是直接可能的，因为JavaScript在客户端，而会话在服务器端。

你有什么建议吗？

表单示例：名字（文本框）姓氏（文本框）年龄（下拉）性别（下拉列表）

省（JS下拉）区（JS下拉）Commune（JS下拉）村（JS下拉）

Transf.from（下拉）健康中心（文本框）救护车（下拉列表）Self.transferred（下拉）SEND BUTTON

dynmicoptionlist.js代码：

   //Set parameters for provinces selection
   function reload1(form) {

      var val1=form.provinces.options[form.provinces.options.selectedIndex].value;

      //Get the current URL
      var url1=window.location.href;

      //Check if the current URL has the search term in it (-1 means it is not in it)
      if(url1.search("&provinces=") != -1) {

         //Now that the search term was found, cut the search term from the URL so that it can be replaced
         //This is necessary for multiple selections in the same drop down box
     var url2 = url1.substr(0,url1.search("&provinces="));

         //If the user has selected "Please select", then dont add the provinces parameter
         if(val1 == "") {

        //Create the new URL
            self.location= url2
         }
         else {

            //Create the new URL
            self.location= url2 + "&provinces=" + val1 ;
         }
      }
      else {

         //The search term was not found, so just add the provinces
         self.location= url1 + "&provinces=" + val1;
      }
   }

   //Set parameters for districts selection
   function reload2(form) {

      var val1=form.provinces.options[form.provinces.options.selectedIndex].value; 
      var val2=form.districts.options[form.districts.options.selectedIndex].value; 

      //Get the current URL
      var url1=window.location.href;

      //Check if the current URL has the search term in it (-1 means it is not in it)
      if(url1.search("&districts=") != -1) {

         //Now that the search term was found, cut the search term from the URL so that it can be replaced
         //This is necessary for multiple selections in the same drop down box
         var url2 = url1.substr(0,url1.search("&districts="));

         //If the user has selected "Please select", then dont add the provinces parameter
         if(val2 == "") {

        //Create the new URL
            self.location= url2
         }
         else {

            //Create the new URL
            self.location= url2 + "&districts=" + val2 ;
         }
      }
      else {

         //The search term was not found, so just add the districts
         self.location= url1 + "&districts=" + val2;
      }
   }

   //Set parameters for communes selection
   function reload3(form) {

      var val1=form.provinces.options[form.provinces.options.selectedIndex].value; 
      var val2=form.districts.options[form.districts.options.selectedIndex].value; 
      var val3=form.communes.options[form.communes.options.selectedIndex].value; 

      //Get the current URL
      var url1=window.location.href;

      //Check if the current URL has the search term in it (-1 means it is not in it)
      if(url1.search("&communes=") != -1) {

         //Now that the search term was found, cut the search term from the URL so that it can be replaced
         //This is necessary for multiple selections in the same drop down box
         var url2 = url1.substr(0,url1.search("&communes="));

             //If the user has selected "Please select", then dont add the provinces parameter
         if(val3 == "") {

        //Create the new URL
            self.location= url2
         }
         else {

            //Create the new URL
            self.location= url2 + "&communes=" + val3 ;
         }
      }
      else {

         //The search term was not found, so just add the communes
         self.location= url1 + "&communes=" + val3;
      }
   }

代表JohnP的建议到目前为止是我的更改：我添加了onload函数以使用值填充隐藏字段：

<body onload=\"setValue()\">

填充值的JavaScript如下所示：

<script type=\"text/javascript\">

   function setValue() {

      document.getElementById(\"dyndrpdwnhidden\").value=\"createPatient\";
   }
</script>

在我的表格中，我添加了隐藏字段：

<input type=\"hidden\" id=\"dyndrpdwnhidden\">

为了从我上面的JavaScript dynmicoptionlist.js中的表单输入字段中获取值，我以一个例子为例：

var entry_date = form.entry_date.value;

Answer 1

也许您尝试使用SESSION？即使页面刷新或重定向，会话数据也不会消失。

保留任何数据：

session_start();
$_SESSION['data']=$_POST['data_from_previous_page'];

要在任何页面阅读：

session_start();
$_SESSION['data'];

清除所有会话数据：

unset($_SESSION);
if (isset($_COOKIE[session_name()])) {
   setcookie(session_name(), '', time()-42000, '/');
}
session_destroy();

Answer 2

为什么不让你的JS提交表格？这将使变量可用，您可以通过查看post数据而不是JS发送的$ _GET数据来激活第二个下拉列表。

Answer 3

使用localStorage https://www.w3schools.com/jsref/obj_storage.asp

存储对象 Web Storage API的Storage对象提供对特定域的会话存储或本地存储的访问。这使您可以读取，添加，修改和删除存储的数据项。

在页面重新加载javascript后保留值

3 个答案: