如何验证既不转到另一页却又在同一页上填写另一张表格的表格？

Question

I have two forms on a page, the second form should be filled out and have validation required to fill out most of the input fields. If the fields arent filled out, then a pop-up or alert should be shown once the save button has been clicked, notifying the user of what needs to be done.

Once the saved button has been clicked, the correctly filled out textfields should be copied/transferred/moved to the first form. For example; in the second form if I fill out title, name and surname. Those three fields need to be validated. Once I hit the save-button, the values in the title, name and surname field should be concatenated inside of the name textfield in the first form.

Answer 1

I've spotted to issues with your code:

• if you want to var a = document.forms["forms"]["Title"].value; then "forms" value must be set on the id attribute instead of name attribute.
• document.getElementById('name').innerText = won't change the value of the name input, you have to use the value property instead.

Corrected code snippet below

 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> 

As asked by the author, this is a working fiddle implementation of the problem, with the css provided in another fiddle by the author, where the second form dissappear after having clicked "save".

Working fiddle with the css