从 div 返回表单以编辑表单 html Javascript

Question

我有一个请求用户数据（名称）的表单，然后当他们单击“检查”按钮时，该表单将被 div 替换并在其中显示名称。然后，当用户单击“编辑”按钮时，用户会收到返回表单的提示，但会返回之前输入的数据。我想知道如何在表单中显示详细信息。

<html>

<body>
<div id="container"> 
            <h2 id="heading">Query Form</h2>
            <br>
            <div id="formdiv">
                <form id="form" method="POST">
                <div>
                    <label for="name">Name: </label>
                    <input id="name" name="name" type="text">
                </div>
                <br>
                <button id="checkbutton" onclick=submitform()>Check</button>
                <input type="submit" id="formbutton" value="Submit" onclick=validateForm()>    
            </form>           
        </div>
            
        <div id="for_replacement">
        
            <div id="display_replacment" style="display: none;">
                <form>
                
                    <label for="name_submit">Name: </label><span id="name"></span>
                    <span id="display_name"></span><br><br>

                    <input type="submit" id="formbutton" value="Edit" onclick="editform()">
    
                </form>
            </div>
        </div>

<script>

function validateForm() {

  var formrefresh = document.getElementById("form");
  function handleForm(event) {
    event.preventDefault();
  }
  
  
  var namevalidate =  document.getElementById("name").value;

  if(namevalidate.length == 0) {
    alert("Please Enter Name");
    formrefresh.addEventListener("submit", handleForm);
    return;
  }else {
    form.action = "mailto:mail@gmail.com"
  }
}


function submitform() {

  globalThis.name = document.getElementById("name").value;

  document.getElementById('container').innerHTML = document.getElementById("display_replacment").innerHTML;

  document.getElementById("display_name").innerText = name;

}

function editform() {
  alert(globalThis.name);
}


</script>
</body>
</html>

应该发生的事情是，当点击编辑时，在表单中输入的数据应该再次显示在表单中以进行编辑。

Answer 1

为什么不删除表单而不是将其显示设置为 none:

document.getElementById('heading').style.display = "none";
document.getElementById('form').style.display = "none";
document.getElementById('display_replacment').style.display = "block";

当你想把它取回来时

 document.getElementById('heading').style.display = "block";
 document.getElementById('form').style.display = "block";
 document.getElementById('display_replacment').style.display = "none";

您可以从 display_name:

中获取名称

const name =document.getElementById("display_name").innerText;
document.getElementById("name").value = name;

从 div 返回表单以编辑表单 html Javascript

Move back to a Form from a div to edit the form html Javascript

html

javascript

forms