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

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

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

经典表单提交
AJAX表单提交

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

在第二种情况中，您希望按正确的顺序执行多项操作：

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

至于代码，在HTML中：

从onsubmit="ask()"标记

<form>

在提交按钮

type="submit"

将style="display:none"添加到您的<div id="myModal">。
在模态

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();

请注意，此代码是快速的，不仅仅是为了解决您的问题。

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

随意询问是否有任何事情不清楚。

如何在满足所有要求后才能显示模态框？

1 个答案: