javascript - 单击按钮后 PHP 变量不更新

Question

我想要实现的是以文本形式显示输入的名称。用户可以通过单击编辑按钮来编辑它。表单将替换文本，并且表单必须具有名称的默认值。

我的代码能够执行所述过程。问题是当我单击保存按钮时，显示的文本仍然是旧值。它不更新。

function edit(firstname){
        document.getElementById("firstname-div").innerHTML='First Name:<input type="text" name="firstname" value="'+firstname+'">';
      }

function save(firstname){
        document.getElementById("firstname-div").innerHTML= 'First Name:'+firstname;
        }

<div id="firstname-div">
        <?php echo "First Name: $firstname<br>"; ?>
</div>
      
      <button type="button" onclick="edit('<?php echo $firstname ?>')">edit</button><br>

      <button type="button" onclick="save('<?php echo $_POST['firstname']?>')">save</button><br>

我知道这与 <button type="button" onclick="save('<?php echo $_POST['firstname']?>')">save</button> 有关。 。 $_POST['firstname']值仍然相同。

知道如何解决这个问题吗？或者纯 JavaScript 的其他实现？

Answer 1

由于您是 Web 开发新手，最好尝试更多有关 javascript 和 php 的教程，以了解它们在客户端和服务器端如何工作。

1. 为什么这不起作用？
   以便访问$_POST您必须从客户端向服务器提交 http post 请求。

2. 回答您的问题。
   (请记住，这里我只会在客户端显示用户输入，这不会更改您的数据库或任何服务器端变量。)

<button type="button" onclick="save()">save</button><br>

function edit(firstname){
   var firstname_old = document.getElementById("firstname-div")

   //Set id="FirstName" to your input field
   firstname_old.innerHTML= 'First Name:<input type="text" id="FirstName" name="firstname" value="'+ firstname +'">';
}

function save(){
  var firstname_new = document.getElementById("FirstName").value

  document.getElementById("firstname-div").innerHTML = firstname_new

}

希望这有助于修复该问题，而无需重新加载页面。