如果提交表单成功，如何显示警报以及如何验证用户输入

Question

我已经创建了一个表单和 PHP 代码来发送电子邮件，但在提交表单时我似乎无法在没有页面刷新的情况下实现某种无缝警报。 我需要某种绿色/红色文本出现在按钮下方的某处。 我还需要在 email 输入框中验证 email 的正确输入。 并且还需要保护这个网站免受垃圾邮件机器人的影响，现在我只有 HTML 和 PHP，我的 PHP：

<?php
 if(isset($_POST['button']))
{
    $to = $_POST['emailTo'];
    $from = $_POST['email'];
    $name = $_POST['fullName'];
    $comment = $_POST['comment'];

    $headers = "From: $from";
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $from . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    $mailsubject = "Online Contact Form Inquery";

    $body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'></head><body>";
    $body .= "<table style='width: 100%;'>";
    $body .= "<tbody>";
    
    $body .= "<tr><td style='border:none;'><strong>Dear Gumcash Employee,</strong></td></tr>";
    $body .= "<tr><td style='border:none;'>You Received an e-mail from the online website, see details below:</td></tr>";
    $body .= "<tr><td style='border:none;'>&nbsp;</td></tr>";
    $body .= "<tr><td style='border:none;'><strong>Name:</strong> {$name}</td></tr>";
    $body .= "<tr><td style='border:none;'><strong>Email:</strong> {$from}</td></tr>";
    $body .= "<tr><td style='border:none;'><strong>Comment:</strong> {$comment}</td></tr>";
    $body .= "<tr><td style='border:none;'>&nbsp;</td></tr>";
    $body .= "<tr><td style='border:none;'>Thank you</td></tr>";
    
    $body .= "</tbody></table>";
    $body .= "</body></html>";
    
    $send = mail($to, $mailsubject, $body, $headers);
    header('Location:contact.html');
    die();
}

还有我的 HTML：


<form action="contact_process.php" method="POST" id="form">
               <div class="contact-form">
                  <div class="col-md-6 form-field input-halfrght">
                     <input name="fullName" id="fullName"type="text" class="form-input" placeholder="Full Name*" required>
                  </div>
                  <div class="col-md-6 form-field input-halflft">
                     <input name="email"  id="email" type="text" class="form-input" placeholder="Email*" required>
                  </div>
                  <div class="col-lg-12 col-md-12 form-field">
                     <select id="emailTo" name="emailTo" type="text" class="form-input" placeholder="Send To*" required>
                        <option value="e_cashdan@cashdan.com">Eric Cashdan</option>
                        <option value="r_gumersell@gumcash.com">Rich Gummersell</option>
                        <option value="g_garibaldi@gumcash.com">Gino Garibaldi</option>
                        <option value="d_macgillivray@gumcash.com">Don Macgillivray</option>
                        <option value="k_ohrnberger@gumcash.com">Kevin Ohrnberger</option>
                        <option value="d_samuylov@gumcash.com">Dmitri Samuylov</option>
                        <option value="m_caputo@gumcash.com">Mike Caputo</option>
                        <option value="f_meza">Frank Meza</option>
                        <option value="j_javett@gumcash.com">Joann Javett</option>
                        <option value="c_baum@gumcash.com">Colleen Baum</option>
                        <option value="d_payne@gumcash.com">Devin Arciprete</option>
                        <option value="m_roche">Melissa Roche</option>
                        <option value="a_collora@gumcash.com">Amy Collora</option>
                        <option value="c_aguilar@gumcash.com">Carlos Aguilar</option>
                        <option value="accounting@gumcash.com">Accounting</option>
                        <option value="quotations@gumcash.com">Quote</option>
                        <option value="orders@gumcash.com">Orders</option>
                        <option value="office@lovolta.com">Eugene TESTING</option>

                        </select>
                  </div>
                  <div class="col-lg-12 col-md-12 form-field">
                     <textarea name="comment" cols="1" rows="2" class="form-comment" placeholder="Comment*"></textarea>
                  </div>
                  <div class="col-md-12 form-field no-margin">
                  </div>
                  <div class="col-md-12 form-field no-margin">
                     
                     <input name="submit" type="submit" class="form-submit-btn" value="Submit Now">
                  </div>
               </div>
            </form>

尝试验证 email 输入，下拉 select 选择 email 我想提交此表单。 特殊类型的场景。 任何帮助将不胜感激验证，发送确认和阻止机器人。 谢谢！

Answer 1

“无需刷新页面” - PHP 是一种服务器端语言：它获取并执行一次并忘记它的 state； 您需要每次发送请求以执行必要的文件。

考虑到这一点，幸运的是，我们有 JavaScript。 您可以在客户端使用您的发布数据创建对 URI 的 AJAX 请求，然后接收响应。

fetch('contact_process.php', {
    method: 'POST',
    body:   new URLSearchParams(new FormData(document.getElementById('form')))
})
.then(response => {
    return response.json()
})
.then(response => {
    // todo: add your alerts
});

注意：您的contact_process.php页面应返回json_encode()响应。 同样，应该返回正确的内容类型。

header('Content-Type: application/json');

die(json_encode(array(
    'status'   => true,
    'message'  => 'Your custom message based on the outcome',
)));

然后，您可以通过 JavaScript response变量访问它们，例如：

.then(response => {
    if(response.status) {
        // show your response.message in green
        return;
    }

    // show your response.message in red

});

要实现这一点，您需要更改当前的解决方案。

删除form标签
更改按钮的input标签以键入button而不是submit
给按钮一个 ID，比如id='submit-btn'
为其添加事件侦听器

document.getElementById('submit-btn').addEventListener('click', e => {
    // fetch in here
});

如果提交表单成功，如何显示警报以及如何验证用户输入

问题描述

1 个解决方案

解决方案1
0 2021-02-03 01:31:38

如果提交表单成功，如何显示警报以及如何验证用户输入

问题描述

1 个解决方案

解决方案1 0 2021-02-03 01:31:38

解决方案1
0 2021-02-03 01:31:38