我有一個請求用戶資料（名稱）的表單，然后當他們單擊“檢查”按鈕時，表單將被 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:[email protected]"
}
}
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>
應該發生的是，當單擊編輯時，在表單中輸入的資料應該再次顯示在要編輯的表單中。
uj5u.com熱心網友回復：
不要洗掉表單，為什么不將其顯示設定為無：
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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453552.html
標籤：javascript html 形式