我无法在同一模态窗口中显示错误消息或成功。 我已经安装了wordpress,我正在使用的代码如下:
表格
<form id="formcotizador" method="post" action="<?php echo get_template_directory_uri(); ?>/cotizador/proccess.php">
<div class="small-12 medium-4 large-4 columns">
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required>
</div>
<div class="small-12 medium-4 large-4 columns">
<select name="provincia" id="provincia">
<option value="default">Seleccione una Provincia</option>
<option value="Buenos Aires">Buenos Aires</option>
<!-- ... -->
</select>
</div>
<div class="small-12 medium-4 large-4 columns">
<input type="text" id="localidad" name="localidad" placeholder="Localidad" required>
</div>
<div class="small-12 medium-4 large-4 columns">
<input type="email" id="email" name="email" placeholder="Tu email" required>
</div>
<div class="small-12 medium-4 large-4 columns">
<input type="submit" value="Enviar consulta" class="button tiny radius">
</div>
<!-- error, success div -->
<div class="small-12 medium-4 large-4 columns msjj"></div>
</form>
PHP (proccess.php)
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$name = strip_tags(trim($_POST['nombre']));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$provincia = $_POST['provincia'];
$localidad = strip_tags(trim($_POST['localidad']));
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$telefono = strip_tags(trim($_POST['telefono']));
$recipient = "produccion@dev.criterionet.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
if (mail($recipient, $subject, $email_content, $email_headers)) {
http_response_code(200);
echo "Gracias por enviar el msj";
} else {
http_response_code(500);
echo "Hubo un error al enviar el msj";
}
} else {
http_response_code(403);
echo "hubo un problema al enviar, pruebe de nuevo";
}
?>
JS / Ajax的
$(function() {
var form = $('#formcotizador');
var formMessages = $('.msjj');
$(form).submit(function(e) {
e.preventDefault();
var formData, = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData,
})
.done(function(response) {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
$('#nombre').val('');
$('#provincia').val('default');
$('#localidad').val('');
$('#email').val('');
})
.fail(function(data) {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Este es el error');
};
});
});
});
当我发送时,我重定向到'action'属性的页面,其中包含来自proccess.php的消息
您可以自己测试here。
这是修改的代码:How to Create an AJAX Contact Form。 我认为问题是该帖子没有被解释为不是模态窗口。
答案 0 :(得分:1)
您的网页上有一些JS错误。但特别是这个代码
var formData, = $(form).serialize();
应该是
var formData = $(form).serialize();
答案 1 :(得分:1)
除语法错误外,主要问题是表单正在页面中移动以便以模态打开。
移动元素时,绑定到它的事件将丢失。
要解决此问题,您可以使用submit
on()
处理程序
尝试更换:
var form = $('#formcotizador');
var formMessages = $('.msjj');
$(form).submit(function(e) {
使用
$(document).on('submit', '#formcotizador', function(e){
var form = $(this);
var formMessages = $('.msjj');
e.preventDefault();
/* remainder of your code */
});