如何为HTML/PHP/JS联系表单实现提交成功与失败的弹窗提示？是否可通过if/else实现？

当然可以用if/else语句来实现这个需求！你的核心问题是当前的前端提示不管表单验证是否通过都会弹出成功消息，我们需要结合后端的验证结果来动态显示对应的弹窗。下面分两种常见的实现方式来讲解：

这种方式贴合你现有的代码结构，不需要大改，通过后端传递提交状态给前端，页面刷新后根据状态弹窗。

修改后端PHP代码 #

首先在你的PHP逻辑中，添加一个变量来跟踪提交状态，在所有字段验证完成后判断是否有错误：

// 初始化提交状态变量
$submitStatus = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 你原有的所有表单验证代码...
    
    // 检查是否存在任何验证错误
    $hasErrors = isset($anredeErr) || isset($vornameErr) || isset($nachnameErr) || 
                 isset($anschriftErr) || isset($postleitzahlErr) || isset($stadtErr) || 
                 isset($emailErr) || isset($telefonErr) || isset($nachrichtErr);
    
    if (!$hasErrors) {
        // 这里添加表单提交的实际逻辑（比如发送邮件、存入数据库等）
        // 假设提交成功
        $submitStatus = "success";
        // 可选：清空表单字段，让用户可以重新提交
        $anrede = $vorname = $nachname = $anschrift = $postleitzahl = $stadt = $email = $telefon = $nachricht = "";
    } else {
        $submitStatus = "error";
    }
}

修改前端代码 #

移除提交按钮上的onclick事件（因为它会在表单提交前就触发，无法判断后端状态），然后添加一段JS在页面加载时读取后端传递的状态并弹窗：

<!-- 移除按钮的onclick属性 -->
<input class="form-submit" type="submit" name="anfrage absenden" value="Anfrage absenden">

<script>
    // 获取后端传递的状态
    const status = "<?php echo $submitStatus; ?>";
    
    if (status === "success") {
        alert("Nachricht erfolgreich abgeschickt!"); // 提交成功提示（德语）
    } else if (status === "error") {
        alert("Fehler beim Absenden des Formulars! Bitte überprüfen Sie die Pflichtfelder."); // 提交失败提示（德语）
    }
</script>

如果想要页面不刷新就能完成提交并显示提示，这种方式更友好，同样用if/else来处理不同状态：

修改后端PHP代码 #

让后端返回JSON格式的状态和错误信息，方便前端处理：

// 设置响应头为JSON格式
header('Content-Type: application/json');

$response = [
    "status" => "error",
    "errors" => []
];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 你原有的所有表单验证代码...
    
    // 收集所有错误信息
    if (isset($anredeErr)) $response["errors"]["anrede"] = $anredeErr;
    if (isset($vornameErr)) $response["errors"]["vorname"] = $vornameErr;
    if (isset($nachnameErr)) $response["errors"]["nachname"] = $nachnameErr;
    if (isset($anschriftErr)) $response["errors"]["anschrift"] = $anschriftErr;
    if (isset($postleitzahlErr)) $response["errors"]["postleitzahl"] = $postleitzahlErr;
    if (isset($stadtErr)) $response["errors"]["stadt"] = $stadtErr;
    if (isset($emailErr)) $response["errors"]["email"] = $emailErr;
    if (isset($telefonErr)) $response["errors"]["telefon"] = $telefonErr;
    if (isset($nachrichtErr)) $response["errors"]["nachricht"] = $nachrichtErr;
    
    // 如果没有错误，标记提交成功
    if (empty($response["errors"])) {
        // 这里添加表单提交的实际逻辑
        $response["status"] = "success";
    }
}

// 输出JSON并终止脚本
echo json_encode($response);
exit;

修改前端代码 #

给表单添加ID，用JS监听提交事件，阻止默认刷新，发送异步请求并根据返回结果弹窗：

<!-- 给表单添加ID -->
<form class="kontaktformular" id="contactForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
    <!-- 原有的表单字段不变，但给每个错误提示span添加data-field属性，方便JS更新 -->
    <div class="form-div">
        <i class="fas fa-pen"></i>
        <input class="form-input" type="text" id="anrede" name="anrede" placeholder="Anrede *" value="<?php echo $anrede ?>">
        <span class="error" data-field="anrede"><?php echo $anredeErr;?></span>
        <br>
    </div>
    <!-- 其他字段同理，都给error span加上data-field属性 -->
    
    <!-- 提交按钮保持不变 -->
    <input class="form-submit" type="submit" name="anfrage absenden" value="Anfrage absenden">
</form>

<script>
    const form = document.getElementById('contactForm');
    
    form.addEventListener('submit', async (e) => {
        // 阻止表单默认刷新行为
        e.preventDefault();
        
        // 收集表单数据
        const formData = new FormData(form);
        
        try {
            // 发送异步请求到后端
            const response = await fetch(form.action, {
                method: form.method,
                body: formData
            });
            
            // 解析后端返回的JSON数据
            const result = await response.json();
            
            // 根据状态显示不同弹窗
            if (result.status === "success") {
                alert("Nachricht erfolgreich abgeschickt!");
                // 清空表单
                form.reset();
                // 清空所有错误提示
                document.querySelectorAll('.error').forEach(span => span.textContent = "");
            } else {
                alert("Fehler beim Absenden des Formulars! Bitte überprüfen Sie die Pflichtfelder.");
                // 更新页面上的错误提示
                Object.keys(result.errors).forEach(field => {
                    const errorSpan = document.querySelector(`.error[data-field="${field}"]`);
                    if (errorSpan) {
                        errorSpan.textContent = result.errors[field];
                    }
                });
            }
        } catch (error) {
            // 处理网络错误
            alert("Netzwerkfehler! Bitte versuchen Sie es später erneut.");
        }
    });
</script>

总结 #

两种方式都用到了if/else语句：

• 后端用if/else判断表单是否验证通过，标记提交状态
• 前端用if/else根据后端返回的状态显示对应的提示弹窗

你可以根据自己的需求选择同步或异步方式，同步方式更简单，异步方式用户体验更好。

内容的提问来源于stack exchange，提问作者Lutzyy