[英]Keep values after page reload of javascript
I know this is a topic where you can find tons of answers for... I spent now quite some time to search for the solution I am looking for. 我知道这是一个主题,您可以在其中找到大量答案……我花了很多时间来寻找所需的解决方案。
I have a PHP file with a form. 我有一个带有表单的PHP文件。 This PHP file uses a JavaScript for a drop down pre-selection.
此PHP文件使用JavaScript进行下拉预选。 Means: If a user selects a value in drop-down1 then there is a limited selection in drop-down2.
意思是:如果用户在下拉列表1中选择一个值,则下拉列表2中的选择将受到限制。 This JavaScript definitely needs to reload the PHP file for changing the values of the second drop-down2 list.
此JavaScript绝对需要重新加载PHP文件才能更改第二个drop-down2列表的值。
The question is now: How can I keep the entered values of the user in the form, after the JavaScript has been executed. 现在的问题是:在执行JavaScript之后,如何在表单中保留用户输入的值。 Currently all entered data get lost.
当前,所有输入的数据都会丢失。
One option would be to set all values into the URL and grab them with GET. 一种选择是将所有值设置到URL中,然后使用GET来获取它们。 Yes.. that would be an option but as I am using 13 values, the URL would look not too nice.
是的..那将是一个选择,但是由于我使用的是13个值,因此URL看起来不太好。 I don't want to user to take notice of what happens.
我不想让用户注意到发生了什么。 I cant use the POST, as I don't push the posting button.. it's just the JavaScript that gets executed and reloads the page.
我不能使用POST,因为我不按发布按钮。.只是执行并重新加载页面的JavaScript。
I thought about filling the Session with the entered data but that is not directly possible as JavaScript is on the client side and the session is on the server side. 我考虑过用输入的数据填充Session,但这不可能直接实现,因为JavaScript在客户端,而Session在服务器端。
Do you have any suggestions? 你有什么建议吗?
Form Example: First Name (text box) Last Name (text box) Age (drop-down) Sex (drop-down) 表单示例:名字(文本框)姓氏(文本框)年龄(下拉列表)性别(下拉列表)
Province (JS drop down) District (JS drop down) Commune (JS drop down) Village (JS drop down) 省(JS下拉)地区(JS下拉)公社(JS下拉)村(JS下拉)
Transf.from (drop down) Health Center (text box) Ambulance (drop-down) Self.transferred (drop down) SEND BUTTON 来自(下拉)健康中心(文本框)的转移救护车(下拉)自我转移(下拉)的发送按钮
dynmicoptionlist.js code: 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;
}
}
On behalf of JohnP's suggestion here are my changes so far: I've added the onload function to fill the hidden field with a value: 到目前为止,代表JohnP的建议是我所做的更改:我添加了onload函数以用值填充隐藏字段:
<body onload=\"setValue()\">
The JavaScript filling the value looks like this: 填充值的JavaScript如下所示:
<script type=\"text/javascript\">
function setValue() {
document.getElementById(\"dyndrpdwnhidden\").value=\"createPatient\";
}
</script>
In my form I've added the hidden field: 在我的表单中,我添加了隐藏字段:
<input type=\"hidden\" id=\"dyndrpdwnhidden\">
To get the values out of the form's input fields in my JavaScript dynmicoptionlist.js above I've used as an example: 为了从上面的JavaScript dynmicoptionlist.js中从表单的输入字段中获取值,我以一个示例为例:
var entry_date = form.entry_date.value;
Maybe you try to use SESSION? 也许您尝试使用SESSION? The session data will not disappear even on page refresh or redirect.
即使刷新或重定向页面,会话数据也不会消失。
To keep any data: 要保留任何数据:
session_start();
$_SESSION['data']=$_POST['data_from_previous_page'];
To read it at any page: 要在任何页面上阅读:
session_start();
$_SESSION['data'];
To clear all session data: 要清除所有会话数据:
unset($_SESSION);
if (isset($_COOKIE[session_name()])) {
setcookie(session_name(), '', time()-42000, '/');
}
session_destroy();
Why not just make your JS submit the form? 为什么不让您的JS提交表单? That will make the variables available, and you can activate the second dropdown by looking at the post data instead of the $_GET data that the JS sends.
这将使变量可用,并且您可以通过查看帖子数据而不是JS发送的$ _GET数据来激活第二个下拉列表。
use localStorage https://www.w3schools.com/jsref/obj_storage.asp 使用localStorage https://www.w3schools.com/jsref/obj_storage.asp
Storage Object The Storage object of the Web Storage API provides access to the session storage or local storage for a particular domain. 存储对象Web Storage API的存储对象提供对特定域的会话存储或本地存储的访问。 This allows you to read, add, modify, and delete stored data items.
这使您可以读取,添加,修改和删除存储的数据项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.