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

我已经创建了一个表单和PHP代码来发送电子邮件，但是我似乎无法在提交表单时实现某种没有页面刷新的无缝警报。我需要一些文本绿色/红色出现在按钮下面的某个地方。我还需要在电子邮件输入框中验证电子邮件的正确输入。还需要保护这个网站免受垃圾邮件，现在我只有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 . "rn";
$headers .= "Reply-To: ". $from . "rn";
$headers .= "MIME-Version: 1.0rn";
$headers .= "Content-Type: text/html; charset=ISO-8859-1rn";
$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>

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

"不刷新页面">- PHP是一种服务器端语言:它获取和执行一次，忘记它的状态;您需要每次发送一个请求来执行必要的文件。

考虑到这一点，谢天谢地，我们有了JavaScript。您可以在客户端使用您的post数据创建对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',
)));

你可以通过JavaScriptresponse变量访问它们，如:

.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
});

相关内容

最新更新

热门标签：