满足所有要求后如何使模态框出现？

Question

所以我有一个表格，要求提供用户的个人信息。在表格的最后，我设置了一个弹出模式，上面写着“感谢您注册我们等”。但是，即使您将所有字段留空并单击表单末尾的按钮，模式仍然会弹出“感谢您注册我们...”。

如何将模态框设置为仅在所有字段完成后才出现？

注意：单击表单末尾的按钮后，我需要将个人信息保留在页面上。我将类型从提交更改为按钮，但是当我填写最后一个问题并单击按钮时，所有输入都消失了。

任何帮助将不胜感激！

这是表格：

<form id="personalinfo" name="personalinfo" onsubmit="ask()">
    <b>Please sign up with us before you proceed:</b><br>
    First Name: <input name="firstname" required="" size="40" type="text"><br>
    <br>
    Last Name: <input name="lastname" required="" size="40" type="text"><br>
    <br>
    Age: <select name="dropdown">
        <option value="1">10-18</option>
        <option value="2">19-25</option>
        <option value="3">26-35</option>
        <option value="4">36-45</option>
        <option value="5">46-55</option>
        <option value="6">56-65</option>
        <option value="6">65+</option>
    </select><br>
    <br>
    Gender: <input name="gender" required="" type="radio" value="male"> Male<br>
    <input name="gender" required="" type="radio" value="female"> Female<br>
    <input name="gender" required="" type="radio" value="other"> Other<br>
    <br>
    <br>
    <button id="OK!">OK!</button>
</form>

<div id="myModal" class="modal" type="button">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Thank you for signing up with us ! You can now proceed to the test.</p>
    </div>
</div>

<script>
    var modal = document.getElementById('myModal');
    var btn = document.getElementById("OK!");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() 
    {
        modal.style.display = "block";
    }

    span.onclick = function() 
    {
        modal.style.display = "none";
    }

    window.onclick = function(event) 
    {
        if (event.target == modal) 
        {
            modal.style.display = "none";
        }
    }

</script>
</form>

Answer 1

您的表单被清除的原因是您的表单已提交到服务器，因此页面重新加载了一个空表单。

在我看来，有两种方法可以解决这个问题：

1. 经典表单提交
2. AJAX 表单提交

在第一种情况下，您将发送表单，在服务器上对其进行处理，然后重定向到包含欢迎消息（您的模态内容）的页面。但在这种情况下，您的表单会在提交时被清除。

在第二种情况，你想以正确的顺序做几件事：

• 通过 AJAX 请求将表单数据发送到服务器
• 处理成功和错误情况
• 显示您的模式，包含根据状态（成功或错误）的消息

至于代码，在您的 HTML 中：

1. 从您的 <form> 标签中删除 onsubmit="ask()"
2. 为您的提交按钮添加type="submit" 属性
3. 将style="display:none" 添加到您的<div id="myModal">。
4. 将id="modalText" 属性添加到模态框内的<p> 标记

在您的脚本中，在您的代码之后添加以下内容（您可以使用 jQuery 使其更简单，但这根本不是强制性的，请参阅 this）：

// Get <form> element and modal's <p> element
var formElem = document.getElementById('personalinfo');
var modalTextElem = document.getElementById('modalText');
var modalText;

// This replaces onsubmit="ask()"
formElem.addEventListener("submit", ask);

// The e argument to ask is an Event
function ask(e) {
    // This will prevent the form from being submitted
    // (litterally "prevent default event" from taking place)
    e.preventDefault();

    // Send data to the server via an AJAX POST request
    var xhr = new XMLHttpRequest();
    // process.php would be a server-side script (see below)
    xhr.open('POST', 'process.php');

    // This is what is called a callback:
    // code that will be executed when your request returns
    xhr.onload = function() {

        // HTTP status 200 = OK
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            modalText = 'Thank you ' + data.firstname +
                ', for signing up with us ! You can now proceed to the test.';
        }
        // Otherwise an error occurred
        else if (xhr.status !== 200) {
            modalText = 'Request failed.  Returned status of ' + xhr.status
                + ' with error: <b>' + xhr.responseText + '</b>';
        }
        // Set the modal text
        modalTextElem.innerHTML = modalText;
        // Show the moal
        modal.setAttribute("display", "block");
    };

    // Actually send the request
    xhr.send(new FormData(formElem));
}

然后是 PHP 中的服务器端处理示例（process.php 与您的 HTML 表单位于同一文件夹中）：

<?php
function validataData() {
    if( strlen($_POST['firstname'] ) < 2 ) {
        return "first name is too short (2+ characters required)";
    }
    if( strlen($_POST['lastname'] ) < 2 ) {
        return "last name is too short (2+ characters required)";
    }
    return "";
}
$validationResult = validataData();

// On error send an error response (400 bad request with the type of error)
if( !empty($validationResult) ) {
    http_response_code(400);
    die($validationResult);
}

// Otherwise send back form data (by default with error code 200)
echo json_encode($_POST);
die();

请记住，此代码只是为了解决您的问题。

在现实生活中的代码中，您会在表单中询问电子邮件和密码，然后您需要更多服务器端的东西：您会检查电子邮件是否已经存在于您的数据库中，等等。

如果有什么不清楚的地方可以随时提问。