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

Question

这是我第一次post来这里，所以非常欢迎对这个问题提出任何批评。

对于问题：我的网页上有一个表单输入，其中包含基本用户数据（请输入您的姓名等）但是由于网页有多个页面，用户可以在未完全完成和提交的表单的页面之间导航。（例如在卡片页面上返回商店）我想问问是否可以在页面刷新时保留用户已经填写的内容，而无需用户实际按下提交按钮，或者什么是最佳实践。

现在我正在尝试使用 JS onclick 事件的 Ajax 请求以某种方式将相关信息获取到我的 php $SESSION。可悲的是我在这方面失败得很惨，所以如果那是要走的路并且你知道一个很好的教程，我也会很高兴 link。

感谢您的宝贵时间！

Answer 1

一个非常简单的示例，使用 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>

Answer 2

除了之前的回答，因为您询问了最佳实践：

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

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

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

Keep Form Data filled out without a submit (PHP/JS)

javascript

php

html

user-data