<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']; }
Ce que j’ai essayé :
j’ai essayé de supprimer action=contact.php mais cela ne fonctionne toujours pas, aidez-moi
Solution 1
Voici une description simplifiée de la façon dont cela peut être fait – j’entends par là soumettre vos données – et comment elles sont ensuite traitées.
form : il a un attribut d’action (contact.php pour vous) et tous les éléments nommés dans le champ “from” sont envoyés à la cible de l’action. Cette page s’ouvre ensuite une fois que vous avez fait ce que vous faites avec les données que vous avez envoyées. Si vous devez utiliser un formulaire pour tout ce que vous souhaitez faire, une façon de procéder consiste à rouvrir la même page que vous venez de soumettre avec les modifications souhaitées (pré-remplir les données soumises, par exemple, ainsi qu’un message de réussite ou d’échec). . Je ne procéderais pas de cette façon, c’est-à-dire avec des formulaires, si je souhaite rester sur la même longueur d’onde.
AJAX : AJAX vous permet d’envoyer des données au serveur, de les gérer, puis de renvoyer une réponse à la page qui a envoyé les données. Vous pouvez l’utiliser pour mettre à jour n’importe quelle partie de la page existante. Pour vous, cela reviendrait peut-être à mettre « réussite » ou « échec » dans une zone vide que vous avez réservée au message. AJAX peut être appris ici.[^]
Une fois habitué à utiliser AJAX, vous le préférerez généralement à un formulaire – mais les formulaires ont leur place.
Solution 2
Votre gestionnaire de soumission émet une requête AJAX, mais cela n’empêche pas la soumission du formulaire.
Si vous souhaitez garder l’utilisateur sur la page actuelle et gérer la soumission via AJAX, vous devez empêcher la gestion par défaut de l’événement de soumission.
$('#contact-form').on('submit', function (e) { if (!e.isDefaultPrevented()) { var url = "contact.php"; $.ajax({ ... }); e.preventDefault(); // <-- Add this line //return false; // <-- Remove this line } });
コメント