如何驗證既不轉到另一頁卻又在同一頁上填寫另一張表格的表格？

Question

我在頁面上有兩個表單，第二個表單應該填寫，並且需要驗證才能填寫大部分輸入字段。 如果沒有填寫這些字段，則在單擊保存按鈕后應顯示一個彈出窗口或警報，通知用戶需要做什么。

單擊保存的按鈕后，應將正確填寫的文本字段復制/傳輸/移動到第一個表單。 例如; 在第二個表格中，如果我填寫標題，姓名和姓氏。 這三個字段需要驗證。 按下保存按鈕后，標題，名稱和姓氏字段中的值應在第一種形式的名稱文本字段內串聯起來。

Answer 1

我發現您的代碼存在問題：

• 如果要var a = document.forms["forms"]["Title"].value; 那么必須在id屬性而不是name屬性上設置“ forms”值。
• document.getElementById('name').innerText =不會更改名稱輸入的value而必須使用value屬性。

更正了以下代碼段

 function openForm() { document.getElementById("container").style.display = "block"; } document.getElementById("save-btn").onclick = function (e) { e.preventDefault(); validateForm(); moveContent(); } function moveContent() { var x = document.getElementById('name').value = document.getElementById('TitleTransfer').value + ' ' + document.getElementById('NameTransfer').value + ' ' + document.getElementById('LastNameTransfer').value; } function validateForm() { var a = document.forms["forms"]["Title"].value; var b = document.forms["forms"]["NameTransfer"].value; var c = document.forms["forms"]["LastNameTransfer"].value; var d = document.forms["forms"]["EmailTransfer"].value; if (a == null || a == "", b == null || b == "", c == null || c == "", d == null || d == "") { alert("Please Fill All Required Field"); return false; } } function openPage(pageName, elmnt, color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(pageName).style.display = "block"; elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); 

 <h1>Your Name and Address</h1> <form action="/"> <div class="nameDiv"> Name: <input type="textbox" name="firstname" title="name" id="name"> <div class="dotOne"> ? </div> <span class="nameHelp"> Please enter first and last name </span> </div> <br> <div class="addressDiv"> Address: <input type="text" name="lastname" id="address"> <div class="dotTwo">?</div> </div> <br> <div class="emailDiv"> Email: <input type="text" name="Email" id="email"> <span class="dotThree">?</span> </div> <br> <div class="numberDiv"> Phone number: <input type="text" name="Phone number" id="number"> <span class="dotFour">?</span> </div> <br> </form> <button class="btn" onclick="openForm()">Edit Details</button> <div id="container"> <button class="tablink" onclick="openPage('Name', this, 'grey')" id="defaultOpen">Name</button> <button class="tablink" onclick="openPage('Address', this, 'grey')">Address</button> <div id="Name" class="tabcontent"> <form id="forms"> <div class="nameDiv"> Title: <input type="text" name="Title" title="Title" id="TitleTransfer"> </div> <br> <div class="addressDiv"> Name: <input type="text" name="name" id="NameTransfer"> </div> <br> <div class="emailDiv"> Surname: <input type="text" name="surname" id="LastNameTransfer"> </div> <br> <div class="numberDiv"> Email Address: <input type="text" name="email Address" id="EmailTransfer"> </div> <br> <div class="numberDiv"> Phone number: <input type="text" name="Phone number" id="NumberTransfer"> </div> <button id="save-btn" onclick="validateForm()">Save</button> </form> </div> <div id="Address" class="tabcontent"> <form> <div class="nameDiv"> Line 1: <input type="text" name="firstname" value="Mickey" title="name" class="name"> </div> <br> <div class="addressDiv"> Line 2: <input type="text" name="lastname" value="Mouse" class="address"> </div> <br> <div class="emailDiv"> Suburb: <input type="text" name="Email" value="Email" class="email"> </div> <br> <div class="numberDiv"> State: <input type="text" name="Phone number" value="Phone number" class="number"> </div> <br> <div class="numberDiv"> Country: <input type="text" name="Phone number" value="Phone number" class="number"> </div> <button class="save-btn" onclick="">Save</button> </form> </div> </div> 

正如作者所問的那樣，這是該問題的有效提琴實現，作者在另一個提琴中提供了css，其中第二種形式在單擊“保存”后消失了。

用CSS擺弄