保持表单数据填写无需提交(PHP/JS)



这是我在这里的第一篇文章,因此欢迎对这个问题提出任何批评。

对于问题:我在我的网页上输入了一个表单,其中包含基本的用户数据(请输入您的姓名等(但由于网页有多个页面,用户可以在未完全完成和提交表单的页面之间导航。(例如,在卡片页面上返回商店(我想问一下,是否可以在用户不按下提交按钮的情况下,将用户已经填写的内容保留在页面刷新上,或者什么是最佳做法。

现在,我正在尝试一个带有JS onclick事件的Ajax请求,以某种方式将相关信息获取到我的php$SESSION。遗憾的是,我在这方面失败得很厉害,所以如果这是一条路,并且你知道一个很好的教程,我也很乐意提供一个链接。

感谢您抽出时间!

使用fetch向(在本例中(同一页面发出ajax请求的一个非常简单的示例。该请求是一个POST请求,由PHP代码处理并设置一个会话变量。然后,这个赋值变量的基本文本表示被发送回ajax/fetch回调,在那里它只是alerted

我希望,这应该能让您对如何使用Ajax设置会话变量有一个合理的想法。您可以扩展逻辑并一次发送许多值,转换为JSON并存储在会话变量中。

简单函数sessionvalue只接受一个参数,即会话变量的名称。如果找到它,它将被用作原始字段的值。

<?php
session_start();

if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['username'] ) ){
$_SESSION['username']=$_POST['username'];
exit($_SESSION['username']);
}
function sessionvalue( $field=false ){
return !empty( $_SESSION[ $field ] ) ? $_SESSION[ $field ] : '';
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
</head>
<body>
<form name='users' method='post'>
<input type='text' name='username' value='<?=sessionvalue('username');?>' />
<input type='button' value='Submit' />
</form>
<script>
document.querySelector('input[type="button"]').addEventListener('click',function(e){
let fd=new FormData( document.forms.users );

fetch(location.href,{method:'post',body:fd})
.then( r=>r.text() )
.then( text=>{
alert(text)
})
});
</script>
</body>
</html>

除了前面的答案之外,因为您已经询问了最佳实践:

我建议您在需要信息时强制用户提交表格。如果用户已经填写了一些数据并试图离开页面,您可以实现一个卸载页面处理程序,以便用户收到数据将丢失的警告,如下所示:

window.onbeforeunload = function(e) {
return 'Warning text here.';
};

最新更新