[ad_1]
<form id="contact-form" method="post" action="contact.php"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_name">Firstname *</label> <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_lastname">Lastname *</label> <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required."> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_email">Email *</label> <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_need">Please specify your need *</label> <select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need."> <option value="">-----</option> <option value="Request quotation">Request quotation</option> <option value="Request order status">Request order status</option> <option value="Request copy of an invoice">Request copy of an invoice</option> <option value="Other">Other</option> </select> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="form_message">Message *</label> <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please, leave us a message."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <div class="form-group"> <div class="g-recaptcha" data-sitekey="6LdX5uQUAAAAAEPAP03K3_jafzIdoOFSblSgm2um" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div> <input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha"> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <button type="submit" class="btn btn-success btn-send btn-danger-gradiant mt-3 mb-3 text-white border-0 py-2 px-3" value="Send message"><span> SUBMIT NOW class="fa fa-paper-plane"></span></button> </div> </div> <div class="row"> <div class="col-md-12"> <p class="text-muted"> ^__strong>* These fields are required. </p> </div> </div> </div> </form>
$(function () {
window.verifyRecaptchaCallback = function (response) {
$('input[data-recaptcha]').val(response).trigger('change');
}
window.expiredRecaptchaCallback = function () {
$('input[data-recaptcha]').val("").trigger('change');
}
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data) {
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
grecaptcha.reset();
}
}
});
return false;
}
})
});
<?php // require ReCaptcha class require('recaptcha-master/src/autoload.php'); // configure // an email address that will be in the From field of the email. $from = 'Demo contact form <demo@domain.com>'; // an email address that will receive the email with the output of the form $sendTo = 'Demo contact form <demo@domain.com>'; // subject of the email $subject = 'New message from contact form'; // form field names and their translations. // array variable name => Text to appear in the email $fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); // message that will be displayed when everything is OK :) $okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!'; // If something goes wrong, we will display this message. $errorMessage = 'There was an error while submitting the form. Please try again later'; // ReCaptch Secret $recaptchaSecret = '6LdX5uQUAAAAAEakfeeS4jlKkOjvSaqrawNp4gUD'; // let's do the sending // if you are not debugging and don't need error reporting, turn this off by error_reporting(0); error_reporting(E_ALL & ~E_NOTICE); try { if (!empty($_POST)) { // validate the ReCaptcha, if something is wrong, we throw an Exception, // i.e. code stops executing and goes to catch() block if (!isset($_POST['g-recaptcha-response'])) { throw new \Exception('ReCaptcha is not set.'); } // do not forget to enter your secret key from https://www.google.com/recaptcha/admin $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret, new \ReCaptcha\RequestMethod\CurlPost()); // we validate the ReCaptcha field together with the user's IP address $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']); if (!$response->isSuccess()) { throw new \Exception('ReCaptcha was not validated.'); } // everything went well, we can compose the message, as usually $emailText = "You have a new message from your contact form\n=============================\n"; foreach ($_POST as $key => $value) { // If the field exists in the $fields array, include it in the email if (isset($fields[$key])) { $emailText .= "$fields[$key]: $value\n"; } } // All the neccessary headers for the email. $headers = array('Content-Type: text/plain; charset="UTF-8";', 'From: ' . $from, 'Reply-To: ' . $from, 'Return-Path: ' . $from, ); // Send email mail($sendTo, $subject, $emailText, implode("\n", $headers)); $responseArray = array('type' => 'success', 'message' => $okMessage); } } catch (\Exception $e) { $responseArray = array('type' => 'danger', 'message' => $e->getMessage()); } if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $encoded = json_encode($responseArray); header('Content-Type: application/json'); echo $encoded; } else { echo $responseArray['message']; }
我尝试过的：
我尝试删除 action=contact.php 但仍然不起作用，请帮助
解决方案1
以下是如何完成此操作（我指的是提交数据）以及如何处理数据的简化描述。
form：它有一个 action 属性（为您提供 contact.php），并且 from 内的所有命名项都将发送到操作目标。 在您对发送的数据执行任何操作后，就会打开此页面。 如果您必须使用表单来完成您想做的任何事情，那么一种方法是重新打开您刚刚提交的同一页面，其中包含您希望的更改（例如，预填充提交的数据以及成功或失败消息） 。 如果我希望保持在同一页面上，我不会这样做，即使用表格。
AJAX：AJAX 允许您将数据发送到服务器，处理它，然后将响应发送回发送数据的页面。 您可以使用它来更新现有页面的任何部分。 对于您来说，也许这就是将“成功”或“失败”放在您为消息保留的空白区域中。 AJAX可以在这里学习。[^]
一旦习惯了使用 AJAX，您通常会更喜欢它而不是表单 – 但表单确实有一席之地。
解决方案2
您的提交处理程序发出 AJAX 请求，但不会阻止表单提交。
如果您想让用户保持在当前页面，并通过 AJAX 处理提交，则需要阻止默认处理提交事件。
JavaScript
$('#contact-form').on('submit', function (e) { if (!e.isDefaultPrevented()) { var url = "contact.php"; $.ajax({ ... }); e.preventDefault(); // <-- Add this line //return false; // <-- Remove this line } });
[ad_2]
コメント