Javascript 保持表单数据填写无需提交（PHP/JS）_Javascript_Php_Html_User Data

Javascript 保持表单数据填写无需提交（PHP/JS）

javascript php html

Javascript 保持表单数据填写无需提交（PHP/JS）,javascript,php,html,user-data,Javascript,Php,Html,User Data,这是我在这里的第一篇帖子，所以任何关于这个问题的批评都是非常受欢迎的对该问题：我在我的网页上有一个表单输入，其中包含基本的用户数据（请输入您的姓名等）但是由于web页面有多个页面，用户可以使用未完全完成并提交的表单在页面之间导航。（例如，在卡片页面上返回商店）我想问的是，是否可以在页面刷新时保留用户已经填写的内容，而不让用户实际按下提交按钮，或者最好的做法是什么现在，我正在尝试一个带有jsonclick事件的Ajax请求，以便以某种方式将相关信息发送到我的php$会话。可悲的是，我在这

这是我在这里的第一篇帖子，所以任何关于这个问题的批评都是非常受欢迎的

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

现在，我正在尝试一个带有jsonclick事件的Ajax请求，以便以某种方式将相关信息发送到我的php$会话。可悲的是，我在这方面失败得很惨，所以如果这是一条路，而且你知道一个很好的教程，我也很高兴能有一个链接

谢谢你抽出时间

使用

fetch

向（在本例中）同一页面发出ajax请求的一个非常简单的示例。该请求是一个

POST

请求，由PHP代码处理并设置一个会话变量。然后，这个赋值变量的基本文本表示被发送回ajax/fetch回调，在那里它只是发出了警报

我希望，这将为您提供如何使用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.';
};

最好在填写完所有表格后再提交页面。您可以使用多个表单并隐藏/显示活动步骤来处理此问题。在表单中更改时的输入上设置事件侦听器，并将数据存储在本地存储器中。然后，当该页面加载时，检查本地存储中是否存储了某些内容，如果有，则填充输入。不需要任何PHP或Ajax。但老实说，这在多大程度上是个问题？人们往往知道网站是如何工作的，如果他们离开表单点击，表单就记不住数据。这样你就不会花太多时间解决一个非问题。