Question

所有字段正确填写后，我需要隐藏表单并显示确认页面

这是我的表格。

    <div id="form">

    <form name="info">
    <p>
    <label>First Name</label><br />
    <input type="text" id="first-name"/> <span id="fn-error"> </span>
    </p>

    <p>
    <label>Last Name</label><br />
    <input type="text" id="last-name"/> <span id="ln-error"> </span>
    </p>

    <p>
    <label>Email</label> <br />
    <input type="text" id="email"/> <span id="email-error"> </span>
    </p>

    <p>
     <label>Email Confirmation </label><br />
     <input type="text" id="email-confirm"/> <span id="emailConfirm-error"> </span>
     </p>


    <p>
    <label>Phone Number </label> <br />
    <input type="text" id="phone"/> <span id="phone-error"> </span>
    </p>

    <input type="button" value="submit" id="submit" onclick="" />
    </form>

</div>

<div id="confirmation">
    <h1>Confirmation</h1>
    <p id="info">
    </p>
</div>

</body>
</html>

这是我的验证页...

    window.addEventListener('load', init)

function init(e)
{

    var firstName = document.querySelector('#first-name');
    var lastName = document.querySelector('#last-name');
    var email = document.querySelector('#email');
    var emailConfirm = document.querySelector('#email-confirm');
    var phoneNumber = document.querySelector('#phone');
    var submit = document.querySelector('#submit');
    var input = document.querySelectorAll('input');
    var span = document.querySelectorAll('span');
    var label = document.querySelectorAll('label');
    var fields = document.querySelectorAll("#form input[type=text]");
    var form = document.querySelector('#form');


    submit.addEventListener('click', Edit);
    submit.addEventListener('click', EmailConfirm);
    submit.addEventListener('click', Results);

    function Edit(e)
    {
        for (let i = 0; i < fields.length; i++)
        {
            if (fields[i].value=="")
            {
                span[i].innerHTML = "*";
                span[i].style.color = "red"
                label[i].style.color = "red";
            }
            else
            {
                span[i].innerHTML="";
                label[i].style.color = "black";
            }
        }
    }

    function EmailConfirm(e)
    {
            if (email.value !== emailConfirm.value)
            {
                span[2].innerHTML = "Emails do not match";
                span[3].innerHTML = "Emails do not match"
            }
            else
            {
                span[2].innerHTML = "";
                span[3].innerHTML = "";
            }
    }

    function Results(e)
    {


    }

一旦所有字段都填写并且电子邮件和电子邮件确认匹配，我需要能够隐藏表单，并显示一个确认页面，该页面将打印出所填写的所有信息，但是我似乎无法弄清楚一旦所有信息正确就可以隐藏表格。

Answer 1

这可能是解决您问题的潜在方法。

获取表单元素，在通过自定义验证后，您可以

const form = document.querySelector('#form');

使用CSS来“显示：无”格式，即 form.style.display = 'none';
使用JS从DOM中删除元素 form.parentNode.removeChild(form);

这些是我通常做这种事情的方式。让我知道是否有帮助。

Answer 2

// Check to see if any value has been entered

function validate() {
 const val1 = document.getElementById('one').value;
 const val2 = document.getElementById('two').value;

 if ((val1.length <= 0) || (val2.length <= 0)) {
   alert('Please fill out the form'); // If form is NOT filled out
   return false;   
 }
   alert('Congrats. All done, buddy :)');
   return true;  // Otherwise return TRUE and make them disappear
 }


// This is our function that uses CSS to target specific elements and
// hide them, depending on our 'basic' logic implemented here

function hideIt() {
       const x = document.getElementById('one');
       const y = document.getElementById('two');
       const z = document.getElementById('three');



if(validate()) { // If it ends up 'true' hide the HTML elements
        x.style.visibility = 'hidden';
        y.style.visibility = 'hidden';
        z.style.visibility = 'hidden';

  } else {
        x.style.visibility = 'visible';
        y.style.visibility = 'visible';
        z.style.visibility = 'visible';
  }
};

<!DOCTYPE html>
<html>
<body>

<h1 id="heading">Hide inputs:</h1>


<form>
  <input type="text" placeholder="Email" id="one" /> 
  <input type="password" placeholder="Password" id="two"/>
  <!- Here we take advantage of our 'hideIt function -->
  <button onclick="hideIt()" type="button" id="three">Try Me</button>
</form>

</body>
</html>

很显然，您可以对此进行更多调整，但这是我会做的，或者至少是一个很好的起点。希望对您有所帮助：）

所有字段正确后隐藏表格

2 个答案: