保持表单数据填写而不提交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.';
};

html javascript user-data

保持表单数据填写而不提交PHP/JS

问题描述

解决方法

相关问答