联系表单 Ajax, php, Jquery:.



我正在尝试与Ajax,php和Jquery为我上一个研究项目(带有mvc架构的php(制作联系表格。我对此有一些疑问:

  • 我的联系表格没问题:我收到电子邮件!但是即使我使用该$.ajax(),我也不确定这是否真的是 Ajax 请求,因为在我的终端中没有 XHR 请求......
  • 我想在发送电子邮件时显示一条消息,例如"感谢您的消息",但该消息仅显示一秒钟,并且页面被重新编辑,因此所有信息都被清理。我尝试使用e.preventDefault()但是当我使用它时,我没有收到电子邮件。

感谢您的回答,您提供了帮助。

连续视图:

<section class="form_container">
<form class="contact_form" id="contact_form" method="post" action="index.php?action=contact"> 
<input class="firstname form" type="text" name="firstname" placeholder="Nom" id="firstname" required>
<span class="error-message"></span><br/>
<input class="lastname form" type="text" name="lastname" placeholder="Prénom" id="lastname" required>
<span class="error-message"></span><br/>
<input class="email form" type="text" name="email" placeholder="Email" id="email" required>
<span class="error-message"></span><br/>
<input class="object form" type="text" name="object" placeholder="Objet" id="object" required>
<span class="error-message"></span><br/>
<textarea class="content form" name="content" placeholder="Votre message" id="content" cols="30" rows="10" required></textarea>
<span class="error-message"></span><br/>
<input class="envoyer form" type="submit" name="submit" value="Envoyer" id="submit"><br/>
</form>
<div id="msg-ok">Merci. Votre message a bien été envoyé.</div>
<div id="msg-notok">Merci de renseigner correctement tous les champs .</div>
</section>

contact_form.js:

// send messages with Ajax
'use strict';
$('#contact_form').submit(function() {
nom = $(this).find("#firstname").val();
prenom = $(this).find("#lastname").val();
email = $(this).find("#email").val();
object = $(this).find("#object").val();
message = $(this).find("#content").val();
$.ajax({
type: "POST",
data: { 
nom:nom, 
prenom:prenom, 
email:email, 
object:object, 
content:content 
},
url: 'http://www.projet-5.pauline-superweb.com/index.php?action=contact',
success: function(data) {
$("#contact_form").hide();
$('#msg-ok').fadeIn();  
},
error: function() {
$('#msg-notok').fadeIn();
}
})
});
});

我的控制器中的 PHP 代码:

function contact()
{
if (isset($_POST['submit'])) {
$e = array();
$e['error'] = "Formulaire non valide";
if(isset($_POST['firstname']) && isset($_POST['lastname']) && isset($_POST['object']) && isset($_POST['content']) && !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$e['email_invalide'] = "email_invalide";
} else {
$e['error'] = 'Ok';
$nom = $_POST['firstname'];
$prenom = $_POST['lastname'];
$email = $_POST['email'];
$object = $_POST['object'];
$content = $_POST['content'];
$to = 'contact.super.web@gmail.com';
$sujet = $object;
$message = $content;
$headers = 'From ' . $nom . ' ' . $prenom . ' ' . $email;
mail($to, $sujet, $message, $headers);
} 
} 
ob_start();
include('views/frontend/site/contactView.php');
$content = ob_get_clean();
require("views/frontend/site/template.php");
}

更改此设置

<input class="envoyer form" type="submit" name="submit" value="Envoyer" id="submit">

<input class="envoyer form" type="button" name="submit" value="Envoyer" id="submit">

和改变

$('#contact_form').submit(function() {
to 
$('#submit').click(function() {

相关内容

  • 没有找到相关文章

最新更新