回显表单数据而不发送到服务器

Question

我在页面上有一个小表格，我在其中询问用户名，该表格将数据发送到 name.php 并回显用户名，例如 "Hello Steven" Steven 是输入的名字进入表格。

既然名称已回显到该表单，我想在页面的其他地方再次回显相同的数据。这是我碰壁的地方。

我宁愿不将输入到表单中的姓名发送到服务器或数据库，而只是将它们保留一个会话，然后再丢失。

现在的问题是在一页上多次回显表单数据。

我现在为微型表单使用的代码如下：

<form role="form" id="inviteform3" class="form-inline" action="name.php" method="POST">
<div class="form-group">
<input type="text" class="form-control input-sm" name="name" placeholder="Your Name" 
id="hello" autocomplete="off" style="margin-top:10px">
                            </div>
                            <center>
                            <span id="result"></span>
                            <button class="btn btn-brand btn-sm next-screen animated bounceInUp" 
id="go" style="margin-top:5px; display:none" href="#services" data-animation-delay=".5s">  
Let's Go!</button></center>

<button class="btn btn-block btn-brand btn-xs invitebtn3" id="casi" type="submit" 
style="margin-top:5px"><i class="fa fa-thumbs-o-up"></i> Submit</button>

</form>

我的php表格（name.php）如下：

<html>
<body>

Let's get started, <?php echo $_POST["name"]; ?>

</body>

</html>

我的js代码是：

<script>

$(document).on("ready", function(){
//Form action
$("#inviteform3").on("submit", function(event){
// Stop submit event
event.preventDefault();
$.ajax({
    type:'POST', 
    url: 'name.php',
    data:$('#inviteform3').serialize(), 
    success: function(response)  
    {
        $('#inviteform3').find('#result').html(response);
    }});
});
});

</script>

Answer 1

$("#inviteform3").on("submit", function(event) {
    var name = $("form input['name']").val();

     // Here is the interesting part
     sessionStorage.setItem("name", name);
}

// Get that name
var access_name = sessionStorage.getItem("name");

$("#some_id").html(access_name); // Inserts the name where you want it.

每次 tab/window 关闭时都会擦除 sessionStorage。

Answer 2

您可以使用 PHP 而不是 Javascript。

session_start();
$_SESSION['name'] = $_POST['name'];

$_SESSION 变量在浏览器关闭时被清除，并且是全局变量，因此可以在任何地方访问。 session_start 必须是你做的第一件事，尽管在第一页的第 1 行是运行。

有关 PHP 中会话的更多信息，请参见 here and the about $_SESSION here。

例如：

您正在向 name.php 发帖。所以在 name.php 的第 1 行做

  <?php session_start(); ?>

然后

<?php
     if (isset($_POST['name'])) {
        $_SESSION['name'] = $_POST['name'];
     }
?>

然后无论你想在哪里使用它，只要做echo $_SESSION['name'];

如果你想在其他文件中回显。然后在另一个文件的第 1 行执行

 <?php session_start(); ?>

然后：

<?php
     if (isset($_SESSION['name'])) {
        echo $_SESSION['name'];
     }
?>

if 语句只是用于检查，但如果您确信它已设置，则不需要它。

Answer 3

我们需要弄清楚一些事情：

I would rather not send the names entered into the form to a server or database, but simply keep them for a session and then lose them.

你正在发送数据到服务器，你已经使用jQuery和AJAX到POST你的表单到name.php（php 在服务器上工作）您从中收到响应并将其添加到您的页面：

$('#inviteform3').find('#result').html(response);

如果您想 KEEP 存储的数据（例如在会话中），您可以使用 Antony D'Andrea 在 [=12] 中建议的 PHP =].当浏览器关闭时，会话被销毁。在那之前，您可以在任何需要的地方使用会话变量。

Now that the name has been echoed to that form, I would like to echo that same data again elsewhere on the page. This is where I've run into a wall.

您正在 echoing name.php 中的名称，然后您的 AJAX 调用会检索整个页面（包括 html 和 body 标记）并将其添加到 #result。如果你想多次显示名称，只需在上面的行中多次附加它。

回显表单数据而不发送到服务器

Echo form data without sending to server

html

php

forms

echo